I am not experienced with WPF, so please forgive my lack of understanding.
EDIT: I'm working on a simplistic chess GUI, and the pieces move fine until one tries to move a piece that has already been moved. If we try to move the piece to a previously occupied square, the click event won't fire at all. If we try to move it to a previously untouched square, the event will fire, but the UI won't update.
Here's the XAML for the chessboard (borrowed from here: WPF controls needed to build chess application):
<Window x:Class="Client.MainWindow"
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"
xmlns:local="clr-namespace:Client"
xmlns:defaults="clr-namespace:butnotquite.Defaults;assembly=butnotquite"
mc:Ignorable="d"
Title="butnotquite Chess" Height="600" Width="600">
<Window.Resources>
<DrawingBrush x:Key="Checkerboard" Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Tan">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,2,2" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Brown">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,1,1" />
<RectangleGeometry Rect="1,1,1,1" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
<Style x:Key="PieceStyle" TargetType="{x:Type Image}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding PieceType}" Value="{x:Static defaults:PieceType.None}"/>
<Condition Binding="{Binding Color}" Value="{x:Static defaults:Color.None}"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Image.Source" Value="/Images/empty_square.png" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding PieceType}" Value="{x:Static defaults:PieceType.Pawn}"/>
<Condition Binding="{Binding Color}" Value="{x:Static defaults:Color.White}"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Image.Source" Value="/Images/white_pawn.png" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Viewbox>
<ItemsControl Name="ChessboardUI">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Width="8" Height="8" Background="{StaticResource Checkerboard}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Name="square" PreviewMouseDown="square_MouseLeftButtonDown" Width="1" Height="1" >
<Image Width="0.8" Height="0.8" Style="{StaticResource PieceStyle}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position.X}" />
<Setter Property="Canvas.Top" Value="{Binding Position.Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Viewbox>
</Window>
I've ommitted the multidata triggers for all pieces as they are all similar.
Here's the viewmodel. I'm using the MVVMLight library:
public class PieceViewModel : ViewModelBase
{
private PieceType pieceType;
private Color color;
private Point position;
public PieceType PieceType
{
get
{
return this.pieceType;
}
set
{
this.pieceType = value;
base.RaisePropertyChanged(() => this.PieceType);
}
}
public Color Color
{
get
{
return this.color;
}
set
{
this.color = value;
base.RaisePropertyChanged(() => this.Color);
}
}
public Point Position
{
get
{
return this.position;
}
set
{
this.position = value;
base.RaisePropertyChanged(() => this.Position);
}
}
}
Here's how I fill the ObservableCollection:
private void BindPieces()
{
this.chessboard = new Chessboard(false);
this.pieces = new ObservableCollection<PieceViewModel>();
for (int square = 0; square < this.chessboard.Board.Length; square++)
{
int x = square % 8;
int y = square / 8;
Point position = new Point(x, y);
PieceViewModel pieceModel = new PieceViewModel()
{
PieceType = this.chessboard.Board[square].OccupiedBy.Type,
Color = this.chessboard.Board[square].OccupiedBy.Color,
Position = position
};
this.pieces.Add(pieceModel);
}
this.ChessboardUI.ItemsSource = this.pieces;
}
More code can be found here: https://github.com/YouJinTou/butnotquite/tree/master/Client
Thanks for any and all help.
