Winning check and playagain c# tictactoe

Question

i have 3 problems : 1- The "letsPlay" button when pressed the first time gives me oImage wherever i press but afterwards works just fine. 2-The Winner() method isn't working ... it does nothing. 3-How to reset my grid background because i couldn't find any result about it.

Ok so here is the xaml code:

<StackPanel>
    <Grid VerticalAlignment="Top">
        <Button x:Name="letsPlay" Content="Let's Start!" Click="letsPlay_Click"/>
        <TextBlock x:Name="turnText" 
                   HorizontalAlignment="Left" 
                   Margin="302,10,0,0" 
                   TextWrapping="Wrap" 
                   Text="Turn = X" 
                   VerticalAlignment="Top"
                   Foreground="#FFFB0707" FontSize="20"/>
    </Grid>
    <Grid x:Name="theGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="cell9" Grid.Column="2" Grid.Row="2" Source="Images/Logo.png" Tapped="cell9_Tapped"/>
        <Image x:Name="cell8" Grid.Column="1" Grid.Row="2" Source="Images/Logo.png" Tapped="cell8_Tapped"/>
        <Image x:Name="cell7" Grid.Column="0" Grid.Row="2" Source="Images/Logo.png" Tapped="cell7_Tapped"/>
        <Image x:Name="cell4" Grid.Column="0" Grid.Row="1" Source="Images/Logo.png" Tapped="cell4_Tapped"/>
        <Image x:Name="cell1" Grid.Column="0" Grid.Row="0" Source="Images/Logo.png" Tapped="cell1_Tapped"/>
        <Image x:Name="cell5" Grid.Column="1" Grid.Row="1" Source="Images/Logo.png" Tapped="cell5_Tapped"/>
        <Image x:Name="cell2" Grid.Column="1" Grid.Row="0" Source="Images/Logo.png" Tapped="cell2_Tapped"/>
        <Image x:Name="cell6" Grid.Column="2" Grid.Row="1" Source="Images/Logo.png" Tapped="cell6_Tapped"/>
        <Image x:Name="cell3" Grid.Column="2" Grid.Row="0" Source="Images/Logo.png" Tapped="cell3_Tapped"/>
    </Grid>
</StackPanel>

Now for the code running behind :

bool turn = true;
    int moveCount1 = 0;
    BitmapImage xImage = new BitmapImage(new Uri("ms-appx:///Images/X.png"));
    BitmapImage oImage = new BitmapImage(new Uri("ms-appx:///Images/O.png"));
    BitmapImage nullImage = new BitmapImage(new Uri("ms-appx:///Images/Logo.png"));
    public MainPage()
    {
        this.InitializeComponent();
        this.NavigationCacheMode = NavigationCacheMode.Required;
        theGrid.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        turnText.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        this.Winner();
    }

The letsPlay button and the Reset() method:

    private void letsPlay_Click(object sender, RoutedEventArgs e)
        {
            Reset();
        }
void Reset()
        {
            theGrid.Visibility = Windows.UI.Xaml.Visibility.Visible;
            turnText.Visibility = Windows.UI.Xaml.Visibility.Visible;
            turn = true;
            turnText.Text = "Turn = X";
            moveCount1 = 0;
            cell1.Source = nullImage;
            cell1.Tapped += cell1_Tapped;
            cell2.Source = nullImage;
            cell2.Tapped += cell2_Tapped;
            cell3.Source = nullImage;
            cell3.Tapped += cell3_Tapped;
            cell4.Source = nullImage;
            cell4.Tapped += cell4_Tapped;
            cell5.Source = nullImage;
            cell5.Tapped += cell5_Tapped;
            cell6.Source = nullImage;
            cell6.Tapped += cell6_Tapped;
            cell7.Source = nullImage;
            cell7.Tapped += cell7_Tapped;
            cell8.Source = nullImage;
            cell8.Tapped += cell8_Tapped;
            cell9.Source = nullImage;
            cell9.Tapped += cell9_Tapped;
        }

This is a cell code example:

private void cell9_Tapped(object sender, TappedRoutedEventArgs e)
    {
        if (turn)
        {
            cell9.Source = xImage;
            turn = !turn;
            turnText.Text = "Turn = O";
        }
        else
        {
            cell9.Source = oImage;
            turn = !turn;
            turnText.Text = "Turn = X";
        }
        cell9.Tapped -= cell9_Tapped;
        moveCount1++;
    }

And Finally this is the Winner() method:

public void Winner()
    {
        if (
            (cell1.Source == xImage && cell2.Source == cell1.Source && cell3.Source == cell1.Source) ||
            (cell4.Source == xImage && cell5.Source == cell4.Source && cell6.Source == cell4.Source) ||
            (cell7.Source == xImage && cell8.Source == cell7.Source && cell9.Source == cell7.Source) ||
            (cell1.Source == xImage && cell5.Source == cell1.Source && cell9.Source == cell1.Source) ||
            (cell3.Source == xImage && cell5.Source == cell3.Source && cell7.Source == cell3.Source) ||
            (cell1.Source == xImage && cell4.Source == cell1.Source && cell7.Source == cell1.Source) ||
            (cell2.Source == xImage && cell5.Source == cell2.Source && cell8.Source == cell2.Source) ||
            (cell3.Source == xImage && cell6.Source == cell3.Source && cell9.Source == cell3.Source)
            )
        {
            ImageBrush xWins1 = new ImageBrush();
            xWins1.ImageSource = xImage;
            theGrid.Background = xWins1;
        }
        else if (
            (cell1.Source == oImage && cell2.Source == cell1.Source && cell3.Source == cell1.Source) ||
            (cell4.Source == oImage && cell5.Source == cell4.Source && cell6.Source == cell4.Source) ||
            (cell7.Source == oImage && cell8.Source == cell7.Source && cell9.Source == cell7.Source) ||
            (cell1.Source == oImage && cell5.Source == cell1.Source && cell9.Source == cell1.Source) ||
            (cell3.Source == oImage && cell5.Source == cell3.Source && cell7.Source == cell3.Source) ||
            (cell1.Source == oImage && cell4.Source == cell1.Source && cell7.Source == cell1.Source) ||
            (cell2.Source == oImage && cell5.Source == cell2.Source && cell8.Source == cell2.Source) ||
            (cell3.Source == oImage && cell6.Source == cell3.Source && cell9.Source == cell3.Source)
            )
        {
            ImageBrush oWins1 = new ImageBrush();
            oWins1.ImageSource = oImage;
            theGrid.Background = oWins1;
        }
        else if (moveCount1 == 9)
        {
            ImageBrush tie1 = new ImageBrush();
            tie1.ImageSource = nullImage;
            theGrid.Background = tie1;
        }
    }

I will appreciate any help you guys can give and if you require any more details just ask ahead.

Answer 1

First of all, the code will look much nicer if you'll access the cells as an array and implement checkHorizon(int column) / checkVerticals(int row) / checkCross(bool isRightToLeft) functions - one that recieves a number, and checks the selected horizontal/vertical/crossed line for a winner, and returns a value. Since i`m not sure if there's a simple way to access a gridView as an array in wpf, here's a link for a way that'd work from C# if you insert the 9 cells manually.

Your first problem is about a button OnClick event not firing on the first try. There's a lot of reasons this problem could happen - I remmber when I used to program for ASP.NET this sort of problems had to do with the page_load and ASP page life cycle. Take a look at the equivallent for wpf, and let me know if it solved your problem

Your second problem is pretty much similar straightforward. You want your Winner() function to change the images if I get this properly. I think the problem again has to do with the object lifecycle - The problem is the object is allready loaded to the page, so in order to view the changes you have to refresh the page after the changes.

And then there's the third problem, which is probably the solution for the first two. How to refresh a page you ask? I borrowed the syntax from Another source since I remmber the context from ASP. the solution is redirecting the user to your page, and then the grid will initially reload itself. You can do that like so:

const string pageName = "insert your page name here";
/*Insert some other code here*/
public static redirect(string directionName)
{
    Response.Redirect(directionName+".aspx");
}
/* Insert some more code here */

and whenever there's a change in the gridview you can simply use redirect(pageName);

Good luck, let me know if there are any further problems you couldn't solve about this :)