Creating Border-less Windows in WPF

When creating a splash screen or to just have a different look for the windows in your WPF application, you might wish to eliminate the border to give it a custom look (see Figure 1). This can be done very easily with WPF.

No Border Image

Figure 1: A WPF window that has no border.

Setting Window Attributes

To get a border-less window, you need to set the following attributes on your Window.

  • WindowStyle="None"
  • ShowInTaskbar="False"
  • AllowsTransparency="True"
  • Background="Transparent"

The WindowStyle attribute normally allows you to set a single border, three-D border, or a Tool Window border. Setting this attribute to None will eliminate the border. The ShowInTaskbar attribute is optional, but if you are doing a splash screen you probably won’t want this window to show up in the Task Bar as it is only going to be there for a very short time. The next two attributes, AllowsTransparency and Background work together. You must set AllowsTransparency to True to allow the Background to be set to Transparent. If you do not set these two attributes, then your border will still show up.

The complete XAML code for the Window shown in Figure 1 looks like the following:

<Window x:Class="WPFExtras.frmWindowNoBorder"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowStyle="None"
  ResizeMode="NoResize"
  ShowInTaskbar="False"
  AllowsTransparency="True"
  Background="Transparent"
  WindowStartupLocation="CenterScreen"
  Height="300"
  Width="300">
    <!-- Creates the shadow on the right and bottom -->
    <Border BorderBrush="Gray"           
            BorderThickness="0,0,2,2"
            CornerRadius="10"
            Background="Beige">
      <!-- Create space between shadow and the next border -->
      <Border BorderBrush="Transparent"
              BorderThickness="5"
              CornerRadius="10">
        <!-- The inner border -->
        <Border BorderBrush="Black"
                BorderThickness="1.5"
                CornerRadius="10">
          <StackPanel VerticalAlignment="Bottom" Margin="10">
            <Button Style="{StaticResource BasicControl}"
                    Click="Button_Click">Close Me</Button>
          </StackPanel>
        </Border>
      </Border>
    </Border>
</Window>

The XAML code for this Window uses 3 <Border> elements to create the shadow effect. The outer border is the shadow border that displays just on the right and the bottom. This is accomplished by setting the BorderThickness attribute to 0,0,2,2. The next border is to just give some space between the outer “shadow” border and the inner border. Notice the use of the CornerRadius attribute to give a nice rounded border effect.

Summary

Creating a border-less window is a very straight-forward process in WPF. Just by setting a few attributes will remove the border. Then you can create your own border by using the <Border> element. Or you could use any type of container you want to contain the controls on your Window.

Good Luck With Your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".

10 Comments

Comments have been disabled for this content.