如何在 WPF 中绘制网格

Question

我正在尝试在 WPF 中创建一个用户控件来表示 Go board，它本质上只是一个黑线网格，在某些交叉点上带有点。

目前我正在使用网格控件来处理石头的放置，但其中一个困难是石头被放置在网格线的交叉点而不是它们之间，所以如果我想画线，它们需要穿过网格单元的中心。

我对 WPF 还是很陌生，所以我不确定我应该如何处理这个问题；每次控件呈现时我应该手动绘制线条（如果是，如何？），还是有更好的方法？

Answer 1

您可以通过多种方式解决此问题。

例如。一种方法是使用DrawingBrush 填充Panel 的背景。以下是一些绘图笔示例：

_{（来源：microsoft.com）}

您很可能不必使用 Grid。对于随机定位Canvas 更适合。如果你不喜欢画笔，可以使用Geometries 或Shapes 来绘制线条或其他图形。我没有将您推荐给DrawingVisuals，因为从一开始他们可能更难理解。

更新：在 CodeProject 上找到这篇文章：Draw a Boardgame in WPF。也许你会发现它很有用。

希望这会有所帮助，

干杯，安瓦卡。

Answer 2

前段时间我创建了棋盘，我创建了一个 ItemsControl，其中的每个元素也是 ItemsControl，带有小矩形模板。这是我的代码

<UserControl x:Class="Checker.Controls.Board"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:models="clr-namespace:Checker.Models"
    xmlns:usercontrols="clr-namespace:Checker.Controls"
    xmlns:converters="clr-namespace:Checker.Converters">
    <UserControl.Resources>
        <models:BoardModel x:Key="boardModel"/>
        <converters:BoolToBorderColorConverter x:Key="boolToBorderColorConverter"/>
        <DataTemplate DataType="{x:Type models:Figure}">
            <usercontrols:FigureControl/>
        </DataTemplate>
    </UserControl.Resources>
    <Border>
        <ItemsControl ItemsSource="{Binding Source={StaticResource boardModel}, Path=BoardItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}" MouseDown="ItemsControl_MouseDown">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{Binding Path='IsFirstColor', Converter={StaticResource boolToBorderColorConverter}}" BorderBrush="Black" BorderThickness="1" Width="50" Height="50" MouseDown="ItemsControl_MouseDown">
                                    <ContentPresenter Content="{Binding FigureOnBoard}">

                                    </ContentPresenter>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</UserControl>

希望对你有帮助

Answer 3

可能有帮助的随机想法：

1. 使用网格 - 它在那里，它应该可以很好地定位东西
2. 网格“单元格”内容基本上是一个三态的东西，没有任何东西的网格线，顶部有白色石头的网格线，顶部有黑色石头的网格线 - 这应该是一个可重复使用的 WPF标记 - 可能是用户控件，也可能是其他东西（我对 WPF 还是太陌生了）。我很想将此绑定到您的数据。
3. 您可以将行为附加到单元格内容上，以便在单击时和其他内容

不是很详细的方法——但这就是我解决问题的方式

Answer 4

我刚刚在我的博客中添加了这篇文章：

编辑： 将文件移至my Google drive

我认为它会帮助你，this is 你会得到的结果。你也可以在那里下载项目。