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小時內與您取得聯系。

整合營銷服務商