Как нарисовать сетку в WPF

Question

Я пытаюсь создать пользовательский элемент управления в WPF для представления доски Го , которая, по сути, представляет собой просто сетку черных линий с точками на некоторых пересечениях.

В настоящее время я использую элемент управления Grid для управления размещением камней, но одна из трудностей заключается в том, что камни размещаются на пересечениях линий сетки, а не между ними, поэтому, если я хочу нарисовать линии им нужно пройти через центры ячеек сетки.

Я все еще довольно новичок в WPF, поэтому я не совсем уверен, как мне следует подходить к этому; я должен вручную рисовать линии каждый раз, когда элемент управления рендерится (если да, как?), или есть лучший способ?

Answer 1

Вы можете подойти к этому несколькими способами.

Например.Одним из способов является использование DrawingBrush для заполнения фона панели.Вот несколько примеров DrawingBrush:

_{(источник: microsoft.com )}

Большинствоскорее всего, вам не нужно использовать Grid.Для случайного позиционирования Canvas подходит лучше.Если вам не нравятся кисти, вы можете использовать Geometries или Shapes , чтобы рисовать линии или другие фигуры.Я не отсылаю вас к DrawingVisuals , потому что они могут быть немного сложнее понять с самого начала.

Обновлено : нашел эту статью в CodeProject: НарисуйтеНастольная игра в WPF .Может быть, вы найдете это полезным.

Надеюсь, это поможет,

Приветствия, Anvaka.

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

Я только что добавил этот пост в свой блог:

EDIT: Переместил файл на мой гугл диск

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