在WPF中画一个十字

Question

我有一个WPF控件.

我需要在背景中有一个十字架,像这样:

在那之后,我将能够在我的"交叉"背景上添加其他控件:

我应该如何绘制十字架,知道当我重新控制控件时,十字架应该遵循它的大小？

Answer 1

快速而肮脏的方法是使用线条并将其坐标绑定到某个父容器的宽度和高度.像这样的东西:

<Grid Name="parent">
    <Line  X1="0" Y1="0" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="{Binding ElementName='parent', Path='ActualHeight'}" 
           Stroke="Black" StrokeThickness="4" />
    <Line  X1="0" Y1="{Binding ElementName='parent', Path='ActualHeight'}" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="0" Stroke="Black" StrokeThickness="4" />
</Grid>

使用网格作为父级意味着在行将显示在行顶部之后添加到网格中的任何其他子项:

<Grid Name="parent">
    <Line  X1="0" Y1="0" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="{Binding ElementName='parent', Path='ActualHeight'}" 
           Stroke="Black" StrokeThickness="4" />
    <Line  X1="0" Y1="{Binding ElementName='parent', Path='ActualHeight'}" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="0" Stroke="Black" StrokeThickness="4" />
    <Label Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center">My Label</Label>
</Grid>

Answer 2

您可以使用单个项目，而不是为布局引擎创建两个元素Path：

<Path Data="M0,0L16,16M16,0L0,16" Stroke="Black" />

这是一个 16x16“X”符号：

您可以在元素中指定不同的大小Data，或者ViewBox根据需要使用 a 将其缩放到其父级大小。

请注意，线条末端是方形的，并且稍微超出 16x16 方形：

如果您希望框的大小恰好为 16x16，您可以Width="16" Height="16"在 上进行设置Path，这会剪辑线端：

Answer 3

另一种解决方法是将所有内容放入Viewbox并使用Stretch="fill".它将在保持适当比例的同时为您重新调整尺寸.在这种情况下,您不需要使用数据绑定.

<Grid  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" >
    <Viewbox HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Stretch="Fill">
        <Grid>
            <Line  X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="1" />
            <Line  X1="0" Y1="100" X2="100" Y2="0" Stroke="Black" StrokeThickness="1" />
        </Grid>
    </Viewbox>
    <Label Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center">My Label</Label>
</Grid>