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.

Gradient Background (WPF Series Part 2)

In this blog I will let you know how to add gradient background to the window that we have created in my pervious blog named Rounded Corner window.

I normally use Microsoft Expression Blend to design user interfaces rather than VS itself as  Blend has widened  WPF functionality with a lot of innovations in the form design, 3-D animations( only with .Net Framework 4 ) and replaced many hard to code lines with only few clicks such as creating  a storyboard, adding a trigger, giving style to a listbox etc.

After I finish designing I use the XAML generated by Blend in VS for my further coding.

To add a gradient background follow these steps:

1. Create a new WPF Application in Microsft Expression Blend.
2.  Add a rectangle control in the window.
3. In Properties window of a rectangle select Fill and set its Brush to Gradient Brush (refer to the image below):
   
4. Now ,we click on the gradient stop that appears on the left and change its color code to #FFB69383. To add a next gradient stop click on bar shown in the image as “Click on this to add gradient stops“. After that set its color code to #FFBA9087 and so on (add as many stops as you want).  I added 6 gradient stops. After adding stops we see a gradient effect in the rectangle but it appears horizontally.
5. To make the gradient diagonal select the Gradient tool from tools and rotate it as you want.

The XAML in the Blend will look like below:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Rectangle HorizontalAlignment="Left" Margin="136,126,0,216" Stroke="Black" Width="100">
<Rectangle.Fill>
<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>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>

Now open the project that was made in the previous blog. Remove Fill=”Blury Wood”, remove the closing tag of the rectangle, copy the code for Rectangle.Fill from code generated from Expression Blend and also close the Rectangle tag so that your final XAML looks like this:

<Window x:Class="WpfWindowSidesCurved.Window1"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WindowCircular" Height="468" Width="650" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid>
<Rectangle Stroke="Black" RadiusX="30" RadiusY ="30" Name="RectangleSidesCurved" >
<Rectangle.Fill>
<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>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>

The window should look like the image below:

In my next blog we will learn how to add Title Bar, Close Button and Drag Drop to this window.

Happy Coding.

<Window x:Class="WpfWindowSidesCurved.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>

<Window x:Class="WpfWindowSidesCurved.Window1"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="468" Width="650" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid>
<Rectangle Stroke="Black" RadiusX="30" RadiusY ="30" Name="RectangleSidesCurved" Fill="BurlyWood"/>
</Grid>
</Window>