Change button image on click in wpf c#

Question

I am creating a tic tac toe game for windows 8.1 store using xaml and c# and was trying to change the X and O button on click. Initially, I have a blank image set in the xaml for the button and in the button_click event, I am trying to change the image source. Here is a snippet of my code:

private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button btn = sender as Button;
        if (turn == 1)
        {
            BitmapImage bmp = new BitmapImage();
            Uri u = new Uri("ms-appx:/Images/O_logo.png", UriKind.RelativeOrAbsolute);
            bmp.UriSource = u;
            ImageBrush i = new ImageBrush();
            i.ImageSource = bmp;
            btn.Background = i;
        }
        else
        {
            BitmapImage bmp = new BitmapImage();
            Uri u = new Uri("ms-appx:/Images/X_logo.png", UriKind.RelativeOrAbsolute);
            bmp.UriSource = u;
            ImageBrush i = new ImageBrush();
            i.ImageSource = bmp;
            btn.Background = i;

        }
        btn.IsEnabled = false;
        //win(btn.Content.ToString());
        turn += 1;
        if (turn > 2)
            turn = 1;
    }

I have read a few articles online and some of them suggested that I set the build action of my image to Resource, however I do not have that as an option. I have PRIResource and Embedded Resource as an option. I have very limited knowledge of mvvm and triggers and hence would like to solve the problem using wpf itself and not in xaml.

I am using VS Studio Professional 2013

Answer 1

Background is not displayed when the button is disabled. You should rather have an Image as the button content:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button btn = sender as Button;
    if (turn == 1)
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:/Images/O_logo.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        // NOTE: change starts here
        Image i = new Image();
        i.Source = bmp;
        btn.Content = i;
    }
    else
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:/Images/X_logo.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        // NOTE: change starts here
        Image i = new Image();
        i.Source = bmp;
        btn.Content = i;

    }
    btn.IsEnabled = false;
    //win(btn.Content.ToString());
    turn += 1;
    if (turn > 2)
        turn = 1;
}

I would also strongly suggest you learn and start using XAML and binding instead of avoiding it. You're actually "fighting" against WPF the way you are using it and making it much harder for yourself. You might find it superior to Windows Forms if you use it as intended.

Answer 2

I have done something very similar in WPF, not tic tac toe, but having multiple data grids, each with a different background occupying the exact same position, and enabling/disabling then with a button. I'd write some code down, but I don't know wpf off the top of my head like I do winforms, and they are very different (Main difference is wpf is crap in comparison).

But something like:

button1_click(object sender, EventArgs e)
{
    if (turn == 1)
    {
        gridX.Visibility = visible;
    }
    else
    {
        gridO.Visibility = visible;

    }
    button1.Visibility = hidden;
}

Then just put the images inside the grids, or labels, or w/e