Quiet
  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我

bajiu

  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我
Quiet主题
  • C#
  • style

Prism8 中添加 MaterialUI

bajiu
.Net客户端

2023-12-05 18:32:29

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>
上一篇

高斯分布

下一篇

Prism8简介

©2024 By bajiu.