如何在 XAML 中将多个状态栏项与右侧对齐

本文关键字：状态栏 对齐 XAML | 更新日期: 2023-09-27 18:02:06

我的 C# 应用程序上有一只包含 4 个项目的StatusBar。我基本上想把最后两个StatusBarItems向右浮动。我已经尝试过将它们都设置为 HorizontalAlignment="Right" ，但这仅适用于最后一项。

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

我开始谷歌搜索，我想出了以下网址：

博客点

这真的是唯一的解决方案，还是有更简单的方法？

如何在 XAML 中将多个状态栏项与右侧对齐

您可以利用StatusBar的默认ItemsPanel是DockPanel的事实。 默认情况下，DockPanel将尝试用最后一项填充剩余空间。 因此，您添加到StatusBar的最后一StatusBarItem将填充空间的其余部分。 要利用这一点，您可以简单地像这样嵌套StatusBarItems：

<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>

请注意，第 3 StatusBarItem的HorizontalAlignment设置为 Right，以便其内容将右对齐。

当然，您不必StatusBarItems第 3 项和第 4 项，它们可以是其他控件，例如我上面演示的Buttons或ProgressBar。 StatusBarItem只是一个将物品包装在StatusBar中的容器，类似于ComboBoxItem将物品包装在ComboBox内的方式。

如果您不使用它们，StatusBar将自动将其内容包装在StatusBarItems中，因此第 1 项和第 2 项也很容易TextBoxes。 使用 StatusBarItems 的主要原因是您希望控制StatusBarItem的工作方式，例如在第 3 StatusBarItem中手动设置HorizontalAlignment，而不是依赖于默认值。

如前所述，默认容器为 DockPanel 。 因此，您可以根据需要设置任意数量的项目来DockPanel.Dock="Right"。 只需确保fill项是最后的。

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

将LastChildFill设置为false，然后像上面的解决方案一样使用DockPanel.Dock=Right，而不必担心最后一项会占用所有空间：

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

实现此目的的另一种有趣方法是将默认的StatusBar面板替换为 Grid ，这将使您对项目的布局有更多的控制。

<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>
相关文章：