wpf - WPF 状态栏，拉伸文本块以占用尽可能多的空间

Question

我用 3 个 TextBlocks 创建了自己的简单状态栏控件。现在我希望第一个 Textblock 占用尽可能多的空间。我似乎没有完成..现在只需要显示文本所需的空间。

XAML：

  <StatusBar Background="{StaticResource GradientBrush}">
<StatusBar.ItemsPanel>
  <ItemsPanelTemplate>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
    </Grid>
  </ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem HorizontalAlignment="Left"
               HorizontalContentAlignment="Right">
  <Border BorderThickness="1"
          BorderBrush="Black"
          Padding="5 0 5 0"
          Background="White">
    <TextBlock Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             Foreground="{Binding TextColorMessage}"
             Background="White"
             />
  </Border>
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2"
               HorizontalAlignment="Right">
  <TextBlock Text="{Binding Path=DatabaseName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StatusBarItem>
<Separator Grid.Column="3" />
<StatusBarItem Grid.Column="4"
               HorizontalAlignment="Right">
  <TextBlock Text="{Binding Path=ComputerName}" />
</StatusBarItem>

Answer 1

嗯，这很简单：您设置了 StatusBarItem Horizo​​ntalAlignment="Left"，而它应该是“strech”，对于 Horizo​​ntalContentAlignment 也是如此。还建议在边框上设置 margin=0 。这就是我所做的，所以它对我有用：

<StatusBarItem HorizontalAlignment="Stretch"
               HorizontalContentAlignment="Stretch">
    <Border BorderThickness="1"
            BorderBrush="Black"
            Margin="0"
            Padding="5 0 5 0"
            Background="White">
        <TextBlock Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                   Foreground="{Binding TextColorMessage}"
                   Background="White"/>
    </Border>
</StatusBarItem>

如果这有帮助，请标记为答案

Answer 2

尝试将 StatusBarItem 的HorizontalAlignment和设置HorizontalContentAlignment为Stretch。

Answer 3

将 StatusBarItem 的 Horizo​​ntalContentAlignment 设置为 Stretch，将 TextBlock 的 TextAlignment 属性设置为 Right。（只有第一个 StatusBarItem 需要第二个设置，因为您似乎尝试将文本与其中的右侧对齐。）

Answer 4

StatusBar 只有一个 Horizo​​ntalAlignment=Right 项生效，因此您只能在想要的位置获得最后一项。您可以设置 statusBar 的 FlowDirection="RightToLeft" 并以相反的顺序添加项目。细节：右边放置的物品不需要StatusBarItem包围，但左边的需要拉伸。以下代码：

<StatusBar VerticalAlignment="Bottom" FlowDirection="RightToLeft"><!--flow right to left cause items right aligned-->
    <!--make item's flow back left to right, avoid display disorder-->
    <TextBlock x:Name="textBlock_status_R1" Text="111.147.168.20" Grid.Column="2" Margin="10,0" FlowDirection="LeftToRight"/>
    <Separator/>
    <TextBlock x:Name="textBlock_status_R2" Text="Working" Margin="10,0" FlowDirection="LeftToRight"/>
    <Separator/>
    <!--To fill rest space，need StatusBarItem packing and default HorizontalAlignment="Stretch"-->
    <StatusBarItem FlowDirection="LeftToRight">
        <TextBlock x:Name="textBlock_status_L1" Text="Information here."/>
    </StatusBarItem>
</StatusBar>