为Dots and Boxes游戏绘制网格的最佳方法是什么？ （Silverlight的）

Question

我正在尝试在Silverlight for Windows Phone 7中实现Dots and Boxes风格的游戏。绘制点和框网格的最佳方法是什么，以便当有人触摸两个框之间的空间时我会收到通知？我应该使用哪些XAML元素？

Answer 1

形状如下图所示的多边形，带有重叠线，是您最好的选择。

您将多边形填充（以蓝色显示）设置为1％alpha，以使其不可见，但是可以测试（0％alpha关闭命中测试）。

如果你创建一个作为用户控件，你可以简单地将它们放在你的网格点周围，在垂直方向上旋转90％：

点可以是简单的椭圆（在这些点上关闭isHitTestVisible）：

然后，您可以简单地打开/关闭用户控件中线条的可见性（这些线条始终用于命中测试）：

我建议使用外部控件的画布来为代码提供精细的位置调整，但是如果你正确获得边距偏移，网格也会起作用。

Usercontrol XAML（使用Blend创建）：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="DotsAndBoxes.Connector"
    d:DesignWidth="280" d:DesignHeight="80">
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Path Data="M27.706778,279.98367 L68.48111,239.30304 L266.99857,239.30304 L306.88052,278.89899 L266.99857,318.49493 L68.481102,318.49493 z" 
        Fill="#022E2EFB" 
        Stretch="Fill" 
        UseLayoutRounding="False" 
        IsHitTestVisible="True" 
        MouseLeftButtonDown="Path_MouseLeftButtonDown"/>
        <Path Data="M0,40 L40.218182,40 L280,40" Height="5" Stretch="Fill" StrokeThickness="5" UseLayoutRounding="False" VerticalAlignment="Center" Stroke="White" IsHitTestVisible="False"/>
    </Grid>
</UserControl>

在用户控件上公开一个“click”事件，该事件是从多边形上的LeftMouseButtonDown事件调用的，并捕获高级容器中的那些点击事件：

namespace DotsAndBoxes
{
    public partial class Connector : UserControl
    {
        public event EventHandler<System.Windows.Input.MouseButtonEventArgs> Clicked;

        public Connector()
        {
            // Required to initialize variables
            InitializeComponent();
        }

        private void Path_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (Clicked != null)
            {
                Clicked(this, e);
            }
        }
    }
}

您可以手动生成其中一个多边形，因为所需的坐标非常简单。