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.