UWP自定义ToggleButton控件的样式
一般来讲,UWP自带控件的样式足够我们使用,但是如果我们想要更具自己的需求修改样式因该怎么做呢?下面就以实例简单示范一下。
需求是这样的,我们需要做一个类似抖音点赞的按钮,没有点赞前是空心爱心,点赞后变成实心红心,如果我们使用默认样式,做出来的效果会是这样的:
代码:
<!--未点赞前为白色空心-->
<ToggleButton Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" FontSize="24"/>
效果:
可以看出来这并不是我们想要的效果,并没有改变心的样子,仅仅是改变了背景,那我们下来对默认样式进行改造,需要用的<Style>等,下面演示步骤:
1、我们在Blend for Visual Studio中打开项目,再左侧预览中选中要修改样式的控件点击右键,或者在上方名称上下拉选择“创建副本”(这里有时候因为一些原因会没有创建副本这个选项,只有一个创建空白项)
2、起好名字选择定义样式保存的位置,选择“应用程序”会在App.xaml文件中创建,选择“此文档”则会在当前xaml文件的资源下创建,这里我为了不增加页面代码量,选择“应用程序”
可以看到系统自动生成了该控件的默认样式副本代码
可以看到“PointerOver”、“Pressed”这些对应的就是控件每个事件所对应的样式,我们可以在这里对样式进行修改,现在我们正式修改我们想要的效果
3、我们找到我们要修改的按下Checked事件,Storyboard.TargetProperty="Content"对应我们需要修改的属性,Value=""代表属性值,(是Segoe MDL2 Assets字体集里心形的转义字符。)
Storyboard.TargetProperty="Foreground"代表我们需要修改字体的颜色属性,Value="{StaticResource Red}"代表红色
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0" Value=""/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Red}"/>
</ObjectAnimationUsingKeyFrames>
现在我们看一下xaml中代码的样子
<ToggleButton Content="" Background="Transparent" Style="{StaticResource ToggleButtonStyle}"
FontFamily="Segoe MDL2 Assets" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
可以看出通过Style="{StaticResource ToggleButtonStyle}" 已经引用了我们修改的静态资源,我们运行一下看看效果