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

三、按钮篇

(四)图文合并按钮-IconTextButton

  • 同样的,我们找到我们需要设计的按钮样式,如下图左上角的主页按钮哦

    在这里插入图片描述

  • 来分析一下吧,我们通过使用WindowsSettings中的这个面板的按钮,可以分析出如下特点:

    • 按钮内容同时存在图标和文本,并且图标和文本都能根据不同功能变化。
    • 默认情况下,背景为透明
    • 鼠标放上去,有一个灰色背景色
    • 鼠标按上去,背景色加深,图标和文本加粗
  • 由于该按钮由一个图标和文本组成,因此我们就是用上个样式定义的IconButton类就可以了,使用IconData做图标,Button类的Content属性作为文本。

    文件路径:Deamon.UiCore.Controls.IconButton.cs

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace Deamon.UiCore.Controls
    {
        /// <summary>
        /// 图标按钮
        /// </summary>
        public class IconButton : Button
        {
            public IconButton()
            {
                //((StreamGeometry)IconData).FillRule = FillRule.EvenOdd;
            }
            /// <summary>
            /// 图标数据
            /// </summary>
            public Geometry IconData
            {
                get { return (Geometry)GetValue(IconDataProperty); }
                set { SetValue(IconDataProperty, value); }
            }
    
            /// <summary>
            /// <see cref="IconData"/>
            /// </summary>
            public static readonly DependencyProperty IconDataProperty =
                DependencyProperty.Register(nameof(IconData), typeof(Geometry), typeof(IconButton), new PropertyMetadata(default(Geometry), (s, e) => { }));
    
        }
    }
    
  • 接下来,打开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="#33000000"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#33000000"/>
        <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="IconTextButton" TargetType="{x:Type controls:IconButton}">
            <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="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:IconButton}">
                        <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>
    
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    
                            </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/IconOnlyButton.xaml"/>
                      <ResourceDictionary Source="UiCore/Styles/IconTextButton.xaml"/>
                  </ResourceDictionary.MergedDictionaries>
              </ResourceDictionary>
          </Application.Resources>
      </Application>
      
    • 使用

      <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>
      
                      <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>
                  </StackPanel>
      
              </Grid>
      
          </Grid>
      </Window>
      
  • 看一看效果吧
    在这里插入图片描述


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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页