C# WPF之Material Design自定义颜色

微信公众号：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 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/7187.html

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