ARTICLE

TIC TAC TOE Game in WPF using Expression Blend

Posted by Nipun Tomar in Articles | Expression Studio on January 25, 2011

Tags: Expression Blend, TIC TAC TOE Game, TIC TAC TOE Game in WPF, WPF

In this Article I am going to create a game TIC TAC TOE in Windows Presentation Foundation (WPF) with the help of Microsoft Expression Blend. 2 Players can play this game at a time.

Tweet
4563
0

Reader Level: Beginner

Download Files:

TicTacToe.zip

In this Article I am going to create a game TIC TAC TOE in Windows Presentation Foundation (WPF) with the help of Microsoft Expression Blend. 2 Players can play this game at a time. Here are some images of our running application:

First of all we will start our application with the design session.

Select a New project from the file menu and name it as "TICTACTOE". Then you will get a window like this:
Now Select the layout from the object and timeline window and change the background using gradient brush from the properties window according to your choice.

As my window layout is as under:
Select the Rectangle tool from the tool box. Draw out a rectangle in the window and also change its background color to "#FEE7DAAC" and set stroke as No Brush so that your window looks as follows:
Again select a Wrap panel tool from the toolbox and draw it on a rectangle.
In this step we will draw a button in a wrap panel and rename it to Button1, set its margin="0" and then change its background with the same process that we used for the rectangle. In the common properties of the properties window change the content of the button to "" (blank).
Copy-paste 8 new buttons by right clicking on Button1inObjects and Timeline, set the margin="0" for all and rename them as "Button2, Button3, 4, 5, 6, 7, 8â€¦â€¦â€¦.â€¦â€¦Button9".
Draw one more button and rename it as resetbutton and in its content type "RESET"
Select a Label from the toolbox window, place it on top in the center of the window, rename it as Title and write "Tic Tac Toe" in the content of the common property; also change its foreground and background colors to whatever you choose.
Similarly draw labels for (Players turn, X, O, Score , 0 etc.) as shown in the Image:
Our Design is Ready now so let's type some code to make it a running Game.

MainWindow.xaml.cs

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.Shapes;

namespace TicTacToe
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow
    {
        int turn;
        int i, j;

        public MainWindow()
            : base()
        {
            this.InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            turn = 1;
        }

        private void win(string btnContent)
        {
            if ((Button1.Content == btnContent & Button2.Content == btnContent &
                 Button3.Content == btnContent)
               | (Button1.Content == btnContent & Button4.Content == btnContent &
                 Button7.Content == btnContent)
               | (Button1.Content == btnContent & Button5.Content == btnContent &
                 Button9.Content == btnContent)
               | (Button2.Content == btnContent & Button5.Content == btnContent &
                 Button8.Content == btnContent)
               | (Button3.Content == btnContent & Button6.Content == btnContent &
                 Button9.Content == btnContent)
               | (Button4.Content == btnContent & Button5.Content == btnContent &
                 Button6.Content == btnContent)
               | (Button7.Content == btnContent & Button8.Content == btnContent &
                 Button9.Content == btnContent)
               | (Button3.Content == btnContent & Button5.Content == btnContent &
                 Button7.Content == btnContent))
            {
                if (btnContent == "O")
                {

                    MessageBox.Show("PLAYER O WINS");
                    Label1.Content = ++i;
                }
                else if (btnContent == "X")
                {
                    MessageBox.Show("PLAYER X WINS");
                    Label2.Content = ++j;
                }
                disablebuttons();
            }

            else
            {
                foreach (Button btn in wrapPanel1.Children)
                {
                    if (btn.IsEnabled == true)
                        return;
                }
                MessageBox.Show("GAME OVER NO ONE WINS");
            }
        }
        private void disablebuttons()
        {
            foreach (Button btn in wrapPanel1.Children)
            {
                btn.IsEnabled = false;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            if (turn == 1)
            {
                btn.Content = "O";
                Label0.Content = "X";
            }
            else
            {
                btn.Content = "X";
                Label0.Content = "O";
            }
            btn.IsEnabled = false;
          win(btn.Content.ToString());
            turn += 1;
            if (turn > 2)
                turn = 1;
        }

        private void Reset_Click(object sender, RoutedEventArgs e)
        {
            foreach (Button btn in wrapPanel1.Children)
            {
                btn.Content = "";
                btn.IsEnabled = true;

}

    }}
MainWindow.xaml

<Window
       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" mc:Ignorable="d"
       x:Class="TicTacToe.MainWindow"
       x:Name="Window"
       Title="MainWindow" Width="600" Height="500">
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                      MappingMode="RelativeToBoundingBox">
       <GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF161313" Offset="1"/>
       <GradientStop Color="#FFC8C0C0" Offset="0.039"/>
       <GradientStop Color="#FE0E0C0C" Offset="0.07"/>
       <GradientStop Color="#FEEFDFDF" Offset="0.1"/>
       <GradientStop Color="#FE332E2E" Offset="0.135"/>
       <GradientStop Color="#FEE4D4D4" Offset="0.17"/>
       <GradientStop Color="#FECCC2C2" Offset="0.178"/>
       <GradientStop Color="#FEFFFFFF" Offset="0.183"/>
       <GradientStop Color="#FEF3E5E5" Offset="0.965"/>
       <GradientStop Color="#FE352E2E" Offset="0.926"/>
       <GradientStop Color="#FEF1E7E7" Offset="0.891"/>
       <GradientStop Color="#FE231F1F" Offset="0.857"/>
       <GradientStop Color="#FEF1EBEB" Offset="0.817"/>
       <GradientStop Color="#FEB1E7AC" Offset="0.787"/>