如何在 XAML 中将多个 StatusBarItems 对齐到右侧？

Posted 2023-03-05

【中文标题】如何在 XAML 中将多个 StatusBarItems 对齐到右侧？

【英文标题】：How to align multiple StatusBarItems to the right side in XAML?

【发布时间】：2013-02-17 02:18:31

【问题描述】：

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

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

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

Blogspot

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

【参考方案1】：

您可以利用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>

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

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

StatusBar 将自动将其内容包装在 StatusBarItems 中，如果您不使用它们，因此项目 1 和 2 可以很容易地成为 TextBoxes。使用StatusBarItems 的主要原因是您想要控制StatusBarItem 的工作方式，例如在第三个StatusBarItem 中手动设置HorizontalAlignment，而不是依赖默认值。

【讨论】：

也试过了。不幸的是，这只会导致以下结果：abload.de/img/02032013291y0h.png

啊，抱歉，我现在在 Mac 上，所以无法测试。 StatusBar 上是否有一个HorizontalContentAlignment 可以设置为Stretch？我很快就会回到我的电脑上进行测试。

np。是的，有，但这也不是诀窍。

好的，既然我有时间在我的 PC 上进行测试，我已经更新了答案以完成我相信您正在寻找的内容。希望这能解决您的问题。

@BrianS 很棒的提示，但是当每个项目之间有分隔符时它不起作用:(

【参考方案2】：

如前所述，默认容器是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>

【讨论】：

您的解决方案看起来比接受的答案更干净

Protip：当你像这样停靠多个StatusBarItem 时，它们的顺序会相反（因为最后一个添加的会推动左边的其余部分）。为了以最少的努力避免这种情况，请将右侧停靠的StatusBarItem 的内容设置为水平方向的StackPanel。

【参考方案3】：

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

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

【参考方案4】：

实现此目的的另一种有趣方法是将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>