How to make toolbar buttons share same width?

Question

I have a toolbar

Toolbar add/edit/remove

Code:

<ToolBarTray>
    <ToolBar>
        <Button>
            <StackPanel>
                <Image/>
                <Label/>
            </StackPanel>
        </Button>
        <Button>
            <StackPanel>
                <Image/>
                <Label/>
            </StackPanel>
        </Button>
        <Button>
            <StackPanel>
                <Image/>
                <Label/>
            </StackPanel>
        </Button>
    </ToolBar>
</ToolBarTray>

On Image I only set the Source and on the Label I only set the Content.

However as the image shows, the buttons aren't sharing the same width. "Remove" button is wider than the others.

How can I make it so that all toolbar buttons will share the same width as the "Remove" button?

You can manually set the `Width` property, or `MinWidth` property if you prefer. By default, they are set to auto size to the content, which is why your Remote button is larger than the other two. — dub stylee, Feb 10 '15 at 00:19
I added the `Stretch` property to my answer below, it is possible to set that the same way as the `Width` as shown in the answer. :) — dub stylee, Feb 10 '15 at 01:02

score 3 · Accepted Answer · edited May 23 '17 at 12:12

One way you could set the Width of all of your buttons at the same time, is to use a Setter in your ToolBar.Resources, like so:

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

That way you don't need to manually set the width on each Button individually.

You could also use a Setter to set the Stretch property, like so:

      <Setter Property="Stretch" Value="None"/>

Edit:

Apparently, according to https://stackoverflow.com/a/2406213/3101082, you need to ensure that you are setting the Style using the x:Key="{x:Static ToolBar.ButtonStyleKey}" in order for it to apply to ToolBar buttons. I have updated my answer to reflect this.

Also, the `Width` may vary. I just used 80 as an example, but depending on the content of the buttons, you may need to use a larger value. — dub stylee, Feb 10 '15 at 00:34

score 1 · Answer 2 · answered Feb 10 '15 at 00:19

1

This will likely work, I haven't tested it but by specifying the width of the button and the image scaling, you should find it does the trick.

<Button Width="intValue">
   <StackPanel>
       <Image Source="yourImage" 
              RenderOptions.BitmapScalingMode="Fant" />
       <Label/>
   </StackPanel>
</Button>

answered Feb 10 '15 at 00:19

Daniel Lane

2,575
2
18
33

Almost, just instead of using RenderOptions you actually have to set `Stretch` to `None` :) – BrunoLM Feb 10 '15 at 00:34

How to make toolbar buttons share same width?

2 Answers2