C# WPF之Material Design自定义颜

C# WPF之Material Design自定义颜色

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

阅读导航

本文背景
代码实现
本文参考

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

视频一：C# WPF Design UI: Material Design Custom Colors，配套源码：MaterialDesignCustomColor。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/7187.html

言

?
Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

效果展示

思路

上面效果可以概括为：

鼠标未停留时：蓝色（渐变）背景，正中文字为白色，button四角做了圆角处理
鼠标停留时：button背景变成白色，文字变为蓝色，同时右上方、左下角同时延伸两条互相垂直的线条

根据效果图可以得出实现的一些思路：

背景、文字的颜色变化使用hover就可以实现
右上角的两条线可以使用button的::before/::after伪类，结合transition，当鼠标停留时，实现两条线的延展
中间的文字使用span标签，需要使用span标签的伪类
左下角的两条线利用span的伪类::before/::after实现，原理类似右上角

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <button class="btn"><span>Haihong Pro</span></button>
</body>

</html>

CSS

html,body{
    margin: 0;
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn{
   width: 390px;
   height: 120px; 
   color: #fff; 
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   border-radius: 10px;
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
   7px 7px 20px 0px rgba(0, 0, 0, .1),
   4px 4px 5px 0px rgba(0, 0, 0, .1);
   transition: all 0.3s ease;
   cursor: pointer;
   border: none;
   position: relative;
   line-height: 120px;
   padding: 0;
}
.btn span{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    position:absolute;
    content: '';
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    background: transparent;
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    width: 100%;
}
.btn:hover::after{
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
}

疑点详解

怎么实现两条线的延展的呢？

首先，使用::before和::after伪类，在button的前后添加两个伪元素一个width=0，height=2px；另一个height=0，width=2px

这里便于理解和观察，我们将这两个元素显示出来

修改css代码：将before改为红色，便于观察，同时width、height都改为20px

.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: red; 
    transition: all 0.3s ease;
}
.btn::before{
    width: 20px;
    height: 20px;
}

现在就可以观察到before的具体位置了

利用CSS 中的 transition 属性，在鼠标停留（hover）在其上时，将其宽度修改为100%，就可以实现延展效果了

// 鼠标停留在上方时，宽度变成100%
.btn:hover::before{
width: 100%;
}

不了解css transition的小伙伴可以查看：

?
transition简介：https://www.w3school.com.cn/cssref/pr_transition.asp

一个before实现宽度的延伸，另一个after就实现高度的延伸，所以一个元素的两个伪元素就可以实现两条线的延展效果

同样，左下角的延展就是利用span的::before和::after伪元素了

踩坑

1.父元素button没有设置padding=0，会出现四条线没有完美闭合的情况

在这里插入图片描述

button元素中应该设置position: relative，如果没有会出现：

在这里插入图片描述

原因：因为button的before和after伪元素中的 position:absolute; 所以必须设置button position: relative，

position中absolute是指：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

如果不声明button的position为relative，那么此时button::before/after就会认为它的父元素是浏览器，那么绝对定位也就是根据浏览器而定了。

注释版代码

html,body{
    margin: 0;
    height: 100%;
}
body{
    /* 元素居于正中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn{
   width: 390px;
   height: 120px; 
   /* 文字颜色为白色 */
   color: #fff; 
   /* button背景色为渐变蓝色 */
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   /* 字体设置 */
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   /* 圆角处理 */
   border-radius: 10px;
   /* button阴影设置 */
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
   7px 7px 20px 0px rgba(0, 0, 0, .1),
   4px 4px 5px 0px rgba(0, 0, 0, .1);
   /* 设置过渡属性  所以元素过渡 持续时间：0.3s 速度曲线类型：ease*/
   transition: all 0.3s ease;
   /* 鼠标停留时，变为小手 */
   cursor: pointer;
   border: none;
   position: relative;
   /* 行高  */
   line-height: 120px;
   padding: 0;
}
.btn span{
    /* 相对定位 */
    position: relative;
    /* 块级元素 */
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    /* 绝对定位 */
    position:absolute;
    /* content必须有 不然不显示 */
    content: '';
    /* 定位右上角 */
    top: 0;
    right: 0;
    /* 背景色：蓝色 */
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    /* 初始化 */
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    /* 绝对定位 */
    position:absolute;
    content: '';
    /* 定位左下角 */
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    /* 背景透明 */
    background: transparent;
    /* 字体色变为：蓝色 */
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    /* 宽度过渡为100% */
    width: 100%;
}
.btn:hover::after{
    /* 高度过渡为100% */
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
}

结语

希望对您有所帮助

如有错误欢迎小伙伴指正～

我是 海轰?(?ˊ?ˋ)?

如果您觉得写得可以的话

请点个赞吧

谢谢支持 ??

ordPress的教程

很多同学会遇到，自己的按钮想添加一个到你的编辑框中，这样就很方便，于是看到过一篇文章，转载过来，希望对大家有用。

可以利用编辑器自定义按钮数据固定格式内容，遗憾的是目前只能在文本模式也就是html模式下数据这些内容，这也极大的方便了文章的编辑和发布，对于那些经常需要插入短代码的，在HTML编辑器的工具栏里加上各种各样的快捷标签也是很有用的。

文章内容包裹自定义按钮代码代码长，建议用电脑查看

以下代码在wordpress 4.6.1亲测可以实现：

打开您的主题文件下的functions.php
文件,添加以下代码(请注意备份文件，以免误操作导致网站无法正常显示。

// 添加HTML按钮
function appthemes_add_quicktags() {?> <script type="text/javascript"> 
QTags.addButton( '按钮名字1', '按钮名字1', '代码', '/代码' );
QTags.addButton('按钮名字2', '按钮名字2', '代码2', '/代码2');
</script><?php}add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下是小编博客在用的几个编辑工具

此部分为小编的编辑工具，喜欢可以自行添加，方法同上

/// 添加HTML按钮
function appthemes_add_quicktags() {?> <script type="text/javascript">
 QTags.addButton( '大标题', '大标题', '<h2 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h2>' );
 QTags.addButton( '小标题', '小标题', '<h5 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h5>' );
 QTags.addButton( '按钮', '按钮', '<a class="btn btn-default" href="http://修改URL">', '</a>' );
 QTags.addButton( '说明框', '说明框', '<div class="article-desc">', '</div>' );QTags.addButton( '标记框', '标记框', '<div class="commentform-text">', '</div>' );
 QTags.addButton( '题块', '题块', '<div class="post-theme-module">', '</div>' );
 QTags.addButton( '加粗', '加粗', '<strong>', '</strong>' );
 QTags.addButton( '代码', '代码', '<pre class="prettyprint lang-js">', '</pre>' );
 QTags.addButton( 'p', 'p', '<p>', '</p>' ); 
 QTags.addButton( 'hr', 'hr', '<hr>', '' );</script><?php}add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

添加以下css到主题下的.css文件下

小编使用的是DUX主题所以css放在main.css文件内，其他模板请放在全局调用的css文件里

在线咨询

上一篇：python 正则表达式匹配
下一篇：被遗忘的手机WAP网站，被遗忘的3GQQ，被遗忘的Q

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商