7

我有一个 WPF 控件。

我需要在背景中有一个十字架，像这样：
在此处输入图像描述

之后，我可以在我的“交叉”背景上添加其他控件： 在此处输入图像描述

我应该如何绘制十字，知道当我调整控件大小时，十字应该跟随它的大小？

4

5 回答 5

14

快速而肮脏的方法是使用线条并将它们的坐标绑定到某些父容器的宽度和高度。像这样的东西：

<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>
于 2012-04-13T17:39:47.873 回答
8

解决此问题的另一种方法是将所有内容放入 aViewbox并使用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>
于 2012-04-13T17:49:47.757 回答
5

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

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

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

在此处输入图像描述

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

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

在此处输入图像描述

如果您希望该框正好是 16x16，您可以Width="16" Height="16"在 上设置Path，它会剪断行尾：

在此处输入图像描述

于 2020-10-15T23:36:38.707 回答
3

Matt Burland 的回答使我的应用程序不断闪烁（因为我想对“父级”的引用调整了它的大小......然后调整了线条的大小，等等......）

所以我使用了 Stretch=Fill 并抑制了对“父级”的引用。现在工作得很好。

<Line x:Name="Line1" Visibility="Hidden" Stroke="Red" StrokeThickness="2" Stretch="Fill"
                X1="0" Y1="0" X2="1" Y2="1" />
<Line x:Name="Line2" Visibility="Hidden" Stroke="Red" StrokeThickness="2" Stretch="Fill"
                X1="0" Y1="1" X2="1" Y2="0" />

这是此解决方案和此解决方案的混合

于 2015-07-11T15:04:36.590 回答
1 
    <Line  X1="10" Y1="10" X2="50" Y2="50" Stroke="Black" StrokeThickness="4" />
    <Line  X1="10" Y1="50" X2="50" Y2="10" Stroke="Black" StrokeThickness="4" />

如果您想知道 x 和 y 值来自哪里，只需画出笛卡尔坐标并插入即可

line 1 - point 1:(10,10), point 2:(50,50)
line 2 - point 1:(10,50), point 2:(50,10)

参考形状 http://msdn.microsoft.com/en-us/library/ms747393.aspx

将标签放在 XAML 中 Line 元素之后/下方，这将使其绘制在线条上

于 2012-04-13T17:25:54.347 回答