WPF自定义最大化最小化关闭按钮

当觉得界面自带的最大化最小化关闭按钮不好看，或者想换个位置的时候，你需要自定义最大化最小化关闭按钮

最大化按钮

最大化按钮有两种状态：最大化，跟还原状态两种显示方式。做法：定义command为SystemCommands.XXXCommand。本次使用了DataTemplateSelector，根据当前window的WindowState状态来判断当前窗体状态（如果没定义window需要在本窗体最开始，定义Name=“window”）

前端xaml代码

<ContentControl Name="MyContentControl" Content="{Binding ElementName=window,Path=WindowState,Mode=TwoWay}"><ContentControl.ContentTemplateSelector><local:MaxTemplateSelector MaxTemplate="{StaticResource Max}" RestoreTemplate="{StaticResource Restore}"/></ContentControl.ContentTemplateSelector></ContentControl>

最大化模板

<DataTemplate x:Key="Max"><Button x:Name="PART_Max" Background="Transparent" Style="{StaticResource MetroWindowButtonStyle1}" Command="{x:Static SystemCommands.MaximizeWindowCommand}"Width="46"Focusable="False"IsEnabled="{Binding IsMaxRestoreButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}}}"ToolTip="最大化"UseLayoutRounding="True"><!-- normal state --><Path x:Name="PART_MaxPath"Width="10"Height="10"Data="F1M0,0L0,9 9,9 9,0 0,0 0,3 8,3 8,8 1,8 1,3z"Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"SnapsToDevicePixels="True" ></Path></Button></DataTemplate>

还原模板

<DataTemplate x:Key="Restore"><Button x:Name="PART_Restore" Background="Transparent" Style="{StaticResource MetroWindowButtonStyle1}" Command="{x:Static SystemCommands.RestoreWindowCommand}"Width="46"Focusable="False"IsEnabled="{Binding IsMaxRestoreButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}}}"ToolTip="向下还原"UseLayoutRounding="True"><!-- normal state --><Canvas Width="12"Height="12"HorizontalAlignment="Center"VerticalAlignment="Center"><Path x:Name="PART_RestorePath"Data="F1M0,10L0,3 3,3 3,0 10,0 10,2 4,2 4,3 7,3 7,6 6,6 6,5 1,5 1,10z M1,10L7,10 7,7 10,7 10,2 9,2 9,6 6,6 6,9 1,9z"Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"RenderOptions.EdgeMode="Aliased"SnapsToDevicePixels="True"Stretch="Uniform" /></Canvas></Button></DataTemplate>

后台TemplateSelector代码

/// <summary>/// 最大化与还原按钮状态模板选择器/// </summary>public class MaxTemplateSelector : DataTemplateSelector{public DataTemplate MaxTemplate { get; set; }public DataTemplate RestoreTemplate { get; set; }public override DataTemplate SelectTemplate(object item, DependencyObject container){//Window win = Application.Current.MainWindow;//WindowState state = win.WindowState;//必须判断是否为空，否则设计器无法操作if (item == null)return null;WindowState state = (WindowState)item;switch (state){case WindowState.Normal:return MaxTemplate;case WindowState.Maximized:return RestoreTemplate;}return null;}}

window最前面定义CommandBinding。

<mandBindings><CommandBinding Command="{x:Static SystemCommands.RestoreWindowCommand}" Executed="RestoreWindow_Exec" /><CommandBinding Command="{x:Static SystemCommands.MaximizeWindowCommand}" Executed="MaximizeWindow_Exec" /></mandBindings>

定义Executed事件方法

private void RestoreWindow_Exec(object sender, ExecutedRoutedEventArgs e){SystemCommands.RestoreWindow(this);}private void MaximizeWindow_Exec(object sender, ExecutedRoutedEventArgs e){SystemCommands.MaximizeWindow(this);}

最小化按钮

<Button x:Name="PART_Min" Background="Transparent" Style="{StaticResource MetroWindowButtonStyle1}" Command="{x:Static SystemCommands.MinimizeWindowCommand}"Width="46"Focusable="False"IsEnabled="{Binding IsMinButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}}}"ToolTip="最小化"UseLayoutRounding="True"><Path Width="10"Height="10"HorizontalAlignment="Center"VerticalAlignment="Center"Data="M0,40 L96,40 96,48 0,48 0,40z"Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"RenderOptions.EdgeMode="Aliased"SnapsToDevicePixels="True"Stretch="Uniform" /></Button>

window最前面定义CommandBinding。

<mandBindings><CommandBinding Command="{x:Static SystemCommands.MinimizeWindowCommand}" Executed="MinimizeWindow_Exec" /></mandBindings>

定义Executed事件方法

private void MinimizeWindow_Exec(object sender, ExecutedRoutedEventArgs e){SystemCommands.MinimizeWindow(this);}

关闭按钮

<Button x:Name="PART_Close" Background="Transparent" Style="{StaticResource MetroWindowButtonStyle1}"Width="46"Focusable="False"IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}}, Path=IsCloseButtonEnabled, Mode=OneWay}"ToolTip="关闭"UseLayoutRounding="True"><i:Interaction.Triggers><i:EventTrigger EventName="Click"><ei:CallMethodAction TargetObject="{Binding ElementName=window}" MethodName="Close"/></i:EventTrigger></i:Interaction.Triggers><Grid><Line HorizontalAlignment="Center"VerticalAlignment="Center"SnapsToDevicePixels="True"Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"X1="0"X2="10"Y1="0"Y2="10" /><Line HorizontalAlignment="Center"VerticalAlignment="Center"SnapsToDevicePixels="True"Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"X1="0"X2="10"Y1="10"Y2="0" /></Grid></Button>

.2.25应评论区要求更新

中间引用的style: MetroWindowButtonStyle1

我这个程序UI框架是依赖于mahapp.metro，所以会引用到mahapp.metro的MetroWindowButtonStyle，然后我自己只是根据业务需求自定义了一下，本质可以直接用MetroWindowButtonStyle

<Style x:Key="MetroWindowButtonStyle1"TargetType="{x:Type Button}"BasedOn="{StaticResource MetroWindowButtonStyle}"><Setter Property="Foreground" Value="White"/><Setter Property="Opacity" Value="1"/></Style>

看了下，MetroWindowButtonStyle是这么定义了

<Style x:Key="MetroWindowButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroBaseWindowButtonStyle}"><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="IsTabStop" Value="false" /><Setter Property="Width" Value="34" /><Setter Property="MaxHeight" Value="34" /><Setter Property="Padding" Value="0" /></Style>