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

相关推荐
源之缘-OFD先行者8 分钟前
GMap.NET + WPF:构建高性能 ADS-B 航空器追踪平台
.net·wpf·ads-b
Marzlam2 小时前
WPF学习路线
wpf
weixin_535455794 小时前
WPF设计学习记录滴滴滴2
学习·wpf
^@^lemon tea^@^5 小时前
WPF 浅述IsHitTestVisible属性
wpf·wpf 穿透
lixy5797 小时前
C# WPF 命令机制(关闭CanExecute自动触发,改手动)
c#·wpf
Marzlam14 小时前
一文了解WPF技术简介
wpf
arriettyandray19 小时前
C#/WPF学习系列之问题记录——使用不流畅
c#·wpf
余多多_zZ21 小时前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
长流小哥1 天前
可视化开发:用Qt实现Excel级动态柱状图
开发语言·c++·qt·ui
勘察加熊人1 天前
wpf+c#路径迷宫鼠标绘制
开发语言·c#·wpf