WPF

Shaped Windows In WPF

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
    Membership not found