如何在WPF中绘制网格

Question

我正在尝试创建一个用户控件来表示围棋棋盘，它基本上只是一组黑线和某些交叉点上的点的网格。

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

我还是WPF的新手，所以我真的不知道应该如何处理这个问题；我是否应该在每次控件渲染时手动绘制线条（如果是这样，如何实现？），还是有更好的方法？

- Will Vousden

---

最近我一直忙于其他事情，没有时间考虑这个问题（但感谢那些回答过我的人），等我找到最佳解决方案后，我会更新问题并接受一个答案。 - Will Vousden

Answer 1

你可以采用多种方式来实现这一点。

例如，一种方法是使用DrawingBrush来填充面板的背景。以下是一些DrawingBrush的示例：

_{(来源：microsoft.com)}

很可能您不必使用Grid。对于随机定位，Canvas 更适合。如果您不喜欢画笔，可以使用几何图形或形状来绘制线条或其他图形。我没有推荐DrawingVisuals，因为它们可能在一开始理解起来有点困难。

更新: 在CodeProject上找到了这篇文章: 在WPF中绘制棋盘游戏。也许您会发现它有用。

希望这能帮到您，

祝好，Anvaka。

- Anvaka

---

安瓦卡！ :) 很高兴你也搬到了这个美妙的地方。而且你的回答正好适用于解决我的问题。 - Vasyl Boroviak

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>

希望这能帮到你。

- Arsen Mkrtchyan

Answer 3

一些可能有用的随机想法：

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

不是真正的详细说明 - 但这就是我解决问题的方式

- Murph

Answer 4

我刚在我的博客上发布了这篇文章：

编辑： 将文件移动到我的Google驱动器 我认为它会对你有所帮助，这是你将得到的结果。你也可以在那里下载这个项目。

- Carlo

---

谢谢 - 这正是我所需要的！ - Will Vousden

已经过去了4年：博客文章未找到，屏幕录像也未找到。这就是为什么链接不应该成为问题的答案。至少要提供一些提示。 - Marc

我会在几个小时内修复。谢谢你让我知道。 - Carlo

博客文章仍未找到。 - IAbstract

@IAbstract 很抱歉让你等了这么久。项目现在已经到位了，希望不算太晚。https://drive.google.com/file/d/0B2TCEp0dTZ-odXAtUEh0Ry1WVEk/view?usp=sharing - Carlo