Shaped Windows in WPF

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 void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    this.DragMove();

}

 

private void CloseButton_Click(object sender, RoutedEventArgs e)

{

    this.Close();

}

 

private void BlackNWhiteButton_Click(object sender, RoutedEventArgs e)

{

        // Create a linear gradient brush with five stops 

    LinearGradientBrush blacknwhiteBrush = new LinearGradientBrush();

    blacknwhiteBrush.StartPoint = new Point(0, 0);

    blacknwhiteBrush.EndPoint = new Point(1, 1);

 

    // Create and add Gradient stops

    GradientStop blackGS = new GradientStop();

    blackGS.Color = Colors.Black;

    blackGS.Offset = 0.0;

    blacknwhiteBrush.GradientStops.Add(blackGS);

 

    GradientStop whiteGS = new GradientStop();

    whiteGS.Color = Colors.White;

    whiteGS.Offset = 1.0;

    blacknwhiteBrush.GradientStops.Add(whiteGS);

 

    UIPath.Fill = blacknwhiteBrush;

}

Listing 2

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

Figure 2