如何使线条占据其所在列的全宽（UWP）答案

【问题标题】：How to make a Line take full width of the column it is in (UWP)如何使线条占据其所在列的全宽（UWP）
【发布时间】：2020-09-01 05:10:29
【问题描述】：

我有这样一行

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Line  x:Name="DashedBorderElement" Stroke="Red"  Grid.Column="0" StrokeThickness="2"  />
</Grid>

在我给它X2="100" 之前，这条线不会可见。我不想给这条线任何特定的宽度，我希望这条线采用它所在的网格列的宽度。我怎样才能做到这一点？

【问题讨论】：

标签： wpf xaml uwp uwp-xaml

【解决方案1】：

将 X2 值绑定到父宽度

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Line  x:Name="DashedBorderElement" X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Stroke="Red" Grid.Column="0" StrokeThickness="2"  />
        </Grid>

编辑： 如果您想要网格列本身的确切宽度，请将其更改为：

<Line  x:Name="DashedBorderElement" X2="{Binding Path= ColumnDefinitions[0].ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Stroke="Red" Grid.Column="0" StrokeThickness="2" ClipToBounds="False" />

【讨论】：

【解决方案2】：

比绑定 Line 的 X2 属性更简单的是一个 Rectangle，当你不设置它的 Width 时它会自动拉伸：

<Rectangle Fill="Red" Height="2" VerticalAlignment="Top" />

【讨论】：