欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

C# WPF之Material Design自定义颜色

程序员文章站 2022-06-05 17:21:55
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议: "请网站留言" , 如果对您有所帮助: "欢迎赞赏" 。 C WPF之Material Design自定义颜色 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 1. 本文背景 主要介绍使用Material De ......

微信公众号:dotnet9,网站:dotnet9,问题或建议:,
如果对您有所帮助:。

c# wpf之material design自定义颜色

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考

1. 本文背景

主要介绍使用material design开源控件库的自定义颜色功能

C# WPF之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.参考

  1. 视频一:c# wpf design ui: material design custom colors,配套源码:materialdesigncustomcolor

除非注明,文章均由 dotnet9 整理发布,欢迎转载。

转载请注明本文地址:

欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章

C# WPF之Material Design自定义颜色