Adding a Title bar & Close button (WPF Series Final)

In my previous blog we have learned – Creating a window and adding a gradient effect, But from the previous blog we don’t get a fully functional window.

To make a functional window we need to add many features like:

1. A Title Bar.
2. A Close Button.
3. Title Bar Dragging Enabled.

We will proceed further with our first feature.

1. Adding a title bar.

To add a title bar open the project that we have created from the Creating a window and adding a gradient effect blog. Add a rectangle from the tool box. Change the following properties Name=”RctTitle”, Fill=”White”, StrokeThickness=”2″, RadiusX=”20″, RadiusY=”20″, Stroke=”Black”, StrokeThickness=”2″ and  VerticalAlignment=”Top”of the rectangle.

Code will be as below:

<Rectangle Height="42" Name="RctTitle" Stroke="Black" VerticalAlignment="Top" Fill="White" StrokeThickness="2" RadiusX="20" RadiusY="20" />

2. Adding the Close button.

It can be done in many ways but for a rounded close button we will follow three simple steps:

1. Select a Border and a Label control from the toolbox.
2. Place the Label control inside the Border control. To do this just drag the label onto the border control.
3. Now change the properties of the both controls.

Border Properties:

Height=”49″,Width=”49″, Name=”BrdCloseButton”, VerticalAlignment=”Top”, CornerRadius=”20,20,20,20″, HorizontalAlignment=”Right”,  BorderThickness=”2″ and BorderBrush=”Black”.

And also add the gradient effect to the border.

Label Properties:

Name=”LblClosebutton”,  HorizontalAlignment=”Stretch”, VerticalAlignment=”Stretch”, HorizontalContentAlignment=”Center”, VerticalContentAlignment=”Center”, FontSize=”20″, Foreground=”White”, Height=”34″ and Content=”X”

The code will be:

<Border Height="43" Name="BrdCloseButton" VerticalAlignment="Top" CornerRadius="20,20,20,20" HorizontalAlignment="Right" Width="49" BorderThickness="2" BorderBrush="Black" Margin="0,-1,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.982,0.978" MappingMode="RelativeToBoundingBox" StartPoint="0.003,0.015">
<GradientStop Color="#FFB69383" Offset="0.112"/>
<GradientStop Color="#FFBA9087" Offset="0.378"/>
<GradientStop Color="#FFB69383" Offset="0.89"/>
<GradientStop Color="#FFF5F2EB" Offset="0.754"/>
<GradientStop Color="#FFBA9087" Offset="0.647"/>
<GradientStop Color="#FFF5F2EB" Offset="0.258"/>
</LinearGradientBrush>
</Border.Background>
<Label  Name="LblClosebutton"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="24" Foreground="White" Margin="0" Height="39">X</Label>
</Border>

 

Similarly to follow the third step to create a  draggable window of the RctTitle. Code on the Left mouse button down event of the RctTitle :

private void RctTitle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}

Add the following code on the event Left mousebutton down of the BrdCloseButton:

private void LblClosebutton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.Close();
}

Adjust the Rectangle(the titlebar) on the top of the window and the close button on it, so that both matches the image below.

Happy Coding.