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

三、按钮篇

(一)纯文本按钮-TextOnlyButton

  • 创建一个Button按钮,设置宽高
  • 右键设计窗口中的按钮,找到编辑模板编辑副本,并点击它。如下图所示。

在这里插入图片描述

  • 此时会弹出一个对话框,提示我们选择创建资源名称定义位置,如下图所示。
    在这里插入图片描述
    在这里插入图片描述

  • 我们可以不用管,但为了方便,我们设置一下名称TextOnlyButton,然后点击确定。
    在这里插入图片描述

  • 此时,会在我们MainWindow中的Resources中创建一些资源信息,如下图所示。

在这里插入图片描述

  • 我们可以简单将上面的资源文件划分为三类,如下图所示,分别是:焦点样式、颜色资源以及纯文本按钮样式定义。

在这里插入图片描述

  • 在开始之前,我们先确定下,我们文本按钮的样式。首先,我们参考Windows Settings中的蓝色文本,如下图所示。

在这里插入图片描述

  • 让我们开始纯文本按钮样式设计吧

    • 定义颜色画刷,添加自己需要的画刷定义
       		<SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF208EEA"/>
            <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FF262829"/>
            <SolidColorBrush x:Key="Button.Pressed.Foreground" Color="#FF5C6061"/>
            <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    
    • 设置一些默认样式
            <Style x:Key="TextOnlyButton" TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
                <Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="Padding" Value="5"/>
            </Style>
    
    • 设置模板Template和触发器Triggers
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                                <ContentPresenter x:Name="contentPresenter" 
                                              Focusable="False" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDefaulted" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Pressed.Foreground}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
    
    • 上面为了简化模板控件的使用,去掉了Border元素。下面贴上完整的样式代码定义。
    	   <Style x:Key="FocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF208EEA"/>
            <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FF262829"/>
            <SolidColorBrush x:Key="Button.Pressed.Foreground" Color="#FF5C6061"/>
            <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
            <Style x:Key="TextOnlyButton" TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
                <Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="Padding" Value="5"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                                <ContentPresenter x:Name="contentPresenter" 
                                              Focusable="False" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDefaulted" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Pressed.Foreground}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
    • 使用样式与效果
    <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 的信息"/>
        </StackPanel>
    </Grid>
    

在这里插入图片描述

  • 最后需要说明下,如果我们不想我们的按钮控件在有焦点时,按住ALT键出现以下虚线框,我们可以使用*FocusVisualStyle="{x:Null}"*进行设置(也可以在样式中默认定义,目前实例中我们给他设定了一个虚线边框),也可以自定义成自己需要的样式,只需要重新设计样式中的FocusVisual资源就好了。

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

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