What is the best way to draw the grid for a Dots and Boxes game? (Silverlight)

I am trying to implement a Dots and Boxes style game in Silverlight for Windows Phone 7. What is the best way to draw the dot 开发者_运维问答and box grid so that I get notified when someone touches the space between two boxes? What XAML elements should I look at using?

---

A polygon shaped like the image below, with an overlaid line, would be your best bet.

You will set the polygon fill (shown in blue) to 1% alpha so that it is not visible, but is hit-testable (0% alpha turns off hit testing).

If you create one as a usercontrol, you can simply place them around your grid of dots with 90% rotation on the vertical ones:

The dots can be simple ellipses (turn off isHitTestVisible on these):

You can then simply turn on/off the visibility of the lines in the user controls (which are always present for hit-testing):

I suggest a canvas for the outer control to give you fine position adjustment from code, but a grid will work too if you get the margin offsets right.

Usercontrol XAML (created with 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>

Expose a "click" event on the User Control, that is called from a LeftMouseButtonDown event on the polygon and catch those click events in the high-level container:

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);
            }
        }
    }
}

You could generate one of these polygons by hand as the coordinates required are quite simple.