1. Dotnet9首页
  2. .NET
  3. WPF

C# WPF之Material Design自定义颜色

阅读导航

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

1. 本文背景

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

Material Design自定义颜色

2. 代码实现

使用 .Net Core 3.1 创建名为 “CustomColorDemo” 的WPF模板项目,添加两个个Nuget库:MaterialDesignThemes、MaterialDesignColors。

MaterialDesign

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


.NET课程推荐
  1. 《.NET Core开发实战》  -  .NET Core微服务架构最佳实践                     点击了解更多
  2. 《.NetCore实战精品集》-  分布式/跨平台/微服务/前后分离/IOC/ORM  点击了解更多

发表评论

登录后才能评论

联系我们

186-2806-45xx

在线咨询:点击这里给我发消息

邮件:632871194@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code