如何调整MahApps.Metro窗口按钮位置至右上角而非居中?
如何将MahApps.Metro窗口的交互按钮移至右上角
我懂你想要的效果——把窗口的系统交互按钮(最小化、最大化、关闭)从默认的垂直居中位置挪到右上角,这样标题栏就能腾出空间放其他内容。结合你现有的MahApps.Metro代码,咱们可以通过自定义WindowButtonCommands的样式来实现这个需求,具体步骤如下:
步骤1:添加自定义按钮样式
在你的MetroWindow资源里定义一个新的样式,用来覆盖默认的系统按钮容器布局,把它的垂直对齐设为Top,并调整边距让按钮贴紧右上角:
<Controls:MetroWindow.Resources> <Style x:Key="CustomWindowButtonCommandsStyle" TargetType="{x:Type Controls:WindowButtonCommands}"> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Margin" Value="0,8,8,0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Controls:WindowButtonCommands}"> <StackPanel x:Name="PART_WindowButtons" Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Margin}"> <ContentPresenter x:Name="PART_MinButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowMinButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <ContentPresenter x:Name="PART_MaxButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowMaxRestoreButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <ContentPresenter x:Name="PART_CloseButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowCloseButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Controls:MetroWindow.Resources>
步骤2:应用样式到窗口
在你的MetroWindow标签里添加WindowButtonCommandsStyle属性,引用刚才定义的样式:
<Controls:MetroWindow x:Class="JRGrace.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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:JRGrace" Title="MainWindow" Height="350" Width="525" TitlebarHeight="100" WindowButtonCommandsStyle="{StaticResource CustomWindowButtonCommandsStyle}">
步骤3:(可选)统一右侧命令按钮的位置
为了让你已经添加的RightWindowCommands和系统按钮视觉上更统一,你可以给它也加上相同的顶部边距:
<Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands VerticalAlignment="Top" Margin="0,8,8,0"> <!-- 你的按钮内容 --> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands>
完整修改后的代码
把所有部分整合起来,最终的XAML代码如下:
<Controls:MetroWindow x:Class="JRGrace.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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:JRGrace" Title="MainWindow" Height="350" Width="525" TitlebarHeight="100" WindowButtonCommandsStyle="{StaticResource CustomWindowButtonCommandsStyle}"> <Controls:MetroWindow.Resources> <Style x:Key="CustomWindowButtonCommandsStyle" TargetType="{x:Type Controls:WindowButtonCommands}"> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Margin" Value="0,8,8,0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Controls:WindowButtonCommands}"> <StackPanel x:Name="PART_WindowButtons" Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Margin}"> <ContentPresenter x:Name="PART_MinButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowMinButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <ContentPresenter x:Name="PART_MaxButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowMaxRestoreButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <ContentPresenter x:Name="PART_CloseButton" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowCloseButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Controls:MetroWindow.Resources> <Controls:MetroWindow.TitleTemplate> <DataTemplate> <TextBlock Text="{TemplateBinding Content}" TextTrimming="CharacterEllipsis" VerticalAlignment="Bottom" Margin="8 -1 8 0" FontWeight="Light" FontSize="{DynamicResource WindowTitleFontSize}" FontFamily="{DynamicResource HeaderFontFamily}" /> </DataTemplate> </Controls:MetroWindow.TitleTemplate> <Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands VerticalAlignment="Top" Margin="0,8,8,0"> <Button Content="settings" /> <Button> <StackPanel Orientation="Horizontal"> <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"> <Rectangle.OpacityMask> <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" /> </Rectangle.OpacityMask> </Rectangle> <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" /> </StackPanel> </Button> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands> <Grid> <!-- 这里可以添加你需要的其他内容 --> </Grid> </Controls:MetroWindow>
这样修改后,系统交互按钮就会固定在标题栏的右上角,标题栏的中间和下方区域就可以自由放置你需要的其他控件了。
内容的提问来源于stack exchange,提问作者UporotayaPanda




