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"
  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"
  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