Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

c#

alignment

xaml

I have a StatusBar with 4 items in it on my C# application. I basically want to float the last two StatusBarItems to the right. I've tried it by setting them both with HorizontalAlignment="Right", but that did only work for the last item.

<StatusBar Name="statusBar1" Height="23" HorizontalAlignment="Stretch"
        VerticalAlignment="Bottom">
    <StatusBarItem />
    <StatusBarItem />
    <StatusBarItem HorizontalAlignment="Right" />
    <StatusBarItem HorizontalAlignment="Right" />
</StatusBar>

I started googling and I came up with the following URL:

Blogspot

Is this really the only solution for this, or is there an easier way?

like image 442
Pascal Weber Avatar asked Mar 02 '13 17:03

Pascal Weber


1 Answers

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.

like image 136
Brian S Avatar answered Oct 26 '22 13:10

Brian S