Fluent Theme: Controls inside ToolBar have poor styling and usability

[bent-rasmussen]

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:

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

[glanium]

Try dark theme
Then I cant see text in combobox

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

[bent-rasmussen]

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:

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

[MichaeIDietrich]

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;
	}
	}
	}