Как лучше всего нарисовать сетку для игры Dots and Boxes? (Silverlight)

Question

Я пытаюсь реализовать игру в стиле Dots and Boxes в Silverlight для Windows Phone 7. Как лучше всего нарисовать сетку из точек и прямоугольников, чтобы получать уведомления, когда кто-то касается пространства между двумя полями?Какие элементы XAML я должен использовать?

Answer 1

Лучшим выбором будет полигон в форме, подобной изображению ниже, с наложенной линией.

Вы установите для заливки полигона (показано синим цветом) значение 1% альфа-канала, чтобы оно не было видно, но было проверено на попадание (0% альфа отключает проверку попадания).

Если вы создадите его в качестве пользовательского элемента управления, вы можете просто разместить его вокруг сетки точек с поворотом на 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 в многоугольнике, и перехватывайте эти события click в контейнере высокого уровня:

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

Вы можете сгенерировать один из этих многоугольников вручную, поскольку требуемые координаты довольно просты.