19

Вопрос. Как можно реализовать визуализацию гексагональной сетки на WPF, при том что каждая клеточка этой сетки является отдельным объектом, допустим может иметь другой цвет.

На ум приходят только канвасы. Описать поле на котором будут закрепляться по координатам ячейки. Как нарисовать саму ячейку даже не знаю.

введите сюда описание изображения

6
  • Можно разными методами, расскажите, какие операции вы вам будут необходимы? От этого зависит правильная абстракция.
    – VladD
    Commented 26 февр. 2017 в 14:32
  • А рисовать проще всего через Path.
    – VladD
    Commented 26 февр. 2017 в 14:33
  • @VladD по сути я буду управлять моделями в связке как графом. от самой визуализации мне необходимо только представление ну и изменение цвета допустим. также интересно было бы скалировать. В целом просто визуализация с возможностью смены цвета. Path смотрел, да подходит. Commented 26 февр. 2017 в 14:41
  • @ParanoidPanda: А чем управляется количество ячеек? И как задаётся цвет конкретной ячейки? И да, как задаются координаты?
    – VladD
    Commented 26 февр. 2017 в 15:20
  • @VladD допустим я ввожу 10х10 - у меня строится поле 10 на 10. я могу кликать. клетка на которую я кликнул становится зеленой, а клетки вокруг неё - темно зелеными. допустим так. Commented 26 февр. 2017 в 16:19

1 ответ 1

27

Проще всего применить ItemsControl/Canvas, и задавать форму через Path.

Я взял за основу вот этот код: Игра на WPF, переносим код WinForms в MVVM.

Для начала, VM-часть. Базовый класс VM стандартный:

class VM : INotifyPropertyChanged
{
    protected bool Set<T>(ref T field, T value, [CallerMemberName]string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value))
            return false;

        field = value;
        NotifyPropertyChanged(propertyName);
        return true;
    }

    protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    public event PropertyChangedEventHandler PropertyChanged;
}

Несколько вспомогательных структур:

struct FieldSize
{
    public int Width { get; }
    public int Height { get; }
    public FieldSize(int w, int h) { Width = w; Height = h; }
}

struct FieldPosition
{
    public int X { get; }
    public int Y { get; }
    public FieldPosition(int x, int y) { X = x; Y = y; }
}

Они представляют собой, понятно, размер поля и позицию на поле.

Теперь VM одной клетки. Тут всё очевидно:

class CellVM : VM
{
    public CellVM(int row, int column)
    {
        Position = new FieldPosition(row, column);
        Activate = new RelayCommand(OnActivate);
    }

    public FieldPosition Position { get; }

    public ICommand Activate { get; }

    bool isActive = false;
    public bool IsActive
    {
        get { return isActive; }
        private set { Set(ref isActive, value); }
    }

    void OnActivate()
    {
        IsActive = !IsActive;
    }
}

Единственное поле, которое может меняться — IsActive, поэтому его изменение отправляет NotifyPropertyChanged. Команда Activate будет вызываться на клике.

Теперь всё поле. На изменении размера поля генерируем клетки. Покамест клетки представлены в виде списка, если вам они нужны как двумерный массив, добавьте сохранение в массив в GenerateCells.

class BoardVM : VM
{
    FieldSize fieldSize;
    public FieldSize FieldSize
    {
        get { return fieldSize; }
        set { if (Set(ref fieldSize, value)) GenerateCells(); }
    }

    IEnumerable<CellVM> cells;
    public IEnumerable<CellVM> Cells
    {
        get { return cells; }
        private set { Set(ref cells, value); }
    }

    void GenerateCells()
    {
        var list = new List<CellVM>(FieldSize.Width * FieldSize.Height);
        for (int j = 0; j < FieldSize.Height; j++)
            for (int i = 0; i < FieldSize.Width; i++)
                list.Add(new CellVM(i, j));
        Cells = list;
    }
}

С VM-частью всё, обратимся к View. Тут будут несколько трюков.

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

class FieldPositionToCoordinateXConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        FieldPosition position = (FieldPosition)value;
        double cellSize = (double)parameter;
        if (position.Y % 2 == 0)
            return position.X * cellSize;
        else
            return (position.X + 0.5) * cellSize;
    }

    public object ConvertBack(object value, Type targetType, object parameter,
                              CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

class FieldPositionToCoordinateYConverter : IValueConverter
{
    static double diag = Math.Sqrt(3) / 2;
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
        FieldPosition position = (FieldPosition)value;
        double cellSize = (double)parameter;
        return position.Y * cellSize * diag;
    }

    public object ConvertBack(object value, Type targetType, object parameter,
                              CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Теперь XAML. В ресурсы окна подключим размер клетки и конвертеры:

<Window.Resources>
    <sys:Double x:Key="CellSize">25</sys:Double>
    <view:FieldPositionToCoordinateXConverter x:Key="XConv"/>
    <view:FieldPositionToCoordinateYConverter x:Key="YConv"/>
</Window.Resources>

Далее, сам контент. Я не сделал автоподстройку размеров окна, для этого понадобится ещё конвертер.

Клетки подключаем из коллекции через ItemsControl:

<ItemsControl ItemsSource="{Binding Cells}">

Поскольку мы будем расставлять координаты «вручную», нам понадобится Canvas в качестве носителя:

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

Теперь, одна клетка.

    <ItemsControl.ItemTemplate>
        <DataTemplate>

Положим её в квадратный Grid нужного размера:

            <Grid Width="{StaticResource CellSize}" Height="{StaticResource CellSize}">

Внутреннюю часть зададим через Path, вычислив координаты как здесь:

                <Path Data="M -1,-1
                            M 0,-1
                            L 0.86602540378443864676372317075294,-0.5
                            L 0.86602540378443864676372317075294,0.5
                            L 0,1
                            L -0.86602540378443864676372317075294,0.5
                            L -0.86602540378443864676372317075294,-0.5
                            L 0,-1
                            M 1,1"
                      Stretch="Uniform"
                      Stroke="Black"
                      StrokeThickness="0.5">

Далее, смена цвета в зависимости от значения IsActive. Писать ещё один конвертер некрасиво, воспользуемся триггером. DataTrigger доступен только в стиле, так что установкой фона займётся стиль:

                    <Path.Style>
                        <Style TargetType="Path">
                            <Setter Property="Fill" Value="LightGreen"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsActive}" Value="True">
                                    <Setter Property="Fill" Value="DarkGreen"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Path.Style>

Теперь, нам нужно организовать клик. Поскольку Path сам по себе не умеет такого, есть три пути: либо воспользоваться вместо него стилизованным Button'ом (в котором положить тот же Path в ControlTemplate), либо определить InputBinding, либо подключить System.Windows.Interactivity.dll (из Expression Blend SDK, устанавливаемого через Visual Studio Installer, или из nuget System.Windows.Interactivity.WPF), и навесить команду на событие от мыши. Проще всего второй путь (его подсказал @АндрейNOP):

                    <Path.InputBindings>
                        <MouseBinding Gesture="LeftClick" Command="{Binding Activate}"/>
                    </Path.InputBindings>

Хотя я пошёл третьим путём (i: — префикс, определённый как xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity").

                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonUp">
                            <i:InvokeCommandAction Command="{Binding Activate}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>

С клеткой всё.

                </Path>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

Что ещё нужно? Нужно разместить клетку по нужным координатам. Сам Grid в DataTemplate упаковывается в контейнер, так что выставлять для него координаты бесполезно. Поэтому надо двигать сам контейнер. Это делается так:

    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Left"
                    Value="{Binding Position,
                                    Converter={StaticResource XConv},
                                    ConverterParameter={StaticResource CellSize}}"/>
            <Setter Property="Canvas.Top"
                    Value="{Binding Position,
                                    Converter={StaticResource YConv},
                                    ConverterParameter={StaticResource CellSize}}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>

Приведу ещё раз полный код окна:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="HexGrid.View.MainWindow"
    xmlns:view="clr-namespace:HexGrid.View"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Test" Height="290" Width="300">
    <Window.Resources>
        <sys:Double x:Key="CellSize">25</sys:Double>
        <view:FieldPositionToCoordinateXConverter x:Key="XConv"/>
        <view:FieldPositionToCoordinateYConverter x:Key="YConv"/>
    </Window.Resources>
    <Grid Margin="10">
        <ItemsControl ItemsSource="{Binding Cells}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Width="{StaticResource CellSize}"
                          Height="{StaticResource CellSize}">
                        <Path Data="M -1,-1
                                    M 0,-1
                                    L 0.86602540378443864676372317075294,-0.5
                                    L 0.86602540378443864676372317075294,0.5
                                    L 0,1
                                    L -0.86602540378443864676372317075294,0.5
                                    L -0.86602540378443864676372317075294,-0.5
                                    L 0,-1
                                    M 1,1"
                              Stretch="Uniform"
                              Stroke="Black"
                              StrokeThickness="0.5">
                            <Path.Style>
                                <Style TargetType="Path">
                                    <Setter Property="Fill" Value="LightGreen"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsActive}" Value="True">
                                            <Setter Property="Fill" Value="DarkGreen"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Path.Style>
                            <Path.InputBindings>
                                <MouseBinding Gesture="LeftClick" Command="{Binding Activate}"/>
                            </Path.InputBindings>
                        </Path>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left"
                            Value="{Binding Position,
                                            Converter={StaticResource XConv},
                                            ConverterParameter={StaticResource CellSize}}"/>
                    <Setter Property="Canvas.Top"
                            Value="{Binding Position,
                                            Converter={StaticResource YConv},
                                            ConverterParameter={StaticResource CellSize}}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

Ну и стандартный App.xaml/App.xaml.cs:

<Application x:Class="HexGrid.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Application>
public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        new MainWindow()
        {
            DataContext = new BoardVM()
            {
                FieldSize = new FieldSize(10, 10)
            }
        }.Show();
    }
}

Результат:

анимашка

Всё!

12
  • 1
    Как всегда ответ достойный отдельной статьи. Commented 27 февр. 2017 в 6:56
  • @ParanoidPanda: Спасибо! Вы меня захваливаете.
    – VladD
    Commented 27 февр. 2017 в 9:53
  • @VladD, а расстояние между гексами за счет чего можно убрать? если можно
    – Grundy
    Commented 27 февр. 2017 в 10:06
  • 1
    @Grundy: Неплохо смотрится с CellSize=25, CellSizeX=35 и CellSizeY=27
    – VladD
    Commented 27 февр. 2017 в 12:26
  • 1
    Помимо Interaction.Triggers здесь отлично подойдет InputBindings Commented 25 мар. 2018 в 14:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.