WPF uses xaml to write controls to the window as well as creating animations to animate controls.

If you’ve created Silverlight websites before you will know what i am talking about.

Silverlight as most of us know allows us to create rich, interactive web applications where as WPF allows us to create rich, interactive desktop applications.

Events for controls are generated and created the same as Visual Basic (Button click, Text Changed, Mouse Down etc.)

but some of the code syntax is a little bit different, lets look at a quick example before i get into the tutorial cause if you use this tutorial to create custom windows you’ll need to learn how to call it.

It’s relatively the same as Visual Basic, even those it’s relatively the same it’s still different.

Anyways the example is calling the window to display, in Visual Basic it’s written like this

 

Form1.show()

In WPF it’s written like this

Dim NewWindow As New ModalWindow

NewWindow.Show()

ModalWindow is the name of our custom window that was created in WPF.

Now that we have that figured out lets create a Rectangle that has rounded corners and a drop shadow that appears behind it…This of this shadow as the one you see in Windows Vista/7

• Open Visual Basic and create a New Project
• Cick WPF Application from the New Project list
• You will notice right away the layout is a little bit different than we’re used to in Visual Basic, your project should be similar to this
  

  New WPF Project

  You will notice at the bottom the xaml code, as you drop controls onto the window it will generate the xaml code that draws it out on to the window.
  You can also add controls to the window by code as well, this is what we will be doing.

  Another thing you will notice in the code is a Grid attribute, this is where we will be placing our controls on to, if you click on the grid you’ll notice how it leaves a margin around the window, this is useful if you don’t want anything displayed right to the edge of the window.

• Within the Grid attributes insert the following code, this will create our rectangle control

 

</Rectangle>

You will notice a dark gray border on your grid now, This is our rectangle.

Now lets add our Shadow effect now, we can accomplish this using the Rectangle Effects attribute,

We do this by placing the following code between our Rectangle tags.

 

You will notice a slight blur around your rectangle along with a border radius of 14px, this can be modified in the properties by selecting the rectangle control.

This is what the complete code should look like:

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Rectangle Height="287" HorizontalAlignment="Left" Margin="12,12,0,0" RadiusX="14" RadiusY="14" Name="Rectangle1" Stroke="#FFD0E7F2" VerticalAlignment="Top" Width="479">
            <Rectangle.Effect>
                <DropShadowEffect x:Name="Dshadow" BlurRadius="15" ShadowDepth="0" Color="black"/>
            </Rectangle.Effect>
        </Rectangle>

    </Grid>
</Window>

Go a head and press F5 to debug your application, if all went well you should see the rectangle with a slight shadow around the border.

This is a real simple way of applying a shadow around your rectangle, i encourage you to play around with the blur radius, shadow depth and color to get it looking the way you want it to look.

Here is 1 example of what you can do with Rectangles.

Full Code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency="True">

    <Window.Background>

        <SolidColorBrush />
    </Window.Background>
    <Grid>
        <Rectangle Height="286" HorizontalAlignment="Left" Margin="12,12,0,0" RadiusX="14" RadiusY="14" Name="Rectangle1" Stroke="#9D2C7782" VerticalAlignment="Top" Width="472" StrokeThickness="1">
            <Rectangle.Effect>
                <DropShadowEffect x:Name="DS" BlurRadius="15" ShadowDepth="0" Color="black"/>
            </Rectangle.Effect>
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#961A87B7" Offset="0" />
                    <GradientStop Color="#9603334B" Offset="1" />
                    <GradientStop Color="#9600F2FF" Offset="0.28" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Fill="White" Height="218" HorizontalAlignment="Left" Margin="25,57,0,0" Name="Rectangle2" Stroke="#FFA7A7A7" VerticalAlignment="Top" Width="446">
        </Rectangle>
        <Rectangle Height="31" HorizontalAlignment="Left" Margin="25,20,0,0" Name="Rectangle3" VerticalAlignment="Top" Width="446" Stroke="#BF1A87B7">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#BF166486" Offset="0" />
                    <GradientStop Color="#BE8AD1EF" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Label Content="RECTANGULAR WINDOW" Height="57" HorizontalAlignment="Left" Margin="95,84,0,0" Name="Label1" VerticalAlignment="Top" Width="348" FontSize="24" />
        <Label Content="Label" Height="28" HorizontalAlignment="Left" Margin="419,271,0,0" Name="Label2" VerticalAlignment="Top" Foreground="#32FFFFFF" />
    </Grid>
</Window>

As a side note to this example if you want to add the ability to drag your window (rectangle) around just create your MouseDown event on the control you want to trigger the drag method and apply this code

Me.DragMove()