将边界拉伸到现有空间答案

【问题标题】：stretch border to existing space将边界拉伸到现有空间
【发布时间】：2017-12-30 01:20:30
【问题描述】：

我有这个：

<Border Background="Gray">
   <TextBlock x:Name="Text" 
              Text="{Binding Name}" 
              Margin="0, 5" 
              FontSize="16"/>
</Border>

看起来像这样：（其中三个）

我希望它看起来像这样：

（边框延伸到空间的尽头 + 对边框高度的一些控制。）

附注我不必使用边框，任何可以达到相同效果的东西都可以。

更新：这是 ListBoxItem 的 DataTemplate 的一部分。它是这样定义的：

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Border>
                <TextBlock x:Name="Text"
                       Text="{Binding Name}" 
                       Margin="0, 5" 
                       FontSize="16"/>
            </Border>
        </DataTemplate>
    </Setter.Value>
</Setter>

我尝试将 HorizontalAlignment 设置为“Stretch”，但没有成功。有什么想法吗？

【问题讨论】：

HorizontalAlignment="Stretch"（在边框上）
可以显示更多代码吗？
你在哪里放置边框？在 ListBox 的 ItemTemplate 中？
只是好奇为什么不为 TextBox 设置背景？
@FoggyFinder 因为也许我想要的不仅仅是文本。

标签： wpf xaml

【解决方案1】：

如果您的TextBlock 号码是固定的，StackPanel 将起作用：

<StackPanel Grid.Column="1">
    <StackPanel.Resources>
        <Style x:Key="style1" TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="0,5" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Background" Value="Gray" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Text 1" Style="{StaticResource style1}" />
    <TextBlock Text="Text 2" Style="{StaticResource style1}" />
    <TextBlock Text="Text 3" Style="{StaticResource style1}" />
</StackPanel>

或者如果TextBlock是基于某个数据源生成的，使用ItemsControl：

<ItemsControl ItemsSource="{Binding}" >
    <ItemsControl.Resources>
        <Style x:Key="style1" TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="0,5" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Background" Value="Gray" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock x:Name="Text" Style="{StaticResource style1}"  Text="{Binding Name}"  />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：

【解决方案2】：

最简单的方法是使用网格行。这是一个例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Text="text 1" Background="gray"/>
    <TextBlock Grid.Row="2" Text="text 2" Background="gray"/>
    <TextBlock Grid.Row="4" Text="text 3" Background="gray"/>

</Grid>

【讨论】：

为什么这比使用 StackPanel 更容易？
因为网格行会自动调整到窗口宽度，堆栈面板不会。
试试你会看到奇迹发生。
@Nawed Nabi Zada，是的，你是对的，在这种简单的情况下，垂直堆栈面板也可以工作。这都是个人喜好。由于方向方向的溢出，我倾向于不使用堆栈面板。

【解决方案3】：

试试这个...

<Border Background="Gray" HorizontalAlignment="Stretch">
 <TextBlock x:Name="Text" 
          HorizontalAlignment="Left"
          Text="{Binding Name}" 
          Margin="0, 5" 
          FontSize="16"/>
</Border>

【讨论】：

【解决方案4】：

最后我发现这是完成我想要的最简单的解决方案：

我创建了一个网格（一列一行）
我在里面创建了一个矩形（它会自动延伸到网格空间）
我创建了一个文本框（它会自动在矩形的顶部呈现）

它是这样的：

<Grid>
    <Rectangle x:Name="fillColor" Fill="..."/>
    <TextBox ... />
</Grid>

【讨论】：