Slide Puzzle game in WPF

This article is about a simple 9 piece puzzle game using ImageBrush. In the puzzle one square is blank, and the image portions in the other 8 squares were randomly scattered.

You had to try and recreate the whole image, by sliding the image portion squares into the blank space, and repeating this until you had the whole image again. Lets see the code snippets for the puzzle:

Code Sample

<Window x:Class="SlideGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <DockPanel LastChildFill="True">
         <Button x:Name="btnPickImage" Content="Pick Image" Click="btnPickImage_Click" DockPanel.Dock="Top"/>
        <!-- Puzzle -->   
        <Grid x:Name="gridMain">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        </Grid>
    </DockPanel>
</Window>

Puzzle Output

Here we solve the above puzzle and the recreated picture look like as:

I hope you will enjoy this.