Follow @PDSAInc Creating Border-less Windows in WPF - Paul Sheriff's Blog for the Real World

Paul Sheriff's Blog for the Real World

This blog is to share my tips and tricks garnered over 25+ years in the IT industry

Paul's Favorites

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

Posted: Oct 12 2009, 10:24 AM by psheriff | with 11 comment(s)
Filed under: ,

Comments

Khoa Do said:

Thanks for this professional hint. Works like a charm. BorderThickness lol ...

# October 15, 2009 4:07 AM

Junior Mayhe said:

Ok, but don't use WindowsFormsHost controls inside.

They won't show.

# December 8, 2009 6:52 PM

okilele said:

OK, but how do you hide borders if your window must fit to content and ResizeMode is set to "CanResize" ?

# March 8, 2010 11:11 AM

psheriff said:

okilele,

There is no way that I know of to hide borders in that situation. Plus if the ResizeMode is set to resize you need the borders so the user has something to grab onto to resize the window.

Paul

# March 8, 2010 11:55 AM

Kevin said:

If you set the Window background to transparent as directed and add a dropdown box, the contents of the dropdown appear behind the window.

How can this be resolved ?

# February 15, 2011 9:51 AM

psheriff said:

Kevin,

I added a DropDown within the StackPanel on this Window and I did not see the problem you are having. I tried it in VS.NET 2010.

Paul

# February 17, 2011 9:55 AM

JC said:

The dropdowns appearing behind the window is a known issue with WPF on XP. Basically it can happen at any time when AllowsTransparency is true, and there is no way to stop it.

I've found the problem occurs more frequently with Intel based GMA video drivers, but YMMV.

# September 19, 2011 6:22 PM

Kuba said:

How we can change the application location on screen now?

# November 7, 2011 8:07 AM

psheriff said:

Kuba,

Simply use the Window's MouseLeftButtonDown event and add this.DragMove(). Then you can drag the window around anywhere.

Paul

# November 7, 2011 12:57 PM

B. W. Vinodkumar said:

Hi Author, you can achieve the same result, i.e. Borderless windows in WPF with just only two properties,

1. WindowStyle : NONE

2. AllowsTransparecy : TRUE

# January 4, 2012 9:54 PM

Matt said:

Thanks for the code.  I was looking for this for a few.

# August 20, 2012 3:56 PM