WPF Toolbar Items HorizontalAligment="Right"

Question

Is it possible to make the elements within a WPF toolbar have a HorizontalAlignment of Right?

<ToolBar Height="38" VerticalAlignment="Top" Grid.Row="1">
    <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
    <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
    <ComboBox Width="120" HorizontalAlignment="Right"/>
</ToolBar>

I've tried adding the elements inside into a Grid and assigning the ColumnDefinitions to Left/Right as well. I have also tried a StackPanel. No matter what I try I can't seem to get the ComboBox to be "anchored" on the right side of the Toolbar.

UPDATE:

<DockPanel LastChildFill="True">

Doesn't work, It will not fill the ToolBar element like it would a normal element.

Answer 1

Further investigation showed that in order to do this I need to set the width of a Grid within the ToolBar, or as Chris Nicol said, a DockPanel within the ToolBar dynamically to that of the width of the Toolbar using RelativeSource.

However, that did not feel like a clean solution. It is quite complicated to get the Toolbar to update correctly on resizing. So instead I found somewhat of a hack that looks, and operates cleaner by adding an external Grid.

<Grid>
    <ToolBar Height="38" VerticalAlignment="Top" Grid.Row="1">
        <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
        <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
    </ToolBar>
    
    <ComboBox Margin="0,0,15,0" Width="120" HorizontalAlignment="Right" Grid.Row="1"/>
</Grid>

Since all of my elements are on a Grid, I can place my ComboBox on top of the ToolBar by assigning it's Grid.Row to the same row as the toolbar. After setting my Margins to pull the ComboBox over slightly as not to interfere with looks, it operates as needed with no bugs. Since the only other way I found to do this was setting a DockPanel/Grid's Width property dynamically, I actually feel like this is the cleaner more efficient way to do it.

Answer 2

I realize this is an old topic, but it still pops up when asking the question. This is how I handle this question:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="MenuRow"    Height="25"/>
        <RowDefinition x:Name="ToolbarRow" Height="25"/>
        <RowDefinition x:Name="CatalogRow" Height="*"/>
        <RowDefinition x:Name="RecipeRow"  Height="0.4*"/>
    </Grid.RowDefinitions>
    <ToolBar Grid.Row="1">
        <Button x:Name="tbFileOpen" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Load.png"/></Button>
        <Button x:Name="tbFileSave" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Save.png"/></Button>
        <Button x:Name="tbFileClear" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/New document.png"/></Button>
    </ToolBar>
    <ToolBar Grid.Row="1" HorizontalAlignment="Right">
        <Button x:Name="tbFileExit" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Exit.png"/></Button>
    </ToolBar>
</Grid>

Effectively: I create two toolbar objects and have them on the same Grid.row. The first one has default (left) alignment, the second one is right aligned. It seems to do the trick for me.

Answer 3

For anyone else looking for a solution, the following worked for me:

<ToolBar HorizontalAlignment="Stretch" ToolBarTray.IsLocked="True">
  <ToolBar.Resources>
    <Style TargetType="{x:Type DockPanel}">
      <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
</ToolBar.Resources>

I'm using .NET 4.6 and VS2015, but I believe this would work in previous versions too.