How to align multiple StatusBarItems to the right side in 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: http://kentb.blogspot.ch/2007/10/perfect-wpf-statusbar.html

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

回答1:

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.

回答2:

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>

回答3:

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>

回答4:

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>

来源：https://stackoverflow.com/questions/15177079/how-to-align-multiple-statusbaritems-to-the-right-side-in-xaml

标签

xaml

alignment