Toolbar button styles get ignored?

Question

I have buttons on a toolbar in WPF.

When I do the XAML:

<ToolBar.Resources>
   <Style TargetType="{x:Type Button}">
      <Setter Property="Width" Value="21"></Setter>
      <Setter Property="Height" Value="21"></Setter>
   </Style>
</ToolBar.Resources>

None of the buttons on the toolbar set their sizes accordingly.

I have to go to each button and manually set their widths and heights to the desired values.

Any idea why the Style on the toolbar does not work?

score 12 · Accepted Answer · edited Apr 17 '20 at 12:50

This occurs because ToolBar applies the style identified by ToolBar.ButtonStyleKey to buttons, instead of leaving them with the default style. (That's why buttons in Toolbars are flat even though the default style is raised.) Reference.

You need to "hijack" this style, instead of the default style:

<ToolBar.Resources>
  <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
    <Setter Property="Width" Value="100" />
  </Style>
</ToolBar.Resources>

Note the x:Key in the Style declaration.

score 2 · Answer 2 · answered Mar 09 '10 at 18:30

If you are adding hardcoded buttons to your toolbar, you can set ToolBar.ItemContainerStyle to a custom style to get the effect you want.

<ToolBar.ItemContainerStyle>
    <Style
        TargetType="Button">
        <Setter
            Property="Width"
            Value="21" />
        <Setter
            Property="Height"
            Value="21" />
    </Style>
</ToolBar.ItemContainerStyle>

If you are using ToolBar.ItemsSource you can instead use ToolBar.ItemTemplate to define a template for your toolbar data.

<ToolBar.ItemTemplate>
    <DataTemplate>
        <Button
            Width="21"
            Height="21"
            Content="{Binding}" />
    </DataTemplate>
</ToolBar.ItemTemplate>

Note that in some cases, both of these can be used at the same time for additional flexibility.

This applies not only to toolbar, but to all derivatives of ItemsControl.

Best of luck,

score 0 · Answer 3 · answered Apr 17 '20 at 12:44

As noted in the other answer the Toolbar will automatically apply its own styles to many/most typical controls added to it.

As an alternative to hijacking its style keys or applying your own styles to the controls manually, you can instead override its method which sets its internal styles in the first place. Simple example:

public class LessIsMoreToolbar : ToolBar
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        // Nada
    }
}

and then use <local:LessIsMoreToolbar> in your XAML instead of <Toolbar>.

Note that here PrepareContainerForItemOverride() specifically does NOT call base.PrepareContainerForItemOverride()`. This is what eliminates the setting of styles. You can view the base's version of this method yourself to verify this doesn't eliminate anything you need.

One caveat is that PrepareContainerForItemOverride is defined by ItemsControl, which is like a great-grandparent of Toolbar. Its version of this method kicks off some other Prepare... cases which you also should be careful won't break anything. You can't (or perhaps shouldn't) just call that version of the method directly.

But in the end if it works for you then this is a nice simple approach.

Toolbar button styles get ignored?

3 Answers3

Linked