The following is adapted from a WPF implementation of the 2048 game. I used a UniformGrid
and filled it with Buttons
. The buttons were styled to appear as blank coloured tiles. A converter was used to convert the Button.Tag
property value to a Fill
colour so that the colour of the tile could be changed by simply changing the Tag
value.
public partial class MainWindow : Window
{
private readonly List<Button> tiles = new();
private Random random = new();
private int lastSelectedIndex;
public MainWindow()
{
InitializeComponent();
AddEmptyTilesToCollection();
lastSelectedIndex = 0;
}
private void AddEmptyTilesToCollection()
{
var style = (Style)FindResource("TileButton");
for (int id = 0; id < 16; id++)
{
var tile = new Button
{
Style = style,
Tag = 0
};
tile.Click += OnTileClick;
tiles.Add(tile);
Board.Children.Add(tile);
}
}
private void OnTileClick(object sender, RoutedEventArgs e)
{
int index = random.Next(tiles.Count);
var selectedTile = tiles[index];
tiles[lastSelectedIndex].Tag = 0;
selectedTile.Tag = 1;
lastSelectedIndex = index;
}
}
The
MainWindow.xaml
is simply
<Window x:Class="ColouredTiles.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:ColouredTiles"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<UniformGrid Margin="2" Grid.Row="0" Rows="4" Columns="4" Name="Board" Background="White" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}" >
</UniformGrid>
</Grid>
</Window>
The Buttons are styled in app.xaml
<Application x:Class="ColouredTiles.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ColouredTiles"
StartupUri="MainWindow.xaml">
<Application.Resources>
<local:IntToBrushConverter x:Key="intToBrushConverter"/>
<Style x:Key="TileButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid >
<Rectangle Fill="{TemplateBinding Tag,Converter={StaticResource intToBrushConverter}}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="6"
Height="100"
Width="100"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
The
int
to
Brush
converter is defined as
public class IntToBrushConverter : IValueConverter
{ public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value == null)
{
return new SolidColorBrush(); }
int index = (int)value;
return index > tileColours.Length - 1 ? new SolidColorBrush() : new SolidColorBrush(tileColours[index]);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
private readonly Color[] tileColours =
{
Colors.LightGray, Colors.Yellow, Colors.Red, Colors.Green, Colors.Orange, Colors.LightBlue, Colors.Magenta, Colors.LightPink, Colors.Goldenrod, Colors.Aquamarine, Colors.Blue, Colors.LightGreen, Colors.DarkRed, Colors.DarkBlue, Colors.DarkOrange, Colors.Black };
}
There is a large choice of colours as 2048 tiles are multi coloured but I am sure you can adapt that to your needs. As it stands clicking on the grid will place a random yellow tile. I hope this is useful