三、按钮篇
(一)纯文本按钮-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资源就好了。
积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频 或者搜索用户:一阵没来由的风