C# WPF之Material Design自定义颜色

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言
如果对您有所帮助:欢迎赞赏

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

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

Dotnet9

posted on 2020-04-22 15:21  dearroy  阅读(843)  评论(0编辑  收藏

导航