C# WPF之Material Design自定义颜色
C# WPF之Material Design自定义颜色
阅读导航
- 本文背景
- 代码实现
- 本文参考
1. 本文背景
主要介绍使用Material Design开源控件库的自定义颜色功能
2. 代码实现
使用 .Net Core 3.1 创建名为 “CustomColorDemo” 的WPF模板项目,添加两个个Nuget库:MaterialDesignThemes、MaterialDesignColors。
MaterialDesign控件库
2.1 引入MD控件样式
文件【App.xaml】
<Application x:Class="CustomColorDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="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.MergedDictionaries>
<!--PRIMARY-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#349fda"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#333333"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#0288d1"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#015f92"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
<!--ACCENT-->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#689f38"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
</ResourceDictionary>
</Application.Resources>
</Application>
2.2 展示界面
文件【MainWindow.xaml】代码:
<Window x:Class="CustomColorDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource MaterialDesignRaisedLightButton}" Width="90" Content="LIGHT" Margin="10"/>
<Button Style="{StaticResource MaterialDesignRaisedButton}" Width="90" Content="MID" Margin="10"/>
<Button Style="{StaticResource MaterialDesignRaisedDarkButton}" Width="90" Content="DARK" Margin="10"/>
<Button Style="{StaticResource MaterialDesignRaisedAccentButton}" Width="90" Content="ACCENT" Margin="10"/>
</StackPanel>
<GroupBox Header="USING ACCENT" materialDesign:ColorZoneAssist.Mode="Accent">
<StackPanel Orientation="Horizontal">
<DatePicker Width="100" Margin="10"/>
<CheckBox VerticalAlignment="Center" Content="Check Me" IsChecked="True" Margin="10"/>
<ToggleButton Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</GroupBox>
<GroupBox Header="USING DARK" materialDesign:ColorZoneAssist.Mode="Dark">
<StackPanel Orientation="Horizontal">
<DatePicker Width="100" Margin="10"/>
<CheckBox VerticalAlignment="Center" Content="Check Me" IsChecked="False" Margin="10"/>
<ToggleButton IsChecked="True" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
</GroupBox>
</StackPanel>
</Grid>
</Window>
4个按钮使用MD控件4种样式(LIGHT、MID、DARK、ACCENT),附加属性 materialDesign:ColorZoneAssist.Mode 可以修改 GroupBox 的 Header 背景色,主要看 GroupBox 内的控件,CheckBox 与 ToggleButton 的外观已经修改。
3.参考
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明本文地址:https://dotnet9.com/7187.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号,本站会及时推送最新技术文章
C# WPF之Material Design自定义颜色的更多相关文章
- 开发Google Material Design风格的WPF程序
今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/Ma ...
- Open-source Tutorial - Material Design for WPF UI
安装 Material Design Themes 通过 NuGet 包管理器搜索自动安装 通过 NuGet 包管理器控制台手动安装 Install-Package MaterialDesignThe ...
- 在 WinForm/WPF 下制作 Google Material Design 风格程序
国内社区没有,顺手转.WinForm: https://github.com/IgnaceMaes/MaterialSkin演示:https://www.youtube.com/watch?v=A8o ...
- 直接拿来用!十大Material Design开源项目
来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...
- 十大Material Design开源项目
介于拟物和扁平之间的Material Design自面世以来,便引起了很多人的关注与思考,就此产生的讨论也不绝于耳.本文详细介绍了在Android开发者圈子里颇受青睐的十个Material Desig ...
- [经验总结]material design效果与开发总结
首先贴一个參考过的文章,写的不错: 在低版本号android系统上实现Material design应用 以下是工作中总结出来的,列出了在<5.0的设备是怎样实现material design的 ...
- Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
- Material Design Animation
Material Design Animation Authentic motion 真实的运动 运动以一种优美流动的形式描述了空间关系,功能和目的. Mass and weight: 质量和重量 在 ...
- Material Design 概念,环境和基本属性
Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面. 设计概念 M ...
随机推荐
- Kafka网络模型和通信流程剖析
1.概述 最近有同学在学习Kafka的网络通信这块内容时遇到一些疑问,关于网络模型和通信流程的相关内容,这里笔者将通过这篇博客为大家来剖析一下这部分内容. 2.内容 Kafka系统作为一个Messag ...
- windows下使用pycharm配置python的virtualenv环境
环境:win10 python2.7.10(64) 在path中配置python环境 注意:我这边的环境是py2和py3共存的,但是我这边默认使用的是py2. 在virtualenv环境中安装指定的p ...
- 利用Atomic, ThreadLocal, 模仿AQS, ReentrantLock
/** * @description 队列同步器,利用原子整形模仿AQS,非公平锁(简单自适应自旋) * @since 2020/2/4 */ public class QueueSynchroniz ...
- session的属性设置
2. session的属性设置 先看案例: 登陆页面: <%@page contentType="text/html;charset=gb2312"%> & ...
- VC简单操作mysql
#include <iostream> #include <winsock.h> #include <mysql.h> #pragma comment(lib, & ...
- Exchange邮件服务器安全
Exchange是由微软推出的用于企业环境中部署的邮件服务器.Exchange在逻辑上分为三个层次:网络层(network layer).目录层(directory layer).消息层(messag ...
- Codeforces_492_E
http://codeforces.com/problemset/problem/492/E 题目规定了gcd=1,可以在纸上模拟一下,发现每一个起点,都会经历过n个点,n个点都是不同行不同列.可以把 ...
- Codeforces_446_B
http://codeforces.com/problemset/problem/446/B 分别将每行的和与每列的和存入优先队列,计算操作n次的最大和,保存每一次结果. 枚举行和列操作的次数,注意要 ...
- MySQL复制(二)--基于二进制日志文件(binlog)配置复制
基础环境: 主库 从库 服务器IP地址 192.168.10.11 192.168.10.12 版本 5.7.24 5.7.24 已存在的数据库 mysql> show databases; ...
- STM32片外SRAM作运行内存
本例演示用的软硬件: 片内外设驱动库:STM32CubeF41.24.1的HAL库1.7.6,2019年4月12日 IDE:MDK-ARM 5.28.0.0,2019年5月 开发板:片外SRAM挂在F ...