Sudoku 2.0 – The Board
I have finally finished enough work that I can start this article series on Sudoku, again. I apologize for starting it so long ago and never finishing it. As I mentioned in my previous introductory post, I have learned a lot since the last time I approached this subject. I am not going to repeat myself by discussing what Sudoku is and how you play it again. I did this in my original article.
Ok, I lied. I will repeat myself briefly because it is important. The sudoku board is a 9 x 9 grid. Each cell in this grid holds a value as part of the puzzle. The cells are further grouped into what is called a Minigrid, of which there are 9. Each mini grid is a smaller 3 x 3 grid of cells (9 total).
Covering that was important because I used that knowledge to design the board itself. To keep things straight forward, I used UserControls as their really wasn’t a need to create a custom Control. The parent control is the Board. The XAML for the Board UserControl can be found below.
<UserControl
x:Class="Sudoku.Board"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Sudoku"
Width="400" Height="400">
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="MainBorder" Grid.ColumnSpan="3" Grid.RowSpan="3" Background="White" BorderBrush="Black" BorderThickness="1" Margin="-1" />
<!-- Miini Grids -->
<local:MiniGrid x:Name="C1R1" Grid.Column="0" Grid.Row="0" />
<local:MiniGrid x:Name="C2R1" Grid.Column="1" Grid.Row="0" />
<local:MiniGrid x:Name="C3R1" Grid.Column="2" Grid.Row="0" />
<local:MiniGrid x:Name="C1R2" Grid.Column="0" Grid.Row="1" />
<local:MiniGrid x:Name="C2R2" Grid.Column="1" Grid.Row="1" />
<local:MiniGrid x:Name="C3R2" Grid.Column="2" Grid.Row="1" />
<local:MiniGrid x:Name="C1R3" Grid.Column="0" Grid.Row="2" />
<local:MiniGrid x:Name="C2R3" Grid.Column="1" Grid.Row="2" />
<local:MiniGrid x:Name="C3R3" Grid.Column="2" Grid.Row="2" />
<!-- Highlighters -->
<Rectangle x:Name="MiniGridHighlighter" Grid.Column="0" Grid.Row="0" Fill="#FF848484" Opacity=".5" IsHitTestVisible="False" Visibility="Collapsed" />
</Grid>
</UserControl>
The Board itself is pretty simple. It mainly consists of a Grid control which has 3 columns and 3 rows. This grid uses a Border to draw a black line around the outside of the board itself. Each cell in the Grid contains a MiniGrid control. A MiniGrid is a user control that I created that represents, well, a mini grid on the board. Each MiniGrid is named after the cell that is in. For example, the MiniGrid that occupies the first cell on the board (column 1 and row 1) is named “C1R1″. The Rectangle, named MiniGridHighlighter, is currently a place holder. The Board doesn’t really use this yet. I created it because I figured I might need a way to highlight the entire minigrid when I start working on the user interaction and game play.
<UserControl>
x:Class="Sudoku.MiniGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Sudoku"
Height="Auto" Width="Auto">
<Grid x:Name="LayoutRoot">
<Border Grid.ColumnSpan="3" Grid.RowSpan="3" BorderBrush="Black" BorderThickness="1">
<!-- Cell Container -->
<Grid x:Name="CellLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Cells -->
<local:Cell x:Name="C1R1" Grid.Column="0" Grid.Row="0" />
<local:Cell x:Name="C2R1" Grid.Column="1" Grid.Row="0" />
<local:Cell x:Name="C3R1" Grid.Column="2" Grid.Row="0" />
<local:Cell x:Name="C1R2" Grid.Column="0" Grid.Row="1" />
<local:Cell x:Name="C2R2" Grid.Column="1" Grid.Row="1" />
<local:Cell x:Name="C3R2" Grid.Column="2" Grid.Row="1" />
<local:Cell x:Name="C1R3" Grid.Column="0" Grid.Row="2" />
<local:Cell x:Name="C2R3" Grid.Column="1" Grid.Row="2" />
<local:Cell x:Name="C3R3" Grid.Column="2" Grid.Row="2" />
<!-- Highlighters -->
<Rectangle x:Name="ColumnHighlighter" Grid.Column="0" Grid.RowSpan="3" Fill="#FF848484" Opacity=".5" IsHitTestVisible="False" Visibility="Collapsed" />
<Rectangle x:Name="RowHighlighter" Grid.ColumnSpan="3" Grid.Row="0" Fill="#FF848484" Opacity=".5" IsHitTestVisible="False" Visibility="Collapsed" />
</Grid>
</Border>
</Grid>
</UserControl>
The MinGrid is constructed similar to the Board. Everything is contained within a parent Grid control. This has a Border control and an inner Grid. The inner Grid control, as with the Board control, has 3 columns and 3 rows. This gives us nine cells total. Each of these cells contains a Cell control. Each Cell is named in the same manner as the MiniGrids were (as discussed above). The MiniGrid also has two highlighter Rectangle controls which we may use later. One is capable of highlighting a row while the other takes care of the column.
<UserControl> x:Class="Sudoku.Cell" xmlns">http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="Auto" Width="Auto"> <Grid x:Name="LayoutRoot"> <Border BorderBrush="Gray" BorderThickness="1" /> <TextBlock x:Name="ValueTextBlock" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24" /> </Grid> </UserControl>
Finally, above, we have the Cell itself. This control is very simple and is made up of a Grid that contains a Border and a TextBlock. The TextBlock is where the actually value for the cell will be displayed.
Sudoku Board
The three user controls, mentioned previously, make up the Sudoku puzzle board, which looks like the image shown above. At this point there is no interaction but we are ready to fill the board with the actual puzzle (which I will cover in the next article).
