Problems with XAML grids

I'm trying to learn c# so I decided to follow a tutorial on youtube that teaches you how to create the snake game using xaml and c#.
this is the video, I stopped at 46 min
Everything ok until, after concluding the setup of the grid we runned the code. While is results are like this mine was like this . I'm pretty sure that I haven't missed anything but maybe anyone who actually knows xaml and c# would notice the diferences, both xaml and c# code for this page:

<Window x:Class="SnakeGame2.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:SnakeGame2"
        mc:Ignorable="d"
        Title="Snake" Height="500" Width="800"
        Background="{StaticResource BackgroundColor}"
        Foreground="{StaticResource TextColor}"
        FontFamily="{StaticResource MainFont}"
        WindowStartupLocation="CenterScreen"
        Icon="Assets/icon.ico">


    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="Scoretext"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="Score: 0"
                   FontSize="22"
                   Margin="10"/>
        <Border x:Name="GridBorder"
                Grid.Row="1"
                BorderBrush="{StaticResource GridLinecolor}"
                BorderThickness="1.5"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RenderOptions.EdgeMode="Aliased">
            <UniformGrid x:Name="GameGrid"
                         Width="400"
                         Height="400"
                         Background="{StaticResource GridBackgroundColor }"
                         SnapsToDevicePixels="True"
                         RenderOptions.BitmapScalingMode="HighQuality">
            </UniformGrid>
        </Border>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SnakeGame2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private readonly int rows = 10, cols = 15;
        private readonly Image[,] gridImages;
        public MainWindow()
        {
            InitializeComponent();
            gridImages = SetupGrid();
        }

        private Image[,] SetupGrid()
        {
            Image[,] images = new Image[rows, cols];
            GameGrid.Rows = rows;
            GameGrid.Columns = cols;    
            
            for (int r=0; r < rows; r++) 
            { 
                for(int c=0; c < cols; c++)
                {
                    Image image = new Image
                    {
                        Source = Images.Empty
                    };
                    images[r, c] = image;
                    GameGrid.Children.Add(image);
                }
            }
            return images;
        }
    }
}

Thank you for your time

You have reduced the row count to 10, in the video it has 15, but you have not altered the height of the grid, that is still 400px.

• Change the number of rows back to 15 and it should look like the example:

  private readonly int rows = 15, cols = 15;
  

Normally this just results in a rectangle for each cell with a height of 40px (40/10) and a width of ~27px (40/15), but in your case you are using an image to render the cell background and by default that image is maintaining it's aspect ratio to fit within the cell. If it helps, in this image, the green is the cell, but you can see your Empty.png image in the middle of that:

You could either set the image to Stretch, but that will not look the same uniform square shape cells as in the video. When using fixed images for rendering we would normally adjust the height of the grid if you are altering the number of the rows, basically we just need to maintain the aspect ratio of the cell images.

To fix this, try setting the images to stretch:

Image image = new Image
{
    Source = Images.Empty,
    Stretch = Stretch.Fill
};

Or change the height to 267px:

<UniformGrid x:Name="GameGrid"
             Width="400"
             Height="267"
             Background="{StaticResource GridBackgroundColor }"
             SnapsToDevicePixels="True"
             RenderOptions.BitmapScalingMode="HighQuality">
</UniformGrid>