Category / Section
How to customize the ChromelessWindow for Metro Theme?
1 min read
You can customize the ChromelessWindow for Metro Theme by editing the default template. In the following code, the order of the Icon Image and Title TextBlock of the TitleBar of ChromelessWindow for Metro theme is rearranged.
App.xaml
<Application x:Class="ChromelessWindow_Metro.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="IconBackgroundBrush" Color="White"/>
<ControlTemplate x:Key="ChromelessWindowTemplate1" TargetType="{x:Type syncfusion:ChromelessWindow}">
<AdornerDecorator x:Name="Part_AdornerDecorator">
<Border Name="OuterBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding ResizeBorderBrush}" Margin="{TemplateBinding Margin}" BorderThickness="{TemplateBinding ResizeBorderThickness}">
<Border Name="InnerBorder">
<Grid x:Name="RootGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.RowSpan="2" Background="{TemplateBinding Background}" CornerRadius="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:ChromelessWindow}}, Path=CornerRadius}">
</Border>
<Border Name="ContentAreaBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.Row="1">
<Grid x:Name="ChildGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<syncfusion:ResizeGripStyle x:Name="PART_Resizegrip" Style="{TemplateBinding ResizeGripStyle}" HorizontalAlignment="right" VerticalAlignment="Bottom" Visibility="Collapsed" IsTabStop="False" Cursor="SizeNWSE" Margin="0,0,3,3" />
<ContentPresenter Name="contentpresenter" />
</Grid>
</Border>
<Border Name="TitleBarBorder" Grid.Row="0">
<syncfusion:TitleBar VerticalAlignment="Top" Template="{TemplateBinding TitleBarTemplate}" Foreground="{TemplateBinding Foreground}" x:Name="PART_TitleBar" Background="{TemplateBinding TitleBarBackground}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="{StaticResource IconBackgroundBrush}">
<Image x:Name="PART_Icon" syncfusion:WindowChrome.IsHitTestVisibleInChrome="True" Grid.Column="1" Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:ChromelessWindow}}, Path=Icon}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,0,6,0" MaxWidth="16" MaxHeight="16" MinWidth="16" MinHeight="16"
/>
</Border>
<TextBlock Focusable="False" Grid.Column="1"
Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:ChromelessWindow}}, Path=TitleBarForeground}" Text="{TemplateBinding Title}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
HorizontalAlignment="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:ChromelessWindow}}, Path=TitleTextAlignment}"
x:Name="TitlePresenter" FontFamily="{DynamicResource MetroFontFamily}" Margin="5,5,5,5" />
<StackPanel x:Name="MinMaxCloseStackPanel" Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,10,0" VerticalAlignment="Center">
<syncfusion:TitleButton syncfusion:WindowChrome.IsHitTestVisibleInChrome="True" Command="syncfusion:ChromelessWindow.ToggleMinimizedState" x:Name="MinimizeButton" Template="{TemplateBinding MinimizeButtonTemplate}" />
<syncfusion:TitleButton syncfusion:WindowChrome.IsHitTestVisibleInChrome="True" Command="syncfusion:ChromelessWindow.ToggleMaximizedState" Visibility="Collapsed" x:Name="PART_MaximizeButton" Template="{TemplateBinding MaximizeButtonTemplate}" Margin="0,0,4,0" />
<syncfusion:TitleButton syncfusion:WindowChrome.IsHitTestVisibleInChrome="True" Command="syncfusion:ChromelessWindow.ToggleMaximizedState" Visibility="Collapsed" x:Name="PART_RestoreButton" Template="{TemplateBinding RestoreButtonTemplate}" Margin="0,-2,5,0" />
<syncfusion:TitleButton syncfusion:WindowChrome.IsHitTestVisibleInChrome="True" Command="syncfusion:ChromelessWindow.CloseWindow" x:Name="CloseButton" Template="{TemplateBinding CloseButtonTemplate}" />
</StackPanel>
</Grid>
</syncfusion:TitleBar>
</Border>
</Grid>
</Border>
</Border>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
<Setter Property="Height" Value="40" TargetName="PART_TitleBar" />
<Setter Property="MinHeight" Value="20" TargetName="PART_Icon" />
<Setter Property="MaxHeight" Value="20" TargetName="PART_Icon" />
<Setter Property="MinWidth" Value="20" TargetName="PART_Icon" />
<Setter Property="Margin" Value="10,0,10,0" TargetName="PART_Icon" />
<Setter Property="Margin" Value="5,5,10,5" TargetName="TitlePresenter" />
<Setter Property="MaxWidth" Value="20" TargetName="PART_Icon" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Margin" TargetName="PART_MaximizeButton" Value="0,0,10,0" />
<Setter Property="Margin" TargetName="PART_RestoreButton" Value="0,-4,10,0" />
<Setter Property="Margin" TargetName="MinimizeButton" Value="0,0,5,0" />
</Trigger>
<Trigger Property="UseNativeChrome" Value="False">
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:ChromelessWindow}}, Path=CornerRadius}" />
</Trigger>
<Trigger Property="ResizeMode" Value="NoResize">
<Setter Property="Visibility" Value="Collapsed" TargetName="MinimizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton" />
<Setter Property="ResizeBorderThickness" Value="1" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanMinimize" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton" />
<Setter Property="IsEnabled" Value="False" TargetName="PART_MaximizeButton" />
<Setter Property="IsEnabled" Value="False" TargetName="PART_RestoreButton" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanMinimize" />
<Condition Property="WindowState" Value="Maximized" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" TargetName="PART_RestoreButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton" />
<Setter Property="IsEnabled" Value="False" TargetName="PART_MaximizeButton" />
<Setter Property="IsEnabled" Value="False" TargetName="PART_RestoreButton" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResize" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" TargetName="MinimizeButton" />
<Setter Property="Visibility" Value="Visible" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResize" />
<Condition Property="WindowState" Value="Maximized" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" TargetName="MinimizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Visible" TargetName="PART_RestoreButton" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" TargetName="PART_Resizegrip" />
<Setter Property="Visibility" Value="Visible" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip" />
<Condition Property="WindowState" Value="Maximized" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_Resizegrip" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Visible" TargetName="PART_RestoreButton" />
</MultiTrigger>
<Trigger Property="IsActive" Value="False">
<Setter Property="Effect" TargetName="OuterBorder">
<Setter.Value>
<DropShadowEffect BlurRadius="20" Direction="320" ShadowDepth="0" Color="Black" Opacity="0.8" />
</Setter.Value>
</Setter>
<Setter Property="TitleBarForeground" Value="#FFB1B1B1" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="NoResize" />
<Condition Property="WindowState" Value="Maximized" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" TargetName="MinimizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_MaximizeButton" />
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_RestoreButton" />
<Setter Property="Margin" Value="0" TargetName="OuterBorder" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="WindowStyle" Value="None" />
<Condition Property="WindowState" Value="Maximized" />
<Condition Property="HideTaskBar" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" TargetName="TitleBarBorder" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="MinimizeButtonTemplate" TargetType="{x:Type Button}">
<Border Name="minborder" BorderThickness="1" CornerRadius="0" Background="Transparent" Margin="0,2,0,2" Height="25" Width="25" SnapsToDevicePixels="True">
<Path x:Name="minpath" Data="M0.5,0.5 L8.5,0.5 L8.5,2.5 L0.5,2.5 z" Fill="{StaticResource MetroPathBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="2" Margin="2,0,0,0" Stretch="Fill" Stroke="{StaticResource MetroPathBrush}" Width="9" SnapsToDevicePixels="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
<Setter Property="Width" TargetName="minborder" Value="35" />
<Setter Property="Height" TargetName="minborder" Value="35" />
<Setter Property="Width" Value="18" TargetName="minpath" />
<Setter Property="Height" Value="4" TargetName="minpath" />
<Setter Property="Margin" Value="4,0,0,0" TargetName="minpath" />
<Setter Property="Fill" TargetName="minpath" Value="{StaticResource pathbrush}" />
<Setter Property="Stroke" TargetName="minpath" Value="{StaticResource pathbrush}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="syncfusion:SkinStorage.EnableTouch" Value="False" />
<Condition Property="IsMouseOver" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="minpath" Property="Fill" Value="{StaticResource MetroHoverPathBrush}" />
<Setter TargetName="minpath" Property="Stroke" Value="{StaticResource MetroHoverPathBrush}" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="minpath" Property="Fill" Value="{StaticResource MetroHoverPathBrush}" />
<Setter TargetName="minpath" Property="Stroke" Value="{StaticResource MetroHoverPathBrush}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsActive,RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ChromelessWindow}}}" Value="False">
<Setter TargetName="minpath" Property="Fill" Value="#FFB1B1B1" />
<Setter TargetName="minpath" Property="Stroke" Value="#FFB1B1B1" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="MaximizeButtonTemplate" TargetType="{x:Type Button}">
<Border SnapsToDevicePixels="true" x:Name="maxborder" Width="15" Height="15" Background="Transparent" BorderThickness="0"
BorderBrush="Transparent">
<Grid SnapsToDevicePixels="true" x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="8">
<Path Name="pathButton" SnapsToDevicePixels="True" Stretch="Fill" StrokeThickness="1"
Stroke="{StaticResource MetroPathBrush}"
Data="M1,1 L8,1 L8,8 L1,8 z M1,2 L8,2"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="8">
</Path>
<Border SnapsToDevicePixels="True" x:Name="touchpath" Visibility="Collapsed" BorderBrush="{StaticResource pathbrush}" BorderThickness="2,4,2,2" HorizontalAlignment="Center" VerticalAlignment="center" Height="16" Width="18" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
<Setter Property="Width" TargetName="maxborder" Value="20" />
<Setter Property="Height" TargetName="maxborder" Value="16" />
<Setter Property="Width" Value="20" TargetName="grid" />
<Setter Property="Height" Value="16" TargetName="grid" />
<Setter Property="Visibility" Value="Visible" TargetName="touchpath" />
<Setter Property="Visibility" Value="Collapsed" TargetName="pathButton" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="syncfusion:SkinStorage.EnableTouch" Value="False" />
<Condition Property="IsMouseOver" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="pathButton" Property="Stroke" Value="{DynamicResource MetroHoverPathBrush}" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="pathButton" Property="Stroke" Value="{DynamicResource MetroHoverPathBrush}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsActive,RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ChromelessWindow}}}" Value="False">
<Setter TargetName="pathButton" Property="Stroke" Value="#FFB1B1B1" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="RestoreButtonTemplate" TargetType="{x:Type Button}">
<Grid>
<Grid x:Name="minButton" Height="7" Margin="0,3,0,0" Width="7.5">
<Border x:Name="bd1" BorderThickness="1,2,1,1" SnapsToDevicePixels="True" Background="White" BorderBrush="{StaticResource MetroPathBrush}">
<Rectangle x:Name="rect1" Fill="White" Height="6" Margin="0,0,-2,-4" HorizontalAlignment="Right" Width="5" Stroke="{StaticResource MetroPathBrush}" />
</Border>
</Grid>
<Grid x:Name="touchminButton" Visibility="Collapsed" Height="12" Margin="0,3,0,0" Width="14">
<Border x:Name="bd2" BorderThickness="1,2,1,1" SnapsToDevicePixels="True" Background="White" BorderBrush="{StaticResource pathbrush}">
<Rectangle x:Name="rect2" Fill="White" Height="12" Margin="0,0,-4,-8" HorizontalAlignment="Right" Width="10" Stroke="{StaticResource pathbrush}" />
</Border>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
<Setter Property="Visibility" Value="Collapsed" TargetName="minButton" />
<Setter Property="Visibility" Value="Visible" TargetName="touchminButton" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsActive,RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ChromelessWindow}}}" Value="False">
<Setter TargetName="rect2" Property="Stroke" Value="#FFB1B1B1" />
<Setter TargetName="bd1" Property="BorderBrush" Value="#FFB1B1B1" />
</DataTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="syncfusion:SkinStorage.EnableTouch" Value="False" />
<Condition Property="IsMouseOver" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="rect1" Property="Stroke" Value="{DynamicResource MetroHoverPathBrush}" />
<Setter TargetName="bd1" Property="BorderBrush" Value="{DynamicResource MetroHoverPathBrush}" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="rect1" Property="Stroke" Value="{DynamicResource MetroHoverPathBrush}" />
<Setter TargetName="bd1" Property="BorderBrush" Value="{DynamicResource MetroHoverPathBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="CloseButtonTemplate" TargetType="{x:Type Button}">
<Border Width="12" x:Name="border" Cursor="Arrow" Background="Transparent">
<Grid x:Name="grid" Height="10" Width="1.5">
<Rectangle x:Name="rect1" SnapsToDevicePixels="True" Fill="{StaticResource MetroPathBrush}" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform Angle ="-49" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="rect2" SnapsToDevicePixels="True" Fill="{StaticResource MetroPathBrush}" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform Angle ="48" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
<Setter Property="Width" TargetName="border" Value="24" />
<Setter Property="Width" TargetName="grid" Value="3" />
<Setter Property="Height" TargetName="grid" Value="22" />
<Setter Property="Fill" TargetName="rect1" Value="{StaticResource pathbrush}" />
<Setter Property="Fill" TargetName="rect2" Value="{StaticResource pathbrush}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsActive,RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ChromelessWindow}}}" Value="False">
<Setter TargetName="rect1" Property="Fill" Value="#FFB1B1B1" />
<Setter TargetName="rect2" Property="Fill" Value="#FFB1B1B1" />
</DataTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="syncfusion:SkinStorage.EnableTouch" Value="False" />
<Condition Property="IsMouseOver" Value="true" />
</MultiTrigger.Conditions>
<Setter TargetName="rect1" Property="Fill" Value="{DynamicResource MetroHoverPathBrush}" />
<Setter TargetName="rect2" Property="Fill" Value="{DynamicResource MetroHoverPathBrush}" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="rect1" Property="Fill" Value="{DynamicResource MetroHoverPathBrush}" />
<Setter TargetName="rect2" Property="Fill" Value="{DynamicResource MetroHoverPathBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
MainWindow.xaml
<syncfusion:ChromelessWindow x:Class="ChromelessWindow_Metro.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="http://schemas.syncfusion.com/wpf"
syncfusion:SkinStorage.VisualStyle="Metro"
Template="{StaticResource ChromelessWindowTemplate1}">
<Grid>
<RichTextBox Padding="50">
</RichTextBox>
</Grid>
</syncfusion:ChromelessWindow>
The following screenshot illustrates the output of the above code example.
Figure 1: ChromelessWindow for Metro Theme
Conclusion
I hope you enjoyed learning about how to customize the ChromelessWindow for Metro Theme.
You can refer to our WPF ChromelessWindow feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF ChromelessWindow documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
