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.