<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfApplication2="clr-namespace:WpfApplication2"
        Title="MainWindow" Height="400" Width="400"
        Background="LightGray">
    <Window.Resources>
        
        <wpfApplication2:PositionToViewBox x:Key="PositionToViewBox"/>
        <wpfApplication2:MultiplyConverter x:Key="MultiplyConverter"/>


        <Style x:Key="BaseKnukkle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="White">
                            <Grid>
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                                           Foreground="White" FontSize="20">
                                    <TextBlock.Text>
                                        <MultiBinding Converter="{StaticResource MultiplyConverter}">
                                            <Binding Path="(Grid.Column)" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Button}}"/>
                                            <Binding Path="(Grid.Row)" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Button}}"/>
                                        </MultiBinding>
                                    </TextBlock.Text>
                                </TextBlock>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style TargetType="{x:Type Button}" x:Key="EmptyKnuckleStyle" BasedOn="{StaticResource BaseKnukkle}">
            <Setter Property="Background" Value="Transparent"/>
        </Style>
        
        <Style TargetType="{x:Type Button}" x:Key="KnuckleStyle" BasedOn="{StaticResource BaseKnukkle}">
            <EventSetter Event="Click" Handler="EventSetter_OnHandler"/>
            <Setter Property="Background">
                <Setter.Value>
                    <VisualBrush Visual="{Binding ElementName=ImageSource}">
                        <VisualBrush.Viewbox>
                            <MultiBinding Converter="{StaticResource PositionToViewBox}">
                                <Binding Path="(Grid.Column)" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Button}}"/>
                                <Binding Path="(Grid.Row)" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Button}}"/>
                            </MultiBinding>
                        </VisualBrush.Viewbox>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image x:Name="ImageSource" Source="z:\2.png"/>
        <Rectangle Fill="#9FFFFFFF"></Rectangle>
        <UniformGrid Columns="4" Rows="4" x:Name="KnuckleGrid">
            <!-- ReSharper disable Xaml.RedundantAttachedProperty -->
            <Button Grid.Column="0" Grid.Row="0" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="1" Grid.Row="0" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="2" Grid.Row="0" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="3" Grid.Row="0" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="0" Grid.Row="1" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="1" Grid.Row="1" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="2" Grid.Row="1" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="3" Grid.Row="1" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="1" Grid.Row="2" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="2" Grid.Row="2" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="3" Grid.Row="2" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="0" Grid.Row="3" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="1" Grid.Row="3" Style="{StaticResource KnuckleStyle}"/>
            <Button Grid.Column="2" Grid.Row="3" Style="{StaticResource KnuckleStyle}"/>
            <Button x:Name="Empty" Grid.Column="3" Grid.Row="3" Style="{StaticResource EmptyKnuckleStyle}"/>
            <!-- ReSharper restore Xaml.RedundantAttachedProperty -->
        </UniformGrid>
    </Grid>

</Window>

        private void Swap(UIElementCollection list, UIElement arg1, UIElement arg2)
        {
            var index1 = list.IndexOf(arg1);
            var index2 = list.IndexOf(arg2);
            list.Remove(arg1);
            list.Insert(index2, arg1);
            list.Remove(arg2);
            list.Insert(index1, arg2);
        }

        public UIElement GetKnukle(UIElementCollection list, int column, int row)
        {
            foreach (UIElement i in list)
            {
                var iRow = Grid.GetRow(i);
                var iColumn = Grid.GetColumn(i);
                if (row == iRow && column == iColumn) return i;
            }
            return null;
        }

        private UIElement GetEmpty(UIElementCollection list)
        {
            return GetKnukle(list, 3, 3);

        }

        private void EventSetter_OnHandler(object sender, RoutedEventArgs e)
        {
            var childrens = KnuckleGrid.Children;
            var knukle = (Button)sender;
            var empty = GetEmpty(childrens);

            var emptyIndex = childrens.IndexOf(empty);
            var knukleIdex = childrens.IndexOf(knukle);
            var delta = Math.Abs(emptyIndex - knukleIdex);


            if (delta == 1 || delta == 4)
            {
                Swap(childrens, knukle, empty);
            }
        }

    class MultiplyConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var column = (int) values[0];
            var row = (int)values[1];
            var result = (row*4 + column) + 1;
            return result.ToString(CultureInfo.InvariantCulture);
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    public class PositionToViewBox : IMultiValueConverter
    {
        private const int Size = 4;
        const double Step = 1.0 / Size;

        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values[0] == DependencyProperty.UnsetValue) return new Rect(0,0,0,0);
            var x = (int)values[0];
            var y = (int)values[1];
            return new Rect(x * Step, y * Step, Step, Step);
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }