遂宁房产网,劳拉失魂记,百里挑一赵亚男
阅读导航
主要介绍使用material design开源控件库的自定义颜色功能
使用 .net core 3.1 创建名为 “customcolordemo” 的wpf模板项目,添加两个个nuget库:materialdesignthemes、materialdesigncolors。
materialdesign控件库
文件【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>
文件【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 的外观已经修改。
除非注明,文章均由 dotnet9 整理发布,欢迎转载。
转载请注明本文地址:
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论