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

三、按钮篇

(五)带描述图文按钮-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

    在这里插入图片描述


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

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页