Getting Started with WPF Chromeless Window

20 Jul 20267 minutes to read

This section explains how to add and configure the ChromelessWindow control in a WPF application.

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet packages that need to be added as references 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

The minimum NuGet package required is Syncfusion.Shared.WPF. Refer to Control Dependencies for the list of additional dependent packages and the supported Syncfusion version.

Creating a 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 the ChromelessWindow.

Add ChromelessWindow

The following steps help you add ChromelessWindow to your project:

  1. Create a WPF project and add a reference to the following assembly:
    • Syncfusion.Shared.WPF.dll

    You can also install the Syncfusion.Shared.WPF NuGet package.

  2. Include an XML namespace for the assembly in 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>

  3. Change the Window to ChromelessWindow.

    <syncfusion:ChromelessWindow 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">
</syncfusion:ChromelessWindow>

  4. 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 the title bar

The following sections describe the most common title bar customizations. For a complete list of properties, see Title bar Customization.

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"
    Title="ChromelessWindow Sample" Height="350" Width="525">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window title bar backcolor

Title bar font

The font size 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"
    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 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" 
    xmlns:local="clr-namespace:WPF_CalendarEdit"
	TitleBarHeight="50"
    Title="ChromelessWindow Sample" Height="350" Width="525">
	<Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window title bar height

Title bar text alignment

Use the TitleTextAlignment property to set the alignment of the title text in the ChromelessWindow. The following alignment options are available:

  • Left - Aligns the title text to the left.
  • Right - Aligns the title text to the right.
  • Center - Centers the title text within the title bar.
  • Stretch - Stretches the title text to fill the available space between the window icon and the caption buttons.
<syncfusion:ChromelessWindow x:Class="Chromeless_Window_Sample.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chromeless_Window_Sample"
        mc:Ignorable="d" xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        TitleTextAlignment="Center"
        Title="Chromeless Window Sample"
        Height="350" Width="550">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

Title text alignment

Title bar icon

You can set the caption icon by setting the Icon property. The icon file (for example, App.ico) must be added to the project with its Build Action set to Resource.

<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"
    Title="ChromelessWindow Sample" Height="350" Width="525">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

wpf chromeless window icon

Title bar icon alignment

Use the IconAlignment property to align the title bar icon in the ChromelessWindow.

The following alignment options are available:

  • Left - Aligns the icon to the left side of the title bar.
  • Right - Aligns the icon to the right side of the title bar.
<syncfusion:ChromelessWindow x:Class="Chromeless_Window_Sample.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chromeless_Window_Sample"
        mc:Ignorable="d" xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        TitleTextAlignment="Center"
        Title="Chromeless Window Sample" IconAlignment="Left"
        Height="350" Width="550">
    <Grid>
    </Grid>
</syncfusion:ChromelessWindow>

Chromeless Window icon alignment

Customizing the border of ChromelessWindow

You can change the border color of the ChromelessWindow by setting the ResizeBorderBrush property. For full border customization, see Customizing Border of the ChromelessWindow.

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

Theme

ChromelessWindow supports various built-in themes. Refer to the following links to apply themes to the ChromelessWindow:

NOTE

View Getting Started Sample in GitHub