WPF Material Design UI框架

前言

Material Design in xaml 是开源免费的ui框架,工控软件主打的就是简单界面。

以下简称MD

相关资源

MaterialDesignInXamlToolkit Github 地址
MD 快速启动
MD 案例压缩包

MD 框架使用

启动环境配置

安装Nuget包

App.xaml 配置

xml 复制代码
<Application x:Class="WpfApp1.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <!--添加MD 资源包-->
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Light"
                        PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary
                        Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

测试导入是否成功

MainWindow.xmal

xml 复制代码
<Window x:Class="WpfApp1.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:WpfApp1"
        xmlns:MD="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:Views="clr-namespace:WpfApp1.Views" mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="my_text" TargetType="TextBlock">
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Margin" Value="8" />
        </Style>
    </Window.Resources>
    <Window.DataContext>
        <!--需要命名来指定数据源-->
        <local:MainWindowViewModel x:Name="viewModel" />
    </Window.DataContext>
    <Grid>
        <!--不能直接写TitleValue,Binding数据源会有问题-->
        <MD:Card>
            <TabControl  MD:ColorZoneAssist.Mode="PrimaryLight"
                    >
                <TabItem Header="Tab 1">
                    
                </TabItem>
                <TabItem Header="Tab 2">

                </TabItem>
                <TabItem Header="Tab 3">

                </TabItem>
            </TabControl>
        </MD:Card>
    </Grid>
</Window>

MD 组件使用测试

Button

Card

xml 复制代码
<WrapPanel Margin="10">
    <Button Width="90" Content="Button" Margin="5"/>
    <Button Margin="5" >
        
        <MD:PackIcon Kind="Alarm" Width="30" Height="25"/>
    </Button>
</WrapPanel>

我后面想稍微改一下按钮,比如改个圆角,发现很麻烦,可能需要覆写控件模板。想想还是算了,先用官方的解决方案。先学套路,解决问题,再了解底层,扩展方法。

Chips

Color Tool

Colour Zones

ComboBoxes

Data Grids

Dialogs

Drawer

Elevation

Expander

Fields

Fields line up

Group Boxes

Icon Pack

Lists

Palette

Pickers

Progress Indicators

Rating Bar

Sliders

Smart Hint

Snackbar

Tabs

Toggles

Transitions

Trees

Typography

相关推荐
qiangshang99012610 小时前
WPF+MVVM入门学习
学习·wpf
DASXSDW10 小时前
Abp vNext-事件总线使用实现及解析
ui·wpf
纸照片10 小时前
【邪修玩法】如何在WPF中开放 RESTful API 服务
后端·wpf·restful
啊丢_13 小时前
WPF基本布局容器与控件
wpf
c#上位机16 小时前
wpf之RelativeSource用法总结
c#·wpf
BingeBlog17 小时前
[01] Qt的UI框架选择和对比
开发语言·c++·笔记·qt·ui·开源软件
jh_cao1 天前
(1)SwiftUI 的哲学:声明式 UI vs 命令式 UI
ui·swiftui·命令模式
心疼你的一切2 天前
使用Unity引擎开发Rokid主机应用的模型交互操作
游戏·ui·unity·c#·游戏引擎·交互
我的xiaodoujiao2 天前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
Larry_Yanan2 天前
QML学习笔记(二十四)QML的Keys附加属性
c++·笔记·qt·学习·ui