如何绘制水平线并居中？

Question

这是我到目前为止所拥有的。

手机垂直时：

手机水平时：

这是我的XAML标记：

<StackPanel Margin="19 0 19 5">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="{Binding ImageUrl}" 
                Stretch="Uniform"
                Margin="0 10 0 10"/>

        <StackPanel Grid.Column="1" Margin="14 0 0 0">
            <TextBlock Text="{Binding Title}" 
                        FontSize="30" />
            <TextBlock Text="{Binding ReleaseDate}" 
                        FontSize="22"
                        Foreground="#E0A655"/>
            <TextBlock Text="{Binding Synopsis}"
                        FontSize="22"
                        TextWrapping="Wrap"/>
        </StackPanel>                                                        
    </Grid>
    <Line StrokeThickness="4" Stroke="#434343" X1="0" X2="350"
        Y1="13" Y2="13" />
</StackPanel>

我想要一条与当前宽度相同的线，但是居中。但是当手机处于水平状态时，线路应该更大一些，以满足更广阔的可用空间。

这可能吗？

Answer 1

您可以使用Stretch使Line占据容器的整个宽度。您还可以使用左/右边距在每侧添加一点空间：

<Line X1="0" X2="1" Stretch="Fill" Margin="20,0,20,0"/>

Answer 2

您可以使用保证金来调整内容的大小而不是位置。

如果使用Line无法实现（我还没有真正检查过），您可能会尝试使用1像素高（或4个）矩形。

编辑：使用代码段：

<Line HorizontalAlignment="Stretch" Margin="50, 10, 50, 10" Stroke="Black" StrokeThickness="4" />

Answer 3

在第一个视图中可能有点令人惊讶：线条（以及其他形状 - 矩形，椭圆......）是FrameworkElements。您可以使用与TextBlock相同的方式处理它们，即设置尺寸，对齐，边距，不透明度，变换等。您甚至可以设置动画/绑定形状定义属性（例如Line.X1），因为它们都是DependencyProperties。