Material Design
是由谷歌开发的一种设计语言,旨在创建一个基于纸张和墨水的视觉效果的统一体验。它于 2014 年首次推出,目的是为了提供更一致、直观且视觉上引人入胜的用户界面设计。不仅被广泛应用于谷歌自己的产品(如 Android 操作系统、Gmail、Google Maps 等),也被许多其他开发者和设计师采用,成为现代数字设计的一个重要趋势。它通过结合技术和科学原则,创造出既实用又吸引人的用户界面。
现在将 Material Design
添加到我们之前的 Prism8
项目中 :
安装 NuGet 包
首先,需要安装 MaterialDesignThemes
和 MaterialDesignColors
这两个 NuGet
包。在 Visual Studio
中,可以通过以下方式进行安装:
- 打开项目。
- 点击 “工具” -> “NuGet 包管理器” -> “管理解决方案的 NuGet 包”。
- 在搜索框中搜索
MaterialDesignThemes
和MaterialDesignColors
。 - 选择这两个包并安装它们到项目中。
也可以通过 Package Manager Console
安装这些包
Install-Package MaterialDesignThemes
Install-Package MaterialDesignColors
更新 App.xaml
安装 NuGet 包后,需要在 App.xaml
中引入 Material Design 的资源。打开 App.xaml
文件,并添加以下代码:
<prism:PrismApplication x:Class="UI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:UI"
xmlns:prism="http://prismlibrary.com/">
<!--StartupUri="Page/MainWindow.xaml"-->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</prism:PrismApplication>
使用 Material Design 控件
然后就可以使用 Material Design 控件了
<Window x:Class="YourNamespace.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button md:ButtonAssist.CornerRadius="2" Style="{StaticResource MaterialDesignFlatButton}">
Click Me
</Button>
</Grid>
</Window>
Dialog 控件实现 UI
<Window x:Class="UI.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:UI"
mc:Ignorable="d"
xmlns:prism="http://prismlibrary.com/"
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="MainWindow" Height="450" Width="800">
<!-- 使用 Material Design 的背景和风格 -->
<md:DialogHost Background="#FFF">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--按钮面板-->
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Button Content="View A" Command="{Binding NavigateCommand}" CommandParameter="ViewA" Margin="5"/>
<Button Content="View B" Command="{Binding NavigateCommand}" CommandParameter="ViewB" Margin="5"/>
</StackPanel>
<!--导航内容区域-->
<ContentControl prism:RegionManager.RegionName="ContentRegion" Grid.Row="1"/>
</Grid>
</md:DialogHost>
</Window>