Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fluent Theme: Controls inside ToolBar have poor styling and usability #9938

Open
bent-rasmussen opened this issue Oct 11, 2024 · 5 comments · May be fixed by #10169
Open

Fluent Theme: Controls inside ToolBar have poor styling and usability #9938

bent-rasmussen opened this issue Oct 11, 2024 · 5 comments · May be fixed by #10169
Assignees
@siagupta0202
Labels
🚧 work in progress Investigate Requires further investigation by the WPF team. Win 11 Theming

Comments

@bent-rasmussen
Copy link

bent-rasmussen commented Oct 11, 2024 •
edited
Loading

Description

When creating a desktop application with the new Fluent theme of .NET 9, controls inside the ToolBar appear poorly styled and have low usability. For example, one cannot see if a CheckBox is checked or a ToggleButton is toggled. Also the styling does not appear not up-to-date with the Fluent theme.

Reproduction Steps

  • Create a .NET 9 desktop app with the new Fluent theme
  • Add a ToolBar like so:
<ToolBarTray Margin="0,10,0,0">
    <ToolBar DockPanel.Dock="Top">
        <Button>Button</Button>

        <ToggleButton Margin="5,0,0,0" IsChecked="True">Checked Toggle Button</ToggleButton>

        <CheckBox Margin="5,0,0,0" IsChecked="True">Checked CheckBox</CheckBox>

        <ComboBox Margin="5,0,0,0">
            <ComboBoxItem IsSelected="True">ComboBox</ComboBoxItem>
            <ComboBoxItem>Bar</ComboBoxItem>
            <ComboBoxItem>Baz</ComboBoxItem>
        </ComboBox>

        <ComboBox Margin="5,0,0,0" IsDropDownOpen="True">
            <ComboBoxItem IsSelected="True">Open ComboBox</ComboBoxItem>
            <ComboBoxItem>Bar</ComboBoxItem>
            <ComboBoxItem>Baz</ComboBoxItem>
        </ComboBox>
    </ToolBar>
</ToolBarTray>

Expected behavior

Controls in the ToolBar are well-styled and have fair usability.

Actual behavior

Controls in the ToolBar are poorly styled and have low usability:

Image

Regression?

No response

Known Workarounds

Wrap controls inside a StackPanel, Grid, or other container.

Impact

Writing desktop apps with the new Fluent theme of .NET 9 requires either restyling controls or simply not using standard controls. The palette of realistically usable controls is smaller than expected.

Configuration

Property Value
SDK .NET 9 RC2
OS Name Microsoft Windows 11 Pro
Version 10.0.22631 Build 22631
System SKU Surface_Pro_8_1983

Other information

No response
@bent-rasmussen bent-rasmussen changed the title Controls inside ToolBar have poor styling and usability Fluent Theme: Controls inside ToolBar have poor styling and usability Oct 11, 2024
@bent-rasmussen bent-rasmussen changed the title Fluent Theme: Controls inside ToolBar have poor styling and usability Fluent Theme: Controls inside ToolBar have poor styling and usability Oct 11, 2024
@glanium
Copy link

glanium commented Oct 13, 2024 •
edited
Loading

Try dark theme
Then I cant see text in combobox

Styling in the dark theme is much worse than in the light theme.

@himgoyalmicro himgoyalmicro added Investigate Requires further investigation by the WPF team. Win 11 Theming labels Oct 14, 2024
@bent-rasmussen
Copy link
Author

Try dark theme Then I cant see text in combobox

Styling in the dark theme is much worse than in the light theme.

Here is how it looks in dark theme for good measure:

Image

The last toolbar nests the controls inside a StackPanel as a workaround.

@MichaeIDietrich
Copy link
Contributor

Without running the code, I guess it's because direct children of a ToolBar get applied an explicit style, which probably is not fully defined in Fluent.

wpf/src/Microsoft.DotNet.Wpf/src/PresentationFramework/System/Windows/Controls/ToolBar.cs

Lines 463 to 505 in 8277d58

/// <summary>
/// Prepare the element to display the item. This may involve
/// applying styles, setting bindings, etc.
/// </summary>
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
// For certain known types, automatically change their default style
// to point to a ToolBar version.
FrameworkElement fe = element as FrameworkElement;
if (fe != null)
{
Type feType = fe.GetType();
ResourceKey resourceKey = null;
if (feType == typeof(Button))
resourceKey = ButtonStyleKey;
else if (feType == typeof(ToggleButton))
resourceKey = ToggleButtonStyleKey;
else if (feType == typeof(Separator))
resourceKey = SeparatorStyleKey;
else if (feType == typeof(CheckBox))
resourceKey = CheckBoxStyleKey;
else if (feType == typeof(RadioButton))
resourceKey = RadioButtonStyleKey;
else if (feType == typeof(ComboBox))
resourceKey = ComboBoxStyleKey;
else if (feType == typeof(TextBox))
resourceKey = TextBoxStyleKey;
else if (feType == typeof(Menu))
resourceKey = MenuStyleKey;
if (resourceKey != null)
{
bool hasModifiers;
BaseValueSourceInternal vs = fe.GetValueSource(StyleProperty, null, out hasModifiers);
if (vs <= BaseValueSourceInternal.ImplicitReference)
fe.SetResourceReference(StyleProperty, resourceKey);
fe.DefaultStyleKey = resourceKey;
}
}
}

@bent-rasmussen
Copy link
Author

bent-rasmussen commented Nov 19, 2024 •
edited
Loading

It gets worse if the ToolBar is hosted inside a Page hosted inside a Frame:

Image

Then the text is just black, it does not respect the theme. Also, explicitly putting a TextBlock with an explicit style like BodyTextBlockStyle inside the Button has no effect.

@bent-rasmussen
Copy link
Author

bent-rasmussen commented Nov 19, 2024 •
edited
Loading

Okay, it seems to be a general text styling issue with Pages, in the WPF Gallery Preview app, Microsoft uses what looks like a workaround to me, setting this property on a Page:

<Page Foreground="{DynamicResource TextFillColorPrimaryBrush}" ...

@siagupta0202 siagupta0202 self-assigned this Dec 11, 2024
@siagupta0202 siagupta0202 linked a pull request Dec 12, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siagupta0202 siagupta0202

Labels
🚧 work in progress Investigate Requires further investigation by the WPF team. Win 11 Theming
Projects
WPF Fluent Theming
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Updates styling for different controls in ToolBar siagupta0202/wpf
5 participants
@MichaeIDietrich @bent-rasmussen @glanium @himgoyalmicro @siagupta0202