Блог

Вопрос: Можем ли мы изменить высоту строки заголовка, отображаемой в MahApps.Metro?

Подробности: Например, в следующем примере XAML от команды MahApps я хочу отобразить содержимое Deploy CupCake TextBlock под изображением кекса. Поэтому я удалил Orientation="Horizontal" его из StackPanel следующего XAML. Как показано на снимке ниже, содержимое Deploy 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>
 

Прежде всего, лучше использовать a для использования панели, которая распределяет доступное пространство между своим контентом , например, a Grid , чтобы предотвратить отключение контента, как в случае с StackPanel . Здесь шаблон данных определяет a Grid с двумя строками, где TextBlock масштабируется до нужного размера, а значок занимает оставшееся доступное пространство. Также обратите внимание на 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>
 

Того же результата можно было бы достичь и с помощью a DockPanel , где последний дочерний элемент (в данном случае значок) занимает оставшееся доступное пространство, поэтому важен порядок определенных элементов управления.

 <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">