WPF Shaped Windows in VB.NET

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 VB.NET.
  • 2947
 

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.

  ShapedWindow1.JPG
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.

ShapedWindow2.JPG

Figure 2

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.