MahApps.Metro使用

最新推荐文章于 2024-08-24 07:42:00 发布

赤龙绕月

最新推荐文章于 2024-08-24 07:42:00 发布

阅读量1w

点赞数 1

分类专栏：个人博客 C# 文章标签： Metro C#

本文链接：https://blog.csdn.net/CHIHUN_LOVE/article/details/53944373

版权

本文详细介绍了MahApps.Metro的使用方法，包括下载、添加到项目、配置Window标签，以及App.xaml的设置。内容涵盖显示标题栏、图标、窗口位置记忆，以及修改标题栏样式。此外，还讲解了MahApps.Metro.Resources的使用，如何添加和使用图标，以及如何改变主题。文章进一步探讨了各种控件的使用，如Buttons、ContextMenu、DataGrid、Dialogs、FlipView等，提供了丰富的示例和代码片段。

摘要由CSDN通过智能技术生成

MahApps.Metro使用

下载MahApps.Metro

PM> Install-Package MahApps.Metro

MainWindow.xaml中添加

xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

然后将Window标签替换为如下标签

<Controls:MetroWindow x:Class="WpfApplication.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                  Title="MainWindow"
                  Height="600"
                  Width="800">

</Controls:MetroWindow>

MainWindow.xaml.cs添加

using MahApps.Metro.Controls;

namespace WpfApplication
{
  public partial class MainWindow : MetroWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

使用内置的样式App.xaml

App.xaml（v2.0.0和更新版本）

<Application x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
        <!-- Accent and AppTheme setting -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

App.xaml（v1.6.5及更早版本）

<Application x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
        <!-- Accent and AppTheme setting -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

显示标题栏、图标、最大化最小化按钮的显示

<Controls:MetroWindow x:Class="WpfApplication.MainWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                      Title="MainWindow"
                      Height="600"
                      Width="800"
					  Icon="mahapps.metro.logo2.ico"
					  ShowIconOnTitleBar="True"
					  ShowTitleBar="True">

	</Controls:MetroWindow>

WindowButtonCommands are the minimize, maximize/restore, and close buttons. You can hide the buttons with ShowMinButton="True|False", ShowMaxRestoreButton="True|False" and ShowCloseButton="True|False".

The visibility of the minimize and maximize/restore buttons are also effected by the ResizeMode. If ResizeMode="NoResize" the buttons are collapsed. If ResizeMode="CanMinimize" the maximize/restore button is collapsed.

记住窗口位置

已经废弃

aveWindowPosition=“True|False”(默认False选项）。将此属性设置为True将意味着在下一次发射，将被自动定位和尺寸对它的出口。这种设计为提高ux和速度发展为一个“管道”，UI是定期进行的。

修改标题栏

可以添加自己的控制 LeftWindowsCommands 或 RightWindowsCommands

<MetroWindow> ... </MetroWindow>

MainWindow.xaml.cs内添加：

<Controls:MetroWindow.RightWindowCommands>
  <Controls:WindowCommands>
    <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>

显示图标需要加载MahApps.Metro.Resources资源

MahApps.Metro.Resources使用

下载MahApps.Metro.Resources

PM> Install-Package MahApps.Metro.Resources

包括Entypo和Temparian的现代UI图标。

MainWindow.xaml文件中添加

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

使用

<Rectangle>
        <Rectangle.Fill>
            <VisualBrush Visual="{StaticResource appbar_add}" />
        </Rectangle.Fill>
    </Rectangle>

或者

<Rectangle Fill="Black">
	<Rectangle.OpacityMask>
		<VisualBrush Visual="{StaticResource appbar_add}" Stretch="Fill" />
	</Rectangle.OpacityMask>
</Rectangle>

MahApps.Metro.IconPacks

https://github.com/MahApps/MahApps.Metro.IconPacks

安装

Install-Package MahApps.Metro.IconPacks

Xaml中添加

xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

MahApps.Metro可以使用包含控件的MahApps.Metro.IconPacks以简单的方式使用这些令人敬畏的图标。

<Window x:Class="IconPacksTest.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        Title="IconPacks" Height="300" Width="300">

    <Grid>
        <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>

</Window>