You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何调整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

火山引擎 最新活动