Проще всего применить 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();
}
}
Результат:
Всё!
Path
.