Well this is just an extension to my previous article on Style in WPF. If you haven't had a look at it kindly go through the following link:
http://www.c-sharpcorner.com/UploadFile/17e8f6/styles-in-wpf/
Over here we are just going to see how to apply a style programitically for WPF controls. For the theory of style and resources please go through the link above. Without wasting a lot of time anymore I will show you the code snippet of my program.
Here I am going to take an example of how to make our favorite TicTacToe program look more attractive in WPF by applying a style to it.
Note: I'm not going to explain how to write a TicTacToe program, in this program we are just going to display X and O symbols on a Button's Click Event. The Program logic I'm assuming you know.
Here is the App.Config file of my program:
![Image 1.jpg]()
From the above diagram we can see that there are three styles declared; they are mainStyle, xStyle and oStyle. We will use these styles to display Xs and Os in the button's text on the button's Click event.
The following is the window.xaml file of my program:
<Window x:Class="StyleEg.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="281" Width="371">
<Grid Name="grid1" ButtonBase.Click="CommanHandler_Click">
<Grid.RowDefinitions>
<RowDefinition Height="80*" />
<RowDefinition Height="78*" />
<RowDefinition Height="84*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="112*" />
<ColumnDefinition Width="122*" />
<ColumnDefinition Width="115*" />
</Grid.ColumnDefinitions>
<Button Name="Button1" Grid.Row="0" Grid.Column="0"></Button>
<Button Name="Button2" Grid.Row="0" Grid.Column="1"></Button>
<Button Name="Button3" Grid.Row="0" Grid.Column="2"></Button>
<Button Name="Button4" Grid.Row="1" Grid.Column="0"></Button>
<Button Name="Button5" Grid.Row="1" Grid.Column="1"></Button>
<Button Name="Button6" Grid.Row="1" Grid.Column="2"></Button>
<Button Name="Button7" Grid.Row="2" Grid.Column="0"></Button>
<Button Name="Button8" Grid.Row="2" Grid.Column="1"></Button>
<Button Name="Button9" Grid.Row="2" Grid.Column="2"></Button>
</Grid>
</Window>
It will look like this.
The following is the window.xaml.cs file of my program:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 StyleEg
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
int playerCount = 0;
public MainWindow()
{
InitializeComponent();
}
private void CommanHandler_Click(object sender, RoutedEventArgs e)
{
Button b = e.OriginalSource as Button;
if (b.Content== null)
{
b.Content = playerCount == 0 ? "X" : "O";
b.Style = playerCount == 0 ? (Style)FindResource("xStyle") : (Style)FindResource("oStyle");
playerCount = playerCount == 0 ? playerCount = playerCount + 1 : playerCount = playerCount - 1;
}
else
MessageBox.Show("Button Already Clicked", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
}
}
}
the following is the output of it:.
![Applying-Styles-In-WPF.jpg]()
By applying additional logic of the TicTacToe program you can complete the above code and create a pretty TicTacToe application. You can also change the background color of the button to make it more attractive as needed.
Hope you liked the example.