In Focus

Shaped Windows In WPF

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 using C#.

If you come from a 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 set the Path property of a Path.

Creating non-rectangular interfaces in WPF is actually simpler than in Windows Forms. We just have to set the AllowsTransparency property of a Window to True and the Background to Transparent. After that whatever you place on that Window does not have a typical Window background.

  1. <Window x:Class="NonRectWindowSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1"  
  5.     AllowsTransparency="True"  
  6.     Background="Transparent">  
  7. </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 it on a transparent Window. That will do the trick.

Shaped Windows In WPF
Figure 1

The complete code of the Window in XAML looks like Listing 1.

  1. <Window x:Class="NonRectWindowSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.   
  5.     Title="Window1" SizeToContent="WidthAndHeight"  
  6.     MouseLeftButtonDown="Window_MouseLeftButtonDown"  
  7.       WindowStyle="None"  
  8.       AllowsTransparency="True"  
  9.       Background="Transparent">  
  10.     <Canvas Width="400" Height="400" Name="RootLayout" >  
  11.         <Path Stroke="Gray" StrokeThickness="2" Name="UIPath" >  
  12.             <Path.Fill>  
  13.                 <LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1" >  
  14.                     <GradientStop Color="Green" Offset="0" />  
  15.                     <GradientStop Color="Yellow"  Offset="0.35" />  
  16.                     <GradientStop Color="Orange" Offset="0.65" />  
  17.                     <GradientStop Color="Red" Offset="0.85" />  
  18.                 </LinearGradientBrush>  
  19.             </Path.Fill>  
  20.             <Path.Data>  
  21.                 <PathGeometry >  
  22.                     <PathFigure StartPoint="50,100">  
  23.                         <ArcSegment Size="150,150" RotationAngle="45" IsLargeArc="True"  
  24.   
  25.                                     SweepDirection="CounterClockwise" Point="100,50" />  
  26.                         <LineSegment Point="20,20"/>  
  27.                     </PathFigure>  
  28.                 </PathGeometry>  
  29.             </Path.Data>  
  30.         </Path>  
  31.         <Label Width="226" Height="68" FontSize="20" FontFamily="Georgia" FontWeight="Bold"  
  32.            HorizontalContentAlignment="Center" VerticalContentAlignment="Center"  
  33.            Canvas.Left="60" Canvas.Top="127"  
  34.            Foreground="Blue" >  
  35.             Drag Me and Watch!  
  36.         </Label>  
  37.         <Button Canvas.Left="206" Canvas.Top="42" Height="0" Width="0"  
  38.             ToolTip="Click me to close the form." Name="CloseButton" Click="CloseButton_Click">  
  39.             <Button.Template>  
  40.                 <ControlTemplate>  
  41.                     <Canvas>  
  42.                         <Rectangle Width="20" Height="20" Stroke="DarkBlue" RadiusX="2" RadiusY="2">  
  43.                             <Rectangle.Fill>  
  44.                                 <SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />  
  45.                             </Rectangle.Fill>  
  46.                         </Rectangle>  
  47.                         <Line X1="3" Y1="3" X2="17" Y2="17" Stroke="White" StrokeThickness="2"></Line>  
  48.                         <Line X1="17" Y1="3" X2="3" Y2="17" Stroke="White" StrokeThickness="2"></Line>  
  49.                     </Canvas>  
  50.                 </ControlTemplate>  
  51.             </Button.Template>  
  52.         </Button>  
  53.         <Button Canvas.Left="131" Canvas.Top="272" Height="30" Name="BlackNWhiteButton" Width="112"  
  54.                Foreground="White" Background="Crimson" Click="BlackNWhiteButton_Click" FontWeight="Bold">  
  55.             Black and White  
  56.         </Button>  
  57.     </Canvas>  
  58. </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 the Black and White button click event handler, we change the background of the Window to a black and white color gradient.

  1. private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {  
  2.     this.DragMove();  
  3. }  
  4. private void CloseButton_Click(object sender, RoutedEventArgs e) {  
  5.     this.Close();  
  6. }  
  7. private void BlackNWhiteButton_Click(object sender, RoutedEventArgs e) {  
  8.     // Create a linear gradient brush with five stops   
  9.     LinearGradientBrush blacknwhiteBrush = new LinearGradientBrush();  
  10.     blacknwhiteBrush.StartPoint = new Point(0, 0);  
  11.     blacknwhiteBrush.EndPoint = new Point(1, 1);  
  12.     // Create and add Gradient stops  
  13.     GradientStop blackGS = new GradientStop();  
  14.     blackGS.Color = Colors.Black;  
  15.     blackGS.Offset = 0.0;  
  16.     blacknwhiteBrush.GradientStops.Add(blackGS);  
  17.     GradientStop whiteGS = new GradientStop();  
  18.     whiteGS.Color = Colors.White;  
  19.     whiteGS.Offset = 1.0;  
  20.     blacknwhiteBrush.GradientStops.Add(whiteGS);  
  21.     UIPath.Fill = blacknwhiteBrush;  
  22. }  

Listing 2

Clicking the Black and White button changes the Window that looks like Figure 2,

Shaped Windows In WPF 
Figure 2