首页 > 其他分享> > WPF 控件设计艺术[按钮篇五]

WPF 控件设计艺术[按钮篇五]

2021-01-10 18:32:39 作者：互联网

三、按钮篇

（五）带描述图文按钮-WithDescIconTextButton

按钮内容同时存在图标、主要文本以及对按钮功能的描述补充文本，并且图标、主要文本和描述文本都能根据不同功能变化。我们看下我们参考的按钮的样子吧，如下图所示：
接下来我们分析下，按钮的效果：
- 默认情况下，背景为透明
- 鼠标放上去，有一个灰色背景色
- 鼠标按上去，背景色加深，图标和文本加粗

在实现时，我们同样使用自定义控件，继承之前的IconButton 并添加添加对应的Description依赖属性即可，DescIconButton定义如下：

文件路径：Deamon.UiCore.Controls.DescIconButton.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;

namespace Deamon.UiCore.Controls
{
    /// <summary>
    /// 带描述文本的图标按钮
    /// </summary>
    public class DescIconButton : IconButton
    {

        /// <summary>
        /// 按钮描述文本
        /// </summary>
        public string Description
        {
            get { return (string)GetValue(DescriptionProperty); }
            set { SetValue(DescriptionProperty, value); }
        }

        /// <summary>
        /// <see cref="Description"/>
        /// </summary>
        public static readonly DependencyProperty DescriptionProperty =
            DependencyProperty.Register(nameof(Description), typeof(string), typeof(DescIconButton), new PropertyMetadata(default(string)));

    }
}

接下来，打开VS，添加一个按钮，并编辑模板，我是直接定义到资源自定文件中的，如下图所示：

添加上我们自定义的颜色资源，设置模板样式，有些颜色资源在其他文件中已经定义过所以不完整哦：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="clr-namespace:Deamon.UiCore.Controls"
                    xmlns:local="clr-namespace:Deamon.UiCore.Styles">

    <SolidColorBrush x:Key="Button.Static.Background" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#22000000"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#22000000"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <DropShadowEffect x:Key="DeepPathEffect" ShadowDepth="1" Color="Black" />
    <Style x:Key="WithDescIconTextButton" TargetType="{x:Type controls:DescIconButton}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Cursor" Value="Arrow"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:DescIconButton}">
                    <Grid x:Name="root" Margin="0">
                        <Border x:Name="border" Background="{TemplateBinding Background}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    SnapsToDevicePixels="true">
                        </Border>

                        <StackPanel Orientation="Horizontal">
                            <Border Padding="18" Width="60" >
                                <Viewbox>
                                    <Path Data="{TemplateBinding IconData}" 
                                          x:Name="path" Fill="{TemplateBinding Foreground}"
                                          Stretch="Uniform">
                                    </Path>
                                </Viewbox>
                            </Border>

                            <StackPanel VerticalAlignment="Center">
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                <TextBlock Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Opacity="0.9"
                                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           Text="{TemplateBinding Description}"/>

                            </StackPanel>

                        </StackPanel>

                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="Margin" TargetName="root" Value="3 0 0 0"/>
                            <Setter Property="TextElement.FontWeight" TargetName="contentPresenter" Value="Black"/>
                            <Setter Property="Effect" TargetName="path" Value="{StaticResource DeepPathEffect}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

最后在Main Window.xaml中使用

先引用资源

<Application x:Class="Deamon.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Deamon"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="UiCore/Styles/TextOnlyButton.xaml"/>
                <ResourceDictionary Source="UiCore/Styles/BackDropButton.xaml"/>
                <ResourceDictionary Source="UiCore/Styles/IconOnlyButton.xaml"/>
                <ResourceDictionary Source="UiCore/Styles/IconTextButton.xaml"/>
                <ResourceDictionary Source="UiCore/Styles/WithDescIconTextButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MianWindow中简单使用

<Window x:Class="Deamon.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Deamon"
        xmlns:controls="clr-namespace:Deamon.UiCore.Controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid>
            <StackPanel >
                <Button Style="{DynamicResource TextOnlyButton}" HorizontalAlignment="Center" Content="夜间模式设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="0 5" HorizontalAlignment="Center" Content="Windows HD Color 设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="5 0" HorizontalAlignment="Center" Content="高级缩放设置"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" Content="获取帮助"/>
                <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" IsEnabled="False"  Content="提供反馈"/>

                <Button Style="{DynamicResource TextOnlyButton}" FontSize="20" HorizontalAlignment="Center" Content="连接到无线显示器"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="14" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="13" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
                <Button Style="{DynamicResource TextOnlyButton}" FocusVisualStyle="{x:Null}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>

                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="检测"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="更改"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="设置默认值"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Content="清楚"/>
                <Button Style="{DynamicResource BackDropButton}"  Margin="5" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" IsEnabled="False" Content="允许"/>

            </StackPanel>

            <controls:IconButton Style="{DynamicResource IconOnlyButton}"  Width="50" Height="30" HorizontalAlignment="Left" Content="sdasdad"  VerticalAlignment="Top">
                <controls:IconButton.IconData>
                    <StreamGeometry>M928 464H247.936L569.984 141.76l-56.56-56.688-418.608 418.56 418.608 418.56 56.56-56.352L247.936 544H928z</StreamGeometry>
                </controls:IconButton.IconData>
            </controls:IconButton>


            <StackPanel HorizontalAlignment="Left"  Margin="0 50 0 0">


                <controls:IconButton Style="{DynamicResource IconTextButton}"
                              Width="300"
                             FontSize="14"
                             Height="50" Content="主页">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M874.666667 896H618.666667a21.333333 21.333333 0 0 1-21.333334-21.333333V640h-170.666666v234.666667a21.333333 21.333333 0 0 1-21.333334 21.333333H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V405.333333a21.376 21.376 0 0 1 9.024-17.429333l362.666667-256a21.354667 21.354667 0 0 1 24.618666 0l362.666667 256A21.376 21.376 0 0 1 896 405.333333v469.333334a21.333333 21.333333 0 0 1-21.333333 21.333333z m-234.666667-42.666667h213.333333V416.405333L512 175.445333 170.666667 416.405333V853.333333h213.333333V618.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h213.333334a21.333333 21.333333 0 0 1 21.333333 21.333334z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>

                <Border Margin="0 30">

                </Border>

                <controls:IconButton Style="{DynamicResource IconTextButton}"
                              Width="300"
                             FontSize="14"
                             Height="50" Content="鼠标">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M512 67c-187 0-340 153-340 340v310c0 132 108 240 240 240h200c132 0 240-108 240-240V407c0-187-153-340-340-340z m204.8 135.2c26.7 26.7 47.7 57.8 62.4 92.3 10.8 25.5 17.8 52.1 20.9 79.4H537V118.1c30.1 2.6 59.5 9.9 87.5 21.8 34.5 14.6 65.5 35.6 92.3 62.3z m-409.6 0c26.7-26.7 57.8-47.7 92.3-62.4 28-11.9 57.3-19.2 87.5-21.8v255.8H223.9c3.1-27.3 10.1-53.9 20.9-79.4 14.7-34.4 35.7-65.4 62.4-92.2zM787 790.6c-9.6 22.6-23.4 43-40.9 60.5s-37.9 31.3-60.5 40.9c-23.4 9.9-48.1 15-73.6 15H412c-25.5 0-50.3-5-73.6-15-22.6-9.6-43-23.4-60.5-40.9s-31.3-37.9-40.9-60.5c-9.9-23.4-15-48.1-15-73.6V423.9h580V717c0 25.5-5 50.3-15 73.6z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>

                <controls:IconButton Style="{DynamicResource IconTextButton}"
                             HorizontalAlignment="Left" Width="300"
                             FontSize="14"
                             Height="50" Content="声音">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M840.087968 168.005388c-10.785066-11.281951-28.760176-11.697413-40.043612-0.939395-11.311067 10.797927-11.725523 28.67611-0.93841 39.959084 70.7942 73.998341 111.389397 182.550663 111.389397 297.807686 0 115.270327-40.595197 223.823672-111.417027 297.835316-10.786089 11.281951-10.372657 29.160133 0.93841 39.945781 5.477983 5.211698 12.528851 7.810896 19.552089 7.810896 7.466348 0 14.906089-2.929726 20.4905-8.751315 80.749331-84.398202 127.071184-207.1622 127.071184-336.840678C967.130498 375.181915 920.809668 252.41587 840.087968 168.005388zM745.179593 254.449179c-11.171892-10.867512-29.091741-10.674107-40.043612 0.497327-10.922195 11.18576-10.701151 29.063943 0.498371 39.959084 52.127307 50.770314 82.048983 127.314641 82.048983 209.954803 0 82.640162-29.921676 159.142533-82.048983 209.91387-11.199522 10.907421-11.420565 28.785603-0.498371 39.95806 5.558827 5.682419 12.914653 8.53028 20.271503 8.53028 7.13376 0 14.268543-2.681062 19.772109-8.032954 62.995264-61.362556 99.13992-152.615886 99.13992-250.369258C844.319512 407.065066 808.173833 315.825039 745.179593 254.449179zM648.721868 340.407923c-12.112348-9.886161-29.949306-7.977695-39.849176 4.050246-9.872239 12.085246-8.046586 29.892821 4.065762 39.765679 32.52098 26.435069 51.933894 71.538313 51.933894 120.635521 0 48.393173-18.997435 93.120864-50.800024 119.641891-12.00285 10.008958-13.57983 27.831882-3.567392 39.819914 5.614088 6.662747 13.660674 10.120498 21.764568 10.120498 6.387739 0 12.831762-2.156106 18.141916-6.566556 44.521784-37.139875 71.098134-98.099249 71.098134-163.014724C721.507504 438.934914 694.295654 377.490493 648.721868 340.407923zM472.289488 140.532687c-9.568305-4.729721-21.100415-3.76065-29.645372 2.641153L210.350231 316.488141 89.279961 316.488141c-15.651086 0-28.317066 12.637832-28.317066 28.247344l0 320.235488c0 15.623839 12.66598 28.260647 28.317066 28.260647l121.07027 0 232.293885 173.300998c4.976542 3.733021 10.949825 5.626137 16.950738 5.626137 4.314436 0 8.684132-0.994654 12.69361-2.970658 9.568305-4.798283 15.624479-14.57495 15.624479-25.275663L487.912943 165.807327C487.912943 155.092287 481.856769 145.329946 472.289488 140.532687zM431.277788 787.514961 236.731122 642.35079c-4.894674-3.63683-10.840327-5.628184-16.951762-5.628184l-102.181311 0L117.59805 372.997156l102.181311 0c6.112458 0 12.057088-1.991354 16.951762-5.627161l194.546666-145.164171L431.277788 787.514961z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>
                <controls:IconButton Style="{DynamicResource IconTextButton}"
                             HorizontalAlignment="Left" Width="300"
                             FontSize="14"
                             Height="50" Content="专注助手">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M754.139429 660.498286c-236.562286 0-383.140571-142.281143-383.140572-370.706286 0-65.152 11.154286-122.587429 27.008-153.435429 6.418286-12.434286 7.277714-18.432 7.277714-26.989714 0-14.153143-12.854857-30.866286-30.848-30.866286-3.437714 0-11.574857 1.28-24.009142 5.997715-158.134857 64.292571-269.568 231.424-269.568 411.428571 0 260.150857 188.580571 449.572571 448.713142 449.572572 186.861714 0 337.718857-97.718857 407.588572-258.011429 4.699429-11.136 5.979429-20.553143 5.979428-25.270857 0-17.572571-15.414857-29.568-28.288-29.568-7.277714 0-11.995429 0.420571-22.272 4.278857-35.145143 14.134857-87.442286 23.588571-138.422857 23.588571z m-605.988572-167.570286c0-133.284571 68.992-260.150857 180.425143-330.002286-13.714286 39.862857-21.430857 84.004571-21.430857 132.864 0 267.849143 163.291429 427.282286 437.138286 427.282286 43.702857 0 81.426286-5.138286 116.571428-17.554286-65.133714 107.556571-190.72 173.129143-328.283428 173.129143-222.427429 0-384.420571-162.011429-384.420572-385.718857z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:IconButton>

                <controls:DescIconButton Style="{DynamicResource WithDescIconTextButton}"
                             HorizontalAlignment="Left" Width="300"
                             FontSize="14"
                             Height="50" Content="HUAWEI-MLY_HLink" Description="已连接，安全">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M680.964226 902.043391c-1.362021 31.798217-27.571962 56.665581-59.106166 56.665581-0.851391 0-1.707898-0.016373-2.570545-0.053212-32.664957-1.397836-58.014298-29.007661-56.621579-61.667501 6.517437-152.447041-30.026874-267.152503-108.62293-340.93288C328.85582 438.533778 132.871193 457.808774 130.905422 458.024691c-32.385595 3.462868-61.639872-20.015869-65.177442-52.450583-3.53143-32.43369 19.772322-61.604056 52.207036-65.219397 10.143011-1.150196 250.728438-26.002211 416.318824 128.610146C639.679961 567.401798 689.043229 713.106274 680.964226 902.043391zM215.776392 672.863734c-36.812417 0-72.871681 14.960737-98.91994 41.004903-26.053376 26.044166-41.011043 62.098313-41.011043 98.904591 0 36.805254 14.957667 72.860425 41.011043 98.903567 26.048259 26.044166 62.107523 41.004903 98.91994 41.004903 36.916794 0 72.977082-14.960737 98.91994-41.004903 26.048259-26.044166 41.011043-62.098313 41.011043-98.903567 0-36.806277-14.962783-72.861448-41.011043-98.904591C288.753473 687.824471 252.693186 672.863734 215.776392 672.863734zM739.609904 255.634168C492.716818 27.048029 132.646066 67.300802 117.439736 69.124334c-32.460296 3.898797-55.616692 33.368992-51.721988 65.829288 3.894703 32.44904 33.357735 55.539944 65.839521 51.713802 3.174296-0.3776 320.463686-35.960003 527.600303 155.825998 129.992633 120.355135 190.540637 306.917158 179.960675 554.49586-1.39272 32.658817 23.955598 60.268642 56.621579 61.667501 0.860601 0.036839 1.718131 0.053212 2.569522 0.053212 31.535227 0 57.746192-24.867364 59.108213-56.665581C969.546807 618.159832 896.26478 400.676565 739.609904 255.634168z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:DescIconButton>

                <controls:DescIconButton Style="{DynamicResource WithDescIconTextButton}"
                             HorizontalAlignment="Left" Width="300"
                             FontSize="14"
                             Height="50" Content="手机" Description="连接Android设备和iPhone">
                    <controls:IconButton.IconData>
                        <StreamGeometry>M176.2 175.5c0-61.8 50.1-111.9 111.9-111.9h447.7c61.8 0 111.9 50.1 111.9 111.9v671.6c0 61.8-50.1 111.9-111.9 111.9H288.1c-61.8 0-111.9-50.1-111.9-111.9V175.5z m111.9-37.3c-20.6 0-37.3 16.7-37.3 37.3v671.6c0 20.6 16.7 37.3 37.3 37.3h447.7c20.6 0 37.3-16.7 37.3-37.3V175.5c0-20.6-16.7-37.3-37.3-37.3H288.1z m149.3 37.3c-20.6 0-37.3 16.7-37.3 37.3s16.7 37.3 37.3 37.3h149.2c20.6 0 37.3-16.7 37.3-37.3s-16.7-37.3-37.3-37.3H437.4z m74.6 597c-20.6 0-37.3 16.7-37.3 37.3s16.7 37.3 37.3 37.3 37.3-16.7 37.3-37.3-16.7-37.3-37.3-37.3z</StreamGeometry>
                    </controls:IconButton.IconData>
                </controls:DescIconButton>
            </StackPanel>
        </Grid>
    </Grid>

</Window>

Oh year 完了，show for you

积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频或者搜索用户：一阵没来由的风

标签：控件,41.011043,16.7,按钮,21.333333,WPF,37.3,111.9
来源： https://blog.csdn.net/YouyoMei/article/details/112436610