c# - 怎么画十字？

Question

我有一个 WPF 控件。

我需要在 wpf 控件中绘制类似下面的内容。
在调整控件大小时，十字应该跟随它的大小吗？我还必须输入如下字母。通过绑定(bind)到 viewmodel 属性，我应该能够以编程方式设置前景和背景。

Answer 1

如果您使用 Path，则十字架本身很简单。绘制线条/箭头。使用 ViewBox 缩放到容器大小:

<Viewbox>
    <Grid Width="100" Height="100">
        <TextBlock Text="N" HorizontalAlignment="Left" VerticalAlignment="Center" />
        <TextBlock Text="S" HorizontalAlignment="Right" VerticalAlignment="Center" />
        <TextBlock Text="E" VerticalAlignment="Top" HorizontalAlignment="Center" />
        <TextBlock Text="W" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        <Path Stroke="Black" StrokeThickness="1"
                Data="M 15,50 L 85,50 M 80,45 L 85,50 M 80 55 L 85,50"
                />
        <Path Stroke="Black" StrokeThickness="1"
                Data="M 50,15 L 50,85 M 45,80 L 50,85 M 55 80 L 50,85"
                />
    </Grid>
</Viewbox>

现在，您可以将以上内容包装在 UserControl 中.这已经具有 Foreground/Background 的属性，因此只需绑定(bind)到它们。在控件内部，使用 RelativeSource绑定(bind):

<UserControl x:Class="MyProject.Controls.Compass"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" 
          Background="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Background}">
        <Viewbox>
            <Grid Width="100" Height="100">
                <TextBlock Text="N" HorizontalAlignment="Left" VerticalAlignment="Center" 
                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" />
                <TextBlock Text="S" HorizontalAlignment="Right" VerticalAlignment="Center" 
                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" />
                <TextBlock Text="E" VerticalAlignment="Top" HorizontalAlignment="Center" 
                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" />
                <TextBlock Text="W" VerticalAlignment="Bottom" HorizontalAlignment="Center"
                           Foreground="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" />
                <Path Stroke="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" StrokeThickness="1"
                      Data="M 15,50 L 85,50 M 80,45 L 85,50 M 80 55 L 85,50" />
                <Path Stroke="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Foreground}" StrokeThickness="1"
                      Data="M 50,15 L 50,85 M 45,80 L 50,85 M 55 80 L 50,85" />
            </Grid>
        </Viewbox>
    </Grid>
</UserControl>

现在您可以像这样创建控件的实例(假设 View 模型具有 Brush 类型属性，名为“Foreground”和“Background”):

<controls:Compass Foreground="{Binding Foreground}" Background="{Binding Background}"/>