So let us start with step by step process.
Step 1: First of all create a new WPF project and name it WpfSample
Open visual studio, go to File -> New -> Project Create New Project Select WPF Application and name it ‘WpfSample’
Create Wpf application
Step 2: Modify main window
As we want to create metro style window, first we will remove default title bar from the window and set the background color to an application. To do so, we will change the window property as mentioned below:
WindowStyle=”None” (Removes default TitleBar.) Background=”#293857″ (sets background color of the window.) BorderThickness=”0″ (Sets border thickness to zero.) AllowTransparency=”True” (To allow window transparency.)
<Window x: Class = "WpfSample.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "1000"
WindowStyle = "None"
Background = "#293857"
BorderThickness = "0"
AllowsTransparency = "True"
WindowStartupLocation = "CenterScreen" >
Step 3: Create Title Bar
After completion of above step, when you run the application by pressing Ctrl + F5, you will see a square window without title bar. Now its time to create our custom title bar using dock panel and in which we will put our custom buttons for Close, Restore and Minimize.
To create a title bar, we will define a grid having two rows and out of them first row will be used for TitleBar and another row will be used for the main content of the page.
Below code defines a window which looks like metro style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Window x: Class = "WpfSample.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "1000"
WindowStyle = "None"
Background = "#293857"
BorderThickness = "0"
AllowsTransparency = "True"
WindowStartupLocation = "CenterScreen" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "26" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x: Name = "TitleBar" DockPanel. Dock = "Right" Grid. Row = "0" Grid. Column = "0" Margin = "0" Background = "Transparent" >
<Button x: Name = "buttonClose" DockPanel. Dock = "Right" Margin = "4,0,10,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" >
<TextBlock Text = "X" VerticalAlignment = "Center" > </TextBlock>
</Button>
<Button x: Name = "buttonRestore" DockPanel. Dock = "Right" Margin = "1,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" >
<TextBlock Text = "M" VerticalAlignment = "Center" > </TextBlock>
</Button>
<Button x: Name = "buttonMinimize" DockPanel. Dock = "Right" Margin = "1,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" >
<TextBlock Text = "__" VerticalAlignment = "Center" > </TextBlock>
</Button>
<TextBlock DockPanel. Dock = "Left" Margin = "10,5,0,5" FontWeight = "Bold" x: Name = "labelAppTitle" Foreground = "#fff" > Spidercode BioGraphy </TextBlock>
</DockPanel>
</Grid>
</Window>
After writing above code, when you run your application it will look something like this:
Step 4: Handle Title Bar events
Till now we have created a simple window having title bar only. But buttons on title bar and drag-drop functionality are still not working. In this step we will achieve these functionalities. So first of all define the click event of buttons and MouseDown event of title as mentioned below:
buttonClose: Click=”buttonClose_Click”buttonRestore: Click=”buttonRestore_Click”buttonMinimize: Click=”buttonMinimize_Click”labelApplicationTitle: MouseDown=”labelApplicationTitle_MouseDown”So your DockPanel will finally look like this:
<DockPanel x: Name = "TitleBar" DockPanel. Dock = "Right" Grid. Row = "0" Grid. Column = "0" Margin = "0" Background = "Transparent" >
<Button x: Name = "buttonClose" DockPanel. Dock = "Right" Margin = "4,0,10,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" Click = "buttonClose_Click" >
<TextBlock Text = "X" VerticalAlignment = "Center" > </TextBlock>
</Button>
<Button x: Name = "buttonRestore" DockPanel. Dock = "Right" Margin = "1,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" Click = "buttonRestore_Click" >
<TextBlock Text = "M" VerticalAlignment = "Center" > </TextBlock>
</Button>
<Button x: Name = "buttonMinimize" DockPanel. Dock = "Right" Margin = "1,0" VerticalAlignment = "Center" Background = "Transparent" Width = "20" Height = "20" Foreground = "#fff" Click = "buttonMinimize_Click" >
<TextBlock Text = "__" VerticalAlignment = "Center" > </TextBlock>
</Button>
<TextBlock DockPanel. Dock = "Left" Margin = "10,5,0,5" FontWeight = "Bold" x: Name = "labelApplicationTitle" Foreground = "#fff" MouseDown = "labelApplicationTitle_MouseDown" > Spidercode BioGraphy </TextBlock>
</DockPanel>
Now go to the code behind page MainWindow.xaml.cs and define each event as mentioned below:
Note: Please see the comments and summary tag to understand each events
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/// <summary>
/// clcik event to minimize window
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void buttonMinimize_Click ( object sender , RoutedEventArgs e )
{
// Set Window State to Minimized
this . WindowState = WindowState . Minimized ;
}
private void buttonRestore_Click ( object sender , RoutedEventArgs e )
{
// If Window state is Maximized then set it to normal
// If window state is Normal then maximize the window
this . WindowState = this . WindowState == WindowState . Maximized ? WindowState . Normal : WindowState . Maximized ;
}
private void buttonClose_Click ( object sender , RoutedEventArgs e )
{
// Shutdown current application
Application . Current . Shutdown ( ) ;
}
private void labelApplicationTitle_MouseDown ( object sender , MouseButtonEventArgs e )
{
// Maximize or restore window if left button is clicked two times
// Allow window to be dragged if left button is clicked and hold only one time
if ( e . ChangedButton == MouseButton . Left )
{
if ( e . ClickCount == 2 )
{
this . WindowState = this . WindowState == WindowState . Maximized ? WindowState . Normal : WindowState . Maximized ;
}
else
{
Application . Current . MainWindow . DragMove ( ) ;
}
}
}
After writing events as above, you are almost done. Now your window works same as a normal window and it looks like Metro style UI.
