How to align multiple StatusBarItems to the right side in XAML?

As mentioned, the default container is DockPanel. As such, you can set as many items as needed to DockPanel.Dock="Right". Just be sure that the fill item is last.

<StatusBar>
    <StatusBarItem DockPanel.Dock="Right">
        <Slider Width="100" />
    </StatusBarItem>
    <StatusBarItem DockPanel.Dock="Right">
        <Label>Zoom: 100 %</Label>
    </StatusBarItem>
    <StatusBarItem>
        <TextBlock>Ready</TextBlock>
    </StatusBarItem>
</StatusBar>

You can also set LastChildFill to false and then use DockPanel.Dock=Right just like the solution above, without having to worry about the last item consuming all the space:

<StatusBar>
  <StatusBar.ItemsPanel>
    <ItemsPanelTemplate>
      <DockPanel LastChildFill="False" />
    </ItemsPanelTemplate>
  </StatusBar.ItemsPanel>
</StatusBar>

Another interesting way of achieving this is to replace default panel of StatusBar with Grid, which will give you far more control over the layout of items.

<StatusBar Height="30">
  <StatusBar.ItemsPanel>
    <ItemsPanelTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
      </Grid>
    </ItemsPanelTemplate>
  </StatusBar.ItemsPanel>

  <StatusBarItem Grid.Column="0">
    <TextBlock Text="{Binding ProgressMessage, Mode=OneWay}" />
  </StatusBarItem>

  <StatusBarItem Grid.Column="1">
    <ProgressBar Value="{Binding ProgressValue, Mode=OneWay}" Width="100" Height="10" />
  </StatusBarItem>

  <StatusBarItem Grid.Column="2">
    <Ellipse Width="12" Height="12" Stroke="Gray" Fill="Red" />
  </StatusBarItem>
</StatusBar>

You can take advantage of the fact that the default ItemsPanel for the StatusBar is the DockPanel. The DockPanel will, by default, try to fill the remaining space with the last item. So the last StatusBarItem you add to the StatusBar will fill the remainder of the space. To take advantage of this, you can simply nest StatusBarItems like this:

<StatusBar Name="statusBar1" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
  <StatusBarItem Content="Item 1"/>
  <StatusBarItem Content="Item 2" />
  <StatusBarItem HorizontalAlignment="Right">
    <StackPanel Orientation="Horizontal">
      <StatusBarItem  Content="Item 3"/>
      <StatusBarItem Content="Item 4"/>
      <ProgressBar Height="15" Width="50" IsIndeterminate="True" Margin="5,0"/>
    </StackPanel>
  </StatusBarItem>
</StatusBar>

Note that the HorizontalAlignment of the 3rd StatusBarItem is set to Right so that it's content will be right-aligned.

Of course, you don't have to have Item 3 and Item 4 be StatusBarItems, they could be other controls, such as Buttons or ProgressBar as I've demonstrated above as well. The StatusBarItem is simply a container that wraps items in a StatusBar, similar to how a ComboBoxItem wraps items inside of a ComboBox.

The StatusBar will wrap it's contents in StatusBarItems automatically, if you don't use them, so items 1 and 2 could just as easily be TextBoxes. The primary reason to use StatusBarItems is in the case where you want to control how the StatusBarItem works, like in the 3rd StatusBarItem where it sets the HorizontalAlignment manually, rather than rely on the default.

Tags:

C#

Xaml

Alignment