If you come from Windows Forms background, you must have heard of shaped Windows Forms or non-rectangular Windows Forms. A non-rectangular Windows Forms has a user interface that is not a typical rectangular Window you see in Windows user interfaces. The window can be of any shape such as a drawing, a fruit, a stereo player and so on.
In WPF, there is no concept of Windows Forms. Every user interface in WPF is represented by a Window. In this article, you will learn how to create non-rectangular shaped Windows in WPF.
In Windows Forms, to create non-rectangular shaped Forms, we used to create a Path and used to set Path property of a Path.
Creating non-rectangular interfaces in WPF is actually simpler than Windows Forms. We just have to set AllowsTransparency property of a Window to True and Background to Transparent. After that whatever you place on that Window does not have a background typical Window in the background.
<Window x:Class="NonRectWindowSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1"
AllowsTransparency="True"
Background="Transparent">
</Window>
So let's say we need to create a user interface that looks like Figure 1. We simply have to create a Path with the similar UI and place on a transparent Window. That will do the trick.
Figure 1
The complete code of the Window in XAML looks like Listing 1.
<Window x:Class="NonRectWindowSample.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" SizeToContent="WidthAndHeight"
MouseLeftButtonDown="Window_MouseLeftButtonDown"
WindowStyle="None"
AllowsTransparency="True"
Background="Transparent">
<Canvas Width="400" Height="400" Name="RootLayout" >
<Path Stroke="Gray" StrokeThickness="2" Name="UIPath" >
<Path.Fill>
<LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1" >
<GradientStop Color="Green" Offset="0" />
<GradientStop Color="Yellow" Offset="0.35" />
<GradientStop Color="Orange" Offset="0.65" />
<GradientStop Color="Red" Offset="0.85" />
</LinearGradientBrush>
</Path.Fill>
<Path.Data>
<PathGeometry >
<PathFigure StartPoint="50,100">
<ArcSegment Size="150,150" RotationAngle="45" IsLargeArc="True"
SweepDirection="CounterClockwise" Point="100,50" />
<LineSegment Point="20,20"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Label Width="226" Height="68" FontSize="20" FontFamily="Georgia" FontWeight="Bold"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Canvas.Left="60" Canvas.Top="127"
Foreground="Blue" >
Drag Me and Watch!
</Label>
<Button Canvas.Left="206" Canvas.Top="42" Height="0" Width="0"
ToolTip="Click me to close the form." Name="CloseButton" Click="CloseButton_Click">
<Button.Template>
<ControlTemplate>
<Canvas>
<Rectangle Width="20" Height="20" Stroke="DarkBlue" RadiusX="2" RadiusY="2">
<Rectangle.Fill>
<SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
</Rectangle.Fill>
</Rectangle>
<Line X1="3" Y1="3" X2="17" Y2="17" Stroke="White" StrokeThickness="2"></Line>
<Line X1="17" Y1="3" X2="3" Y2="17" Stroke="White" StrokeThickness="2"></Line>
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
<Button Canvas.Left="131" Canvas.Top="272" Height="30" Name="BlackNWhiteButton" Width="112"
Foreground="White" Background="Crimson" Click="BlackNWhiteButton_Click" FontWeight="Bold">
Black and White
</Button>
</Canvas>
</Window>
Listing 1
We also write code listed in Listing 2 for the left mouse button click event handler and call DragMove method of the Window that is responsible for moving a Window position when a Window is dragged. The Close button click event handler simply closes the Window.
On Black and White button click event handler, we change background of the Window to black and white color gradient.
Private Sub Window_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
Me.DragMove()
End Sub
Private Sub CloseButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Me.Close()
End Sub
Private Sub BlackNWhiteButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a linear gradient brush with five stops
Dim blacknwhiteBrush As New LinearGradientBrush()
blacknwhiteBrush.StartPoint = New Point(0, 0)
blacknwhiteBrush.EndPoint = New Point(1, 1)
' Create and add Gradient stops
Dim blackGS As New GradientStop()
blackGS.Color = Colors.Black
blackGS.Offset = 0.0R
blacknwhiteBrush.GradientStops.Add(blackGS)
Dim whiteGS As New GradientStop()
whiteGS.Color = Colors.White
whiteGS.Offset = 1.0R
blacknwhiteBrush.GradientStops.Add(whiteGS)
UIPath.Fill = blacknwhiteBrush
End Sub
Listing 2
Clicking Black and White button changes the Window that looks like Figure 2.
Figure 2