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

三、按钮篇

(三)纯图标按钮-IconOnlyButton

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

    在这里插入图片描述

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

    • 按钮内容为图标,以及通过自定义控件实现
    • 默认情况下,背景色为白色(无背景)
    • 鼠标放上去,会有一个背景色
    • 鼠标按下,背景变为蓝白色
  • 由于该按钮添加了一个图标,该属性我们想通过依赖属性来定义,这样我们就可以再XAML或者其他地方进行设置了。所以我们首先在项目中添加如下的IconButton

    文件路径: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) => { }));
    
        }
    }
    

    注意:这个类的创建方式也可以直接使用自定义控件的创建方式进行创建,这里不做演示。但是就这样直接定义类也是可以的,只是在XAML中直接使用IconButton时是没有任何内容呈现。

  • 接下来,打开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.Static.Border" Color="Transparent"/>
        <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF000000"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FF0097EE"/>
        <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF0097EE"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF3DB5F3"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF3DB5F3"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="IconOnlyButton" 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="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Padding" Value="1"/>
           
        </Style>
    
    </ResourceDictionary>
    

    注意:首先是local的定义只想我们刚刚定义的IconButton类的命名空间哦。其次我们IconOnlyButton只想的目标类型TargetType是我们定义的IconButton类哦,使用方式如上就好controls:IconButton

  • 然后呢,我们开始我们的模板和触发器的样式设计哦,下面就贴上完整的样式代码哦。

    文件路径:UiCore.Styles.IconOnlyButton.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.Background" Color="Transparent"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="Transparent"/>
        <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF000000"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FF0097EE"/>
        <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF0097EE"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF3DB5F3"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF3DB5F3"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="IconOnlyButton" 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="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <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}">
                        <Border x:Name="border" Background="{TemplateBinding Background}"
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
                            <Border Padding="9">
                                <Viewbox>
                                    <Path Data="{TemplateBinding IconData}"  
                                              x:Name="path" Fill="{TemplateBinding Foreground}"
                                              Stretch="Uniform">
                                    </Path>
                                </Viewbox>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                                <Setter Property="Foreground"  Value="{StaticResource Button.MouseOver.Foreground}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    </ResourceDictionary>
    
  • 最后,我们开始使用吧,首先将资源文件IconOnlyButton.xaml添加到资源中,然后再使用。

    • 在App.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.MergedDictionaries>
              </ResourceDictionary>
          </Application.Resources>
      </Application>
      
      
    • 然后再窗口总使用需要定义controls的命名空间,最后再使用

      <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>
      
              </Grid>
      
          </Grid>
      </Window>
      

      这里的IconData是使用自定义的图形来进行填充的,这个内容可以很多种哦,大家可以试着去下载SVG格式的矢量图,然后使用其中的内容。因为他们都是基于图形微语言实现的。

  • 完结,show for you

    在这里插入图片描述


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

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