改变标题栏的高度

Question

问题: MahApps.Metro中显示的标题栏的高度可以改变吗？

Details: 比如下面MahApps团队的XAML example，我想显示内容Deploy CupCake - TextBlock - 在 CupCake 的图像下方。所以我把下面XAML中的StackPanel去掉了Orientation="Horizontal"。如下图所示，内容 Deploy CupCake 现在显示在 CupCake 图像下方 - 但它几乎隐藏了所有内容。我们怎样才能让这个内容全部显示在 CupCake 图片下面？

带有 MahApps.Metro 的工具栏快照：只有大约 10% 的内容显示在图像下方。

<mah:MetroWindow x:Class="SampleApp.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
                 xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 Title="MainWindow"
                 Width="800"
                 Height="450"
                 GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
                 ResizeMode="CanResizeWithGrip"
                 WindowStartupLocation="CenterScreen"
                 mc:Ignorable="d">

  <mah:MetroWindow.LeftWindowCommands>
    <mah:WindowCommands>
      <Button Click="LaunchGitHubSite" ToolTip="Open up the GitHub site">
        <iconPacks:PackIconModern Width="22"
                                  Height="22"
                                  Kind="SocialGithubOctocat" />
      </Button>
    </mah:WindowCommands>
  </mah:MetroWindow.LeftWindowCommands>

  <mah:MetroWindow.RightWindowCommands>
    <mah:WindowCommands>
      <Button Click="DeployCupCakes" Content="Deploy CupCakes">
        <Button.ContentTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <iconPacks:PackIconModern Width="22"
                                        Height="22"
                                        VerticalAlignment="Center"
                                        Kind="FoodCupcake" />
              <TextBlock Margin="4 0 0 0"
                         VerticalAlignment="Center"
                         Text="{Binding}" />
            </StackPanel>
          </DataTemplate>
        </Button.ContentTemplate>
      </Button>
    </mah:WindowCommands>
  </mah:MetroWindow.RightWindowCommands>

  <Grid>
    <!--  Your content  -->
  </Grid>
</mah:MetroWindow>

Answer 1

首先，最好使用一个在其内容中分配可用space的面板，例如Grid，以防止像 StackPanel 那样切断内容。在这里，数据模板定义了一个包含两行的 Grid，其中 TextBlock 缩放到所需的大小，图标占用剩余的可用 space。还要注意图标的HorizontalAlignment，它是居中的。

<DataTemplate>
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <iconPacks:PackIconModern Grid.Row="0"
                                Width="22"
                                Height="22"
                                HorizontalAlignment="Center"
                                Kind="FoodCupcake" />
      <TextBlock Grid.Row="1"
                 Margin="4 0 0 0"
                 VerticalAlignment="Center"
                 Text="{Binding}" />
   </Grid>
</DataTemplate>

同样的结果也可以使用 DockPanel 来实现，其中最后一个 child（在本例中是图标）占据了剩余的可用 space，因此顺序定义的控件很重要。

<DataTemplate>
   <DockPanel>
      <TextBlock DockPanel.Dock="Bottom"
                 Margin="4 0 0 0"
                 VerticalAlignment="Center"
                 Text="{Binding}" />
      <iconPacks:PackIconModern DockPanel.Dock="Top"
                                Width="22"
                                Height="22"
                                HorizontalAlignment="Center"
                                Kind="FoodCupcake" />
   </DockPanel>
</DataTemplate>

在这两种情况下，您都会得到下面的结果，一个带有居中图标的按钮和下面的文本。

要使按钮更加突出，请使用 TitleBarHeight 属性更改标题栏高度。

<mah:MetroWindow x:Class="SampleApp.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
         xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         Title="MainWindow"
         Width="800"
         Height="450"
         GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
         ResizeMode="CanResizeWithGrip"
         WindowStartupLocation="CenterScreen"
         mc:Ignorable="d"
         TitleBarHeight="50">

改变标题栏的高度

Change the height of the title bar

wpf

xaml

mahapps.metro