I'm following the article Restyle Your Window where the author is showing maximize button on title bar as character #
. But I would like to show it a default button as shown below:
Currently my customized title bar looks like the following:
Question: How can we modify the following xaml to achieve the above? I am thinking may be we only need to modify following tag:
<Button x:Name="btnRestore" Click="MaximizeRestoreClick" Content="#"
DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />
MyWindowStyle.xaml:
<ResourceDictionary x:Class="WPFtest.WindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
xmlns:local="clr-namespace:WPFtest">
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="30" CornerRadius="4" GlassFrameThickness="0" NonClientFrameEdges="None" ResizeBorderThickness="5" UseAeroCaptionButtons="False" />
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="Gray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="5,30,5,5">
<AdornerDecorator>
<ContentPresenter />
</AdornerDecorator>
</Border>
<DockPanel Height="20" VerticalAlignment="Top" LastChildFill="False">
<TextBlock Margin="5,0,0,0" VerticalAlignment="Center" DockPanel.Dock="Left" FontSize="12" Foreground="White"
Text="{TemplateBinding Title}" />
<Button x:Name="btnClose" Click="CloseClick" Content="X" DockPanel.Dock="Right"
WindowChrome.IsHitTestVisibleInChrome="True" />
<Button x:Name="btnRestore" Click="MaximizeRestoreClick" Content="#"
DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />
<Button x:Name="btnMinimize" VerticalContentAlignment="Bottom" Click="MinimizeClick"
Content="_" DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />
</DockPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
You cannot show the default buttons when you define a custom chrome window style, but you could easily style your custom buttons to look like the default ones.
Use the Segoe MDL2 Assets
font family as I suggested here:
<Button x:Name="btnMinimize" Content=""
Padding="0 1 1 0"
VerticalContentAlignment="Bottom"
Click="MinimizeClick" DockPanel.Dock="Right"
WindowChrome.IsHitTestVisibleInChrome="True">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot" Background="Transparent" Width="44" Height="30">
<TextBlock x:Name="txt" Text="{TemplateBinding Content}"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
HorizontalAlignment="Center" VerticalAlignment="Center"
RenderOptions.ClearTypeHint="Auto"
TextOptions.TextRenderingMode="Aliased"
TextOptions.TextFormattingMode="Display"
Margin="{TemplateBinding Padding}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="LayoutRoot" Property="Background" Value="#E5E5E5"/>
<Setter TargetName="txt" Property="Foreground" Value="#000000"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>