UWP自定義ToggleButton控制元件的樣式

DooneZhang發表於2021-01-03
控制元件

UWP自定義ToggleButton控制元件的樣式

一般來講，UWP自帶控制元件的樣式足夠我們使用，但是如果我們想要更具自己的需求修改樣式因該怎麼做呢？下面就以例項簡單示範一下。

需求是這樣的，我們需要做一個類似抖音點讚的按鈕，沒有點贊前是空心愛心，點贊後變成實心紅心，如果我們使用預設樣式，做出來的效果會是這樣的：

程式碼：

 <!--未點贊前為白色空心-->
<ToggleButton Content="&#xE006;" 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="&#xE00B;"代表屬性值，（&#xE00B;是Segoe MDL2 Assets字型集裡心形的轉義字元。）

Storyboard.TargetProperty="Foreground"代表我們需要修改字型的顏色屬性，Value="{StaticResource Red}"代表紅色

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
    <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE00B;"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Red}"/>
</ObjectAnimationUsingKeyFrames>

現在我們看一下xaml中程式碼的樣子

<ToggleButton Content="&#xE006;" Background="Transparent" Style="{StaticResource ToggleButtonStyle}" 
FontFamily="Segoe MDL2 Assets" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>

可以看出通過Style="{StaticResource ToggleButtonStyle}" 已經引用了我們修改的靜態資源，我們執行一下看看效果

相關文章