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

最新推荐文章于 2023-10-23 19:29:43 发布

一阵没来由的风

最新推荐文章于 2023-10-23 19:29:43 发布

阅读量1.5k

点赞数 2

分类专栏： WPF 控件设计艺术文章标签： WPF 按钮设计 Windows按钮自定义控件主页按钮

本文链接：https://blog.csdn.net/YouyoMei/article/details/112596568

版权

WPF 控件设计艺术专栏收录该内容

7 篇文章 84 订阅

订阅专栏

三、按钮篇

（六）Windows系统设置主页按钮-WindowsSettingsHomeButton

按钮由图标、主题文本和描述文本组成，图标与文本颜色分开，默认背景为白色或者透明。来，咱们看看Windows Setting里面得样子吧，如下图所示：
接下来我们分析下，按钮的效果：
- 鼠标放上去，显示背景框
- 鼠标按下，整体有收缩感觉（模糊化）

由于按钮中的元素与我们之前使用的按钮样式一致，因此我们本次按钮样式设计也是基于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，添加一个按钮，并编辑模板，我是直接定义到资源自定文件中的。但是这次，我们直接添加资源文件（WindowsSettingsHomeButton.xaml）到对应的文件夹中，并直接进行样式设计，其路径和代码如下：

文件路径：Deamon.UiCore.Styles.WindowsSettingsHomeButton.xaml

<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.Content.Foreground" Color="#FF000000"/>
    <SolidColorBrush x:Key="Button.Static.Description.Foreground" Color="#DD000000"/>
    <SolidColorBrush x:Key="Button.Static.Background" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#22000000"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#33000000"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <BlurEffect x:Key="LightBlurEffect"  Radius="2" RenderingBias="Performance" />
    <Style x:Key="WindowsSettingsHomeButton" 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="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Cursor" Value="Arrow"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:DescIconButton}">
                    <Border Padding="11">
                        <Border Width="250" Height="85" x:Name="border" Background="Transparent" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    SnapsToDevicePixels="true">

                            <Grid  x:Name="root" Margin="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>

                                <Grid.RenderTransformOrigin>0.5 0.5</Grid.RenderTransformOrigin>
                                <Grid.RenderTransform>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                </Grid.RenderTransform>
                                
                                <Border Width="35" Margin="10 10 0 0" 
                                        Height="35" Padding="3" 
                                        HorizontalAlignment="Left" 
                                        VerticalAlignment="Top">
                                    <Viewbox>
                                        <Path Data="{TemplateBinding IconData}" 
                                          x:Name="path" Fill="#FF2779DA"
                                          Stretch="Uniform">
                                        </Path>
                                    </Viewbox>
                                </Border>

                                <Grid Grid.Column="1" Margin="10 0">
                                    <StackPanel VerticalAlignment="Center">
                                        <ContentPresenter x:Name="contentPresenter" Focusable="False"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                          Margin="{TemplateBinding Padding}" 
                                                          RecognizesAccessKey="True"
                                                          TextBlock.FontSize="14"
                                                          TextBlock.Foreground="{StaticResource Button.Static.Content.Foreground}"
                                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                        <TextBlock Height="40"
                                                   FontSize="12"
                                                   Foreground="{StaticResource Button.Static.Description.Foreground}"
                                                   TextWrapping="WrapWithOverflow"
                                                   Padding="{TemplateBinding Padding}" Opacity="0.9"
                                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           Text="{TemplateBinding Description}"/>

                                    </StackPanel>
                                </Grid>

                            </Grid>
                        </Border>
                    </Border>


                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            <Setter Property="Effect" TargetName="path" Value="{StaticResource LightBlurEffect}"/>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="ooi">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" To="0.98" Storyboard.TargetName="root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"/>
                                        <DoubleAnimation Duration="0:0:0.1" To="0.98" Storyboard.TargetName="root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="ooi"/>
                            </Trigger.ExitActions>
                        </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 Source="UiCore/Styles/WindowsSettingsHomeButton.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>

        <WrapPanel HorizontalAlignment="Center">
            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="系统"
                                             Description="显示、声音、通知、电源">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M864 640H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32z M64.864 960h894.272c21.056 0 40.864-10.112 52.992-27.104 11.872-16.64 15.04-38.08 8.448-57.376l-76.64-224a63.104 63.104 0 0 0-18.496-26.56c1.504-5.44 2.56-11.04 2.56-16.96V160c0-35.296-28.704-64-64-64H160c-35.296 0-64 28.704-64 64v448c0 5.92 1.056 11.52 2.56 16.96a63.104 63.104 0 0 0-18.496 26.56l-76.64 224a63.584 63.584 0 0 0 8.448 57.376c12.128 16.96 31.936 27.104 52.992 27.104zM160 160h704l0.032 448H160V160z m-18.496 512l741.856 0.224 76.704 223.424c-0.128 0.256-0.448 0.352-0.96 0.352L64 896.224 141.504 672z M816 736h-608a16 16 0 1 0 0 32h608a16 16 0 1 0 0-32zM592 832h-160a16 16 0 1 0 0 32h160a16 16 0 1 0 0-32zM208 320a15.936 15.936 0 0 0 11.328-4.672l96-96a16 16 0 1 0-22.656-22.656l-96 96A16 16 0 0 0 208 320zM356.672 196.672l-160 160a16 16 0 1 0 22.656 22.656l160-160a16 16 0 1 0-22.656-22.656z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>

            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="手机"
                                             Description="连接Andriod设备和iPhone">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M625.834667 691.2h-256c-18.773333 0-34.133333 15.36-34.133334 34.133333s15.36 34.133333 34.133334 34.133334h256c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333z M728.234667 102.4h-460.8c-56.490667 0-102.4 45.909333-102.4 102.4v614.4c0 56.490667 45.909333 102.4 102.4 102.4h460.8c56.490667 0 102.4-45.909333 102.4-102.4V204.8c0-56.490667-45.909333-102.4-102.4-102.4z m34.133333 716.8c0 18.773333-15.36 34.133333-34.133333 34.133333h-460.8c-18.773333 0-34.133333-15.36-34.133334-34.133333V204.8c0-18.773333 15.36-34.133333 34.133334-34.133333h460.8c18.773333 0 34.133333 15.36 34.133333 34.133333v614.4z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>

            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="设备"
                                             Description="蓝牙、打印机、鼠标">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M683.03376769 215.34732928h-223.07295008c-10.25666663 0-18.99746195 3.62609427-26.28781927 10.87282962-7.25764102 7.25218854-10.89464097 15.98753066-10.89464097 26.22238667V437.84228516h297.41605923V252.44799805c0-10.23485528-3.6151886-18.97019812-10.90554666-26.22238596-7.25218854-7.25218854-16.0202477-10.87282961-26.28236607-10.8728296h0.02726382z m185.89048913 296.63085937H274.10304478c-10.25666663 0-19.0138201 3.62064108-26.32053557 10.88373529-7.22492472 7.2630935-10.88373529 15.97662499-10.8837353 26.21693348v148.29907155c0 10.24576096 3.65335809 18.97565061 10.8837353 26.21148027 7.3067162 7.28490484 16.06386966 10.88373529 26.32053557 10.88373529H354.86406816c7.73748488-21.79473441 21.18947637-39.60894412 40.35052127-53.44262986 19.17740304-13.82278006 40.76493181-20.72053819 64.76803953-20.72053746h223.07294935c24.01401266 0 45.62335277 6.89775812 64.78985088 20.72053746 19.17740304 13.83368573 32.61303639 31.64789544 40.35052128 53.44262986h80.75557018c10.26757159 0 19.00291443-3.59883046 26.30417742-10.88373529 7.23582967-7.23037719 10.89464097-15.96572004 10.89464096-26.21148027V549.07885742c0-10.24576096-3.65335809-18.95383926-10.89464096-26.21693348-7.3067162-7.2630935-16.03660583-10.87828209-26.3096299-10.87828208h-0.02181135z m-185.89048913 222.47314454h-223.07295008c-10.25666663 0-18.99746195 3.63699994-26.28781927 10.86737714-7.25764102 7.27399917-10.89464097 15.99843635-10.89464097 26.22783914 0 10.24576096 3.63699994 18.95929246 10.89464097 26.24419659 7.29035804 7.21401906 16.03115335 10.85101827 26.28236679 10.85101899h223.07840256c10.25666663 0 19.00836691-3.63699994 26.28781928-10.85101899 7.25764102-7.28490484 10.89464097-15.99843635 10.89464025-26.24419659 0-10.22940209-3.63699994-18.95383926-10.89464025-26.22783914-7.27945237-7.23037719-16.03115335-10.86737714-26.28781928-10.86737714zM459.96081761 141.21142578h223.07295008c30.76454599 0 57.07417661 10.85101827 78.85255214 32.58577256 21.77837626 21.72930109 32.6730165 47.94078136 32.67301651 78.64534723V437.84228516h74.36492048c30.78635733 0 57.07417661 10.85101827 78.85255286 32.58577256C969.5660909 492.16826376 980.46073186 518.37974476 980.46073186 549.07885742v148.29907155c0 30.72092402-10.89464097 56.92695181-32.68392218 78.64534721-21.77837626 21.72930109-48.06619553 32.59667823-78.85255286 32.59667752H788.19595046c-7.77020192 21.81109255-21.24400402 39.62530227-40.39414325 53.44808233-19.16649737 13.82278006-40.76493181 20.72053819-64.76803952 20.72053819h-223.07295008c-24.0031077 0-45.58518328-6.89775812-64.76803952-20.72053819-19.13923355-13.82278006-32.61303639-31.63698977-40.39414325-53.44808233H274.08123415c-30.80816796 0-57.07417661-10.86737714-78.86345854-32.59667752C173.43940008 754.30488077 162.54475911 728.09339977 162.54475911 697.37792897V549.07885742c0-30.70456586 10.89464097-56.91059366 32.6730165-78.64534722 21.78928121-21.72930109 48.05528986-32.58577256 78.86345855-32.58577256h74.35401408V252.44799805c0-30.70456586 10.89464097-56.91604614 32.68392289-78.64534723C402.90845235 152.06789725 429.19627163 141.21142578 459.96081761 141.21142578z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>


            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="网络和Internet"
                                             Description="WLAN、飞行模式、VPN">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M909.989 343.281c-21.76-51.446-52.904-97.643-92.568-137.307-39.663-39.664-85.86-70.808-137.306-92.568-53.28-22.536-109.858-33.962-168.164-33.962S397.067 90.87 343.787 113.406c-51.446 21.76-97.643 52.904-137.307 92.568-39.664 39.664-70.808 85.86-92.568 137.307-22.536 53.28-33.962 109.858-33.962 168.164s11.426 114.884 33.962 168.164c21.76 51.445 52.904 97.643 92.568 137.306 39.664 39.664 85.86 70.809 137.307 92.568 53.28 22.535 109.858 33.962 168.164 33.962s114.884-11.427 168.164-33.962c51.445-21.76 97.643-52.904 137.306-92.568 39.664-39.663 70.809-85.86 92.568-137.306 22.535-53.28 33.962-109.858 33.962-168.164s-11.427-114.884-33.962-168.164zM543.951 376.03c17.57-0.243 35.095-0.683 52.536-1.368a1990.762 1990.762 0 0 0 91.131-5.678c10.157 34.378 16.643 71.314 19.389 110.46H543.951V376.03z m0-64.069V163.41c17.617 12.176 39.372 29.845 61.074 54.197 23.42 26.28 43.109 56.138 58.784 89.019-41.937 3.147-82.117 4.783-119.858 5.335z m-64-144.763v144.705a2038.572 2038.572 0 0 1-103.41-4.309 1929.6 1929.6 0 0 1-11.183-0.786c15.195-31.915 34.175-60.991 56.676-86.711 20.284-23.185 40.722-40.49 57.917-52.899zM370.842 371.354a2124.301 2124.301 0 0 0 109.109 4.606v103.484H322.25c2.742-39.079 9.208-75.96 19.335-110.285 9.453 0.776 19.21 1.512 29.257 2.195z m-112.731 108.09H145.342c3.916-45.757 16.208-89.778 36.139-130.276 20.257 3.578 52.836 8.759 95.407 13.641-9.902 36.699-16.182 75.682-18.777 116.635z m-0.859 64c1.975 39.144 9.712 78.242 23.101 116.799-44.093 4.976-77.797 10.319-98.621 13.992-20.08-40.64-32.458-84.841-36.39-130.792h111.91z m64.098 0h158.601v104.048c-36.37 0.602-72.818 2.13-109.109 4.601-8.41 0.573-16.612 1.182-24.609 1.821-14.322-36.523-22.659-73.543-24.883-110.47z m158.601 168.103v131.712c-16.974-15.877-36.574-35.962-56.038-59.735-18.064-22.064-33.892-44.698-47.379-67.668a2038.38 2038.38 0 0 1 103.417-4.309z m64 136.665V711.487c34.387 0.503 70.782 1.903 108.68 4.527-13.467 22.915-29.263 45.496-47.286 67.509-21.547 26.32-43.262 48.119-61.394 64.689z m52.536-199.426a2063.187 2063.187 0 0 0-52.536-1.384V543.444h163.958c-2.227 36.975-10.582 74.045-24.939 110.615a1994.972 1994.972 0 0 0-86.483-5.273z m175.521-105.342H878.56c-3.928 45.898-16.283 90.051-36.322 130.652a1822.84 1822.84 0 0 0-93.476-13.439c13.478-38.691 21.264-77.929 23.246-117.213z m-0.859-64c-2.605-41.111-8.924-80.238-18.891-117.061a1821.491 1821.491 0 0 0 90.233-13.075c19.89 40.46 32.158 84.432 36.07 130.136H771.149z m1.017-228.215a373.188 373.188 0 0 1 34.046 39.155 1772.853 1772.853 0 0 1-75.117 9.98c-19.529-46.785-45.825-88.91-78.291-125.338a423.863 423.863 0 0 0-5.386-5.927c46.185 18.263 88.573 45.955 124.748 82.13zM384.81 165.923a420.788 420.788 0 0 0-8.355 9.102c-32.552 36.525-58.904 78.775-78.449 125.71-32.357-3.484-59.48-7.244-80.226-10.469a373.386 373.386 0 0 1 33.956-39.037c38.338-38.338 83.654-67.152 133.074-85.306zM251.736 771.659a373.444 373.444 0 0 1-33.584-38.548c22.526-3.498 52.529-7.614 88.626-11.328 18.229 35.542 41.31 70.356 68.867 103.808a678.068 678.068 0 0 0 35.727 39.995c-59.757-16.875-114.524-48.814-159.636-93.927z m368.249 91.745a677.032 677.032 0 0 0 33.629-37.814c27.469-33.344 50.487-68.043 68.689-103.466a1780.315 1780.315 0 0 1 83.528 10.88 373.34 373.34 0 0 1-33.665 38.654c-43.23 43.232-95.324 74.373-152.181 91.746z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>

            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="个性化"
                                             Description="背景、锁屏、颜色">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M188.610009 545.415051a243.760917 243.760917 0 0 0-64.291941 230.354066c0 2.437609 0 4.875218 1.828206 7.008127a163.929216 163.929216 0 0 1-45.40047 145.951849A163.319814 163.319814 0 0 1 0 972.910759a457.051719 457.051719 0 0 0 533.227005-82.878712A243.760917 243.760917 0 0 0 188.610009 545.415051zM1068.586919 9.750437a36.259436 36.259436 0 0 0-45.705172-3.047012L532.617603 379.352927a25.899597 25.899597 0 0 0-2.437609 39.91585L659.37328 548.462063a25.899597 25.899597 0 0 0 41.439356-2.742311L1071.938631 55.76031a36.259436 36.259436 0 0 0-3.351712-46.009873z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>

            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="应用"
                                             Description="卸载、默认应用、可选功能">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M873.6 425.6h-214.4c-19.2 0-32-12.8-32-32s12.8-32 32-32h214.4c19.2 0 32 12.8 32 32s-12.8 32-32 32zM873.6 233.6h-214.4c-19.2 0-32-12.8-32-32s12.8-32 32-32h214.4c19.2 0 32 12.8 32 32s-12.8 32-32 32zM425.6 489.6H214.4c-48 0-86.4-38.4-86.4-86.4V188.8c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c-3.2 48-41.6 86.4-89.6 86.4z m-211.2-320c-12.8 0-22.4 9.6-22.4 19.2v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4V188.8c0-12.8-9.6-22.4-22.4-22.4H214.4zM873.6 873.6h-214.4c-19.2 0-32-12.8-32-32s12.8-32 32-32h214.4c19.2 0 32 12.8 32 32s-12.8 32-32 32zM873.6 678.4h-214.4c-19.2 0-32-12.8-32-32s12.8-32 32-32h214.4c19.2 0 32 12.8 32 32s-12.8 32-32 32zM425.6 937.6H214.4c-48 0-86.4-38.4-86.4-86.4v-214.4c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c-3.2 48-41.6 86.4-89.6 86.4zM214.4 614.4c-12.8 0-22.4 9.6-22.4 22.4v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4v-214.4c0-12.8-9.6-22.4-22.4-22.4H214.4z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>


            <controls:DescIconButton Style="{DynamicResource WindowsSettingsHomeButton}"
                                             Content="用户"
                                             Description="你的帐户、电子邮件、同步设置、工作、家庭">
                <controls:DescIconButton.IconData>
                    <StreamGeometry>M882.8 903.5C881.4 743.7 780 609 638.6 555.6c82-43.7 138.1-129.5 138.1-229.1 0-144.2-116.9-261.1-261.1-261.2v-0.1c-1.7 0-3.3 0.2-4.9 0.2-1.7 0-3.3-0.2-4.9-0.2l-0.1 0.1c-144.2 0.1-261.1 117-261.1 261.2 0 99.6 56 185.4 138.1 229.1C241.1 609 139.8 743.7 138.3 903.5v5.2c0.2 9.3 2.1 18.1 2.8 27.4h0.6c1.5 14.4 13.7 25.4 28.2 25.4s26.7-11 28.2-25.4h0.9c-0.8-9.8-2.9-19.2-2.9-29.1 0-84.7 33.6-165.9 93.5-225.8 58.7-58.7 138-92 220.9-93.3 82.9 1.3 162.2 34.5 220.9 93.3 60 59.9 93.6 141.1 93.6 225.8 0 9.9-2 19.3-2.9 29.1h0.9c1.5 14.4 13.7 25.4 28.2 25.4s26.7-11 28.2-25.4h0.6c0.7-9.3 2.6-18.1 2.8-27.4v-5.2z m-570.5-577c0-110.6 88.4-200.4 198.3-203 109.9 2.7 198.3 92.4 198.3 203s-88.4 200.4-198.3 203c-110-2.7-198.3-92.4-198.3-203z</StreamGeometry>
                </controls:DescIconButton.IconData>
            </controls:DescIconButton>

        </WrapPanel>

    </Grid>

</Window>

辛苦写完代码，欣赏下成果吧。

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

一阵没来由的风

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
WPF 控件设计艺术[按钮篇六]

三、按钮篇（六）Windows系统设置主页按钮-WindowsSettingsHomeButton按钮由图标、主题文本和描述文本组成，图标与文本颜色分开，默认背景为白色或者透明。来，咱们看看Windows Setting里面得样子吧，如下图所示：接下来我们分析下，按钮的效果：鼠标放上去，显示背景框鼠标按下，整体有收缩感觉（模糊化）由于按钮中的元素与我们之前使用的按钮样式一致，因此我们本次按钮样式设计也是基于DescIconButton自定义按钮实现的，首先还是将他的定义贴出来：
复制链接

扫一扫

专栏目录