A Simple Way to Make a WPF Chromeless Window

Introduction

Microsoft introduced the “Windows Presentation Foundation” or WPF to align desktop development with similar experiences developers have with developing web applications. With the exception of possibly a rather weak graphical interface for creating windows and pages, WPF for the most part offers desktop developers a quality foundation for delivering desktop and desktop-styled applications into production environments as well as multiple mobile platforms.

Like with web development that now has its interface and coding constructs more or less separated between HTML/CSS and client\server side coding (though the client side coding model is merely a throwback to “Classic ASP”), WPF provides a similar format.

In WPF, you have both Window and Page objects similar to the original WinForms environment where one could have a Window and page-like controls whereby both can have Windows displaying Pages within them.

Unlike web development, Microsoft for some reason has chosen to make styling WPF Windows and Pages an utter nightmare for developers to wrap their heads around. Though CSS, which can become awfully complex in the hands of a skilled web developer, CSS still retains a sense of simplicity that most web developers can attain skills with in order to make their web pages acceptable.

WPF, on the other hand, takes CSS simplicity and turns it on its head by implementing templates that provide base styling for every one of the WPF controls provided by either Microsoft or third-party vendors. For many, what would be considered minor styling options with CSS, WPF presents an array of complexity for developers that has many throwing up their hands in disgust.

One would think that having the need for a completely separate application from Visual Studio to design WPF styles in the Guise of “Blend”, such a process would have been made much easier. And it would have been had the styling terminology used would have been turned into simplistic language that everyone could understand instead of the ambiguous terminology that has most turning to the Help systems for clarification.

Making a simple styling change such as the color of the selection highlighting in a WPF list-box could have one implementing the entirety of an updated list-box style template into a page, which is extremely verbose or finding a way to add styling resources to the same. In either case, the research needed to find quality information on such processes can be quite extensive as there are really few quality manuals that deal with WPF styling in a simplistic and straightforward manner.

One of the things that many developers would like to be able to provide their clients and users are Windows without the ugly chrome that surrounds them that is similarly ever present with web browsers. Interestingly enough, most developers are under the impression that to do this, they require an expensive tool suite that provides for Chromeless windows as well as advanced styling.

Admittedly, I was under the same impression and my own commercial product has suffered the same visual detriment that many have… until recently. After doing a lot of research on the subject with the intent of avoiding an expenditure for a tool suite, I did not believe justified I found enough information to put together such an interface finding it far easier than one would believe once I sifted through the various documents others had put up on technical sites.

Setting up Your Window’s Properties

To begin with, you have to provide a WPF project with a Window object. If you have little experience with Visual Studio and WPF, this is as straight forward process similar to any other type of control instantiation. Right click on the project that you want to add a Window to and select “Add New Item”, which will provide you with a popup form as shown below. Simply select the “Window (WPF)” control and Visual Studio will take care of the rest.

Once you have your Window control\object in your project, open it up using the “XAML” (markup) view (use “View Designer” then select the “XAML” view).

At the top of the markup view, you will see the class name that you provided for your Window…

<Window x:Class="MainWindow"

Place your mouse cursor over this name and right-click to bring up the properties screen. Sometimes, this screen will come up blank so you may have to reselect the class name several times before the properties window appears properly. When you do see the properties information displayed, ensure that you have the properties entries selected (the little wrench in the upper right corner).

Under the “Brush” section, you will want to change the following property:

• BorderBrush

Left click on the black square to the right of the color display and select “Custom Expression”. Enter “LightGray”. You can enter any standard WPF styling color you like but the “LightGray” will provide for a nice soft border color that is not intrusive to the eye.

Under the “Appearance” section, you will want to change the following properties…

• BorderThickness
• WindowStyle

In the four entry areas for the “border thickness” (left, right, top, bottom), set the number to “1”.

For the “window style”, set it to “None”.

Under the “Common” section, the following properties should be changed…

• Icon
• ResizeMode
• ShowInTaskbar
• SizeToContent
• WindowStartupLocation
• WindowState

For the “Icon” property, you will want to provide an image that will appear in the Taskbar when the window in minimized.

All images in WPF require a path prefix, which appears as follows…

/(Project Name);”component”/(path to application images)

Example: /SQLServer.SourceControl;component/Images/ApplicationIcon_128x128.png

Set the “ResizeMode” to “CanResizeWithGrip”. This option will provide for a resizing grip at the bottom right of the displayed window that allows users to drag the window to an either larger or smaller size.

Set the “ShowInTaskbar” property to checked so that the window can be re-maximized after minimization.

Set “SizeToContent” to “Manual” so that manual resizing can be performed..

Set “WindowStartupLocation” to “CenterScreen”.

And finally, set the “WindowState” property to “Normal”.

After setting all of these properties, your window is now ready to have the appropriate XAML markup added to the designer in “Markup” mode (XAML).

The Window’s XAML Markup

When a new WPF window is initialized, it is done so with its header markup, which is inclusive of the properties we just adjusted, as well as a primary “grid” control as shown below…

<Window x:Class="MainWindow" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="MainWindow" 
Title="SQL Server Source Control for Developers" 
Icon="/SQLServer.SourceControl;component/Images/ApplicationIcon_128x128.png" 
Background="WhiteSmoke" WindowStartupLocation="
CenterScreen" ResizeMode="CanResizeWithGrip" 
FontFamily="Arial" Height="844" 
Width="1262" BorderThickness="1" BorderBrush="LightGray" 
AllowsTransparency="True" WindowStyle="None">

        <Grid>
	
	</Grid>
</Window>

This grid is the outer-most grid to the entire window and should be left as is so that all other XAML markup is entered within it.

In our situation, we will begin by adding two docking panels within the primary grid, which will allow us to frame additional markup (controls) so that they are aligned against the top and bottom parts of the window.

<DockPanel VerticalAlignment="Top" Height="844">

  <DockPanel x:Name="TitleBar" DockPanel.Dock="Top" 
  Background="WhiteSmoke" Height="24">

  </DockPanel>

</DockPanel>

The inner docking panel allows us to configure the two areas of the window’s displayed header, which will have a title bar, similar to the original chrome but cleaner. In the XAML markup below, you will find a text-block with the window’s title as well as a “minimize” button that will allow you to collapse the window to the Task-Bar.

<DockPanel x:Name="TitleBar" DockPanel.Dock="Top" 
Background="WhiteSmoke" Height="24">

<TextBlock HorizontalAlignment="Left" 
VerticalAlignment="Center" Background="WhiteSmoke" 
Foreground="DimGray" FontFamily="Arial" FontWeight="DemiBold">
SQL Server Source Control for Developers 2.1.1
</TextBlock>

<Button Name="btnMinimizeScreen" 
HorizontalAlignment="Right" VerticalAlignment="Center" 
BorderThickness="0" Height="20" Width="208">

        <Button.Template>
           <ControlTemplate>
              <Image Source="/SQLServer.SourceControl;component/Images/Minimize_64x64.png" 
               Height="24" Width="24" 
               HorizontalAlignment="Right" VerticalAlignment="Center" 
               ToolTip="minimize screen" />
           </ControlTemplate>
        </Button.Template>
</Button>

</DockPanel>

Following the inner docking panel is a grid that contains the window’s master menu, which is a standard WPF Menu Control…

<Grid Name="grdMenu" 
DockPanel.Dock="Top" VerticalAlignment="Top">

</Grid>

Since the menu being used for this article is specific to a commercial product, its inner contents will not be shown in this paper. However, for those who would like to see the entire set of XAML and source code for this presentation, you may download it from the following link…

https://1drv.ms/u/s!AnW5gyh0E3V-g2E28JO3KJkRBFnN

The result of this work is shown in the image below and is included as an image file for better viewing in the download…

For those who are interested in trying Microsoft’s “Windows Presentation Foundation”, please go to the following page for links to Visual Studio 2016 Community Edition and the new free SQL Server 2016 Developer Edition database engine…

https://blackfalconsoftware.wordpress.com/visual-studio-net/

For a freely available open sourced data access layer for SQL Server, please go to the following link for the download…

http://blackfalconsoftware.com/OpenSource

For any questions on this paper, please contact me at support@blackfalconsoftware.com.