Getting Started with WPF Chromeless Window

This section explains how to implement the ChromelessWindow control. It describes the following:

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as reference to use the control in any application.

You can find more details about installing the NuGet packages in a WPF application in the following link:

How to install nuget packages

Creating simple application with ChromelessWindow

You can create a WPF application with ChromelessWindow using the following steps:

  1. Create a project.
  2. Add ChromelessWindow.
  3. Customize title bar.
  4. Customize title bar background.
  5. Customize title bar font.
  6. Customize title bar height.
  7. Customize title bar icon.
  8. Customize the border of the ChromelessWindow.

Creating the project

Create a new WPF project in Visual Studio to display chromeless window.

Add ChromelessWindow

The following steps help you add ChromelessWindow:

  1. Create a WPF project, and refer the following assemblies:
    • Syncfusion.Shared.WPF.dll.
  2. Include an XML namespace for the above assemblies to the Main window.
<Window x:Class="Chromelesswindow.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Shared;assembly=Syncfusion.Shared.WPF">
</Window>
  1. Change the Window to ChromelessWindow.
  1. Add the Syncfusion.Windows.Shared namespace, and inherit MainWindow from ChromelessWindow in code behind.
using Syncfusion.Windows.Shared;
public partial class MainWindow : ChromelessWindow
{
    public MainWindow()
    {
        InitializeComponent();
    } 
}

wpf chromeless window application

Customizing title bar

Title bar background

You can customize the background of the title bar by setting the TitleBarBackground property of ChromelessWindow.

<syncfusion:ChromelessWindow
    x:Class="WPF_CalendarEdit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
    TitleBarBackground="Red"
    syncfusion:SkinStorage.VisualStyle="Metro"
    Title="ChromelessWindow Sample" Height="350" Width="525">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window title bar backcolor

Title bar font

The font of the caption in the title bar can be customized using the TitleFontSize property.

<syncfusion:ChromelessWindow
    x:Class="WPF_CalendarEdit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
    TitleFontSize="15"
	syncfusion:SkinStorage.VisualStyle="Metro"
    Title="ChromelessWindow Sample" Height="350" Width="525">
	<Grid>
	</Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window title font size

Title bar height

You can customize the caption height by setting the TitleBarHeight of ChromelessWindow.

<syncfusion:ChromelessWindow
    x:Class="WPF_CalendarEdit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
    xmlns:local="clr-namespace:WPF_CalendarEdit"
	TitleBarHeight="50"
	syncfusion:SkinStorage.VisualStyle="Metro"
    Title="ChromelessWindow Sample" Height="350" Width="525">
	<Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window title bar height

Title bar icon

You can set the caption icon by setting the Icon property.

<syncfusion:ChromelessWindow
    x:Class="WPF_CalendarEdit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
	Icon="App.ico"
    syncfusion:SkinStorage.VisualStyle="Metro"
    Title="ChromelessWindow Sample" Height="350" Width="525">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window icon

Customizing the border of ChromelessWindow

You can change the border color of the chromeless window by setting the ResizeBorderBrush property.

<syncfusion:ChromelessWindow
    x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	syncfusion:SkinStorage.VisualStyle="Metro"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
	ResizeBorderBrush="Red"
    Title="ChromelessWindow Sample" Height="350" Width="525">
	<Grid>
	</Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window border color