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

c# wpf之material design自定义颜色

阅读导航

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

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.参考

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

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

转载请注明本文地址：

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