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

相关推荐
somethingGoWay3 小时前
wpf .netcore 导出docx文件
wpf·.netcore
somethingGoWay5 小时前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
我命由我123451 天前
Photoshop - Photoshop 创建图层蒙版
运维·学习·ui·课程设计·设计·ps·美工
self_myth1 天前
[特殊字符] 深入理解操作系统核心特性:从并发到分布式,从单核到多核的全面解析
windows·macos·wpf·harmonyos
c#上位机1 天前
wpf之TextBlock
c#·wpf
江拥羡橙2 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
江拥羡橙2 天前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
玉面小君2 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:ControlTheme 和 Style区别
c#·wpf·avalonia
c#上位机3 天前
wpf之Border
c#·wpf
SunflowerCoder3 天前
WPF迁移avalonia之图像处理(一)
图像处理·wpf·avalonia