如何使用 WindowChrome 在 WPF 自定义标题栏上显示默认按钮
How to show default buttons on WPF customized title bar using WindowChrome
我正在关注文章 Restyle Your Window,其中作者将标题栏上的最大化按钮显示为字符 #
。但我想给它显示一个默认按钮,如下所示:
目前我的自定义标题栏如下所示:
问题:我们如何修改下面的xaml来实现上面的?我在想也许我们只需要修改以下标签:
<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>
您无法在定义自定义 chrome window 样式时显示默认按钮,但您可以轻松地设置自定义按钮的样式,使其看起来像默认按钮。
按照我的建议使用 Segoe MDL2 Assets
字体系列 :
<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>
我正在关注文章 Restyle Your Window,其中作者将标题栏上的最大化按钮显示为字符 #
。但我想给它显示一个默认按钮,如下所示:
目前我的自定义标题栏如下所示:
问题:我们如何修改下面的xaml来实现上面的?我在想也许我们只需要修改以下标签:
<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>
您无法在定义自定义 chrome window 样式时显示默认按钮,但您可以轻松地设置自定义按钮的样式,使其看起来像默认按钮。
按照我的建议使用 Segoe MDL2 Assets
字体系列
<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>