如何為你的UWP應(yīng)用創(chuàng)建一個(gè)純粹的圖標(biāo)按鈕

---

在編寫應(yīng)用程序時(shí)，你會(huì)經(jīng)常想要做出不同于原始的風(fēng)格。今天，我們將向你展示一款不顯示周圍形狀和邊界的純粹的圖標(biāo)按鈕。然而，當(dāng)按鈕懸停時(shí)會(huì)高亮顯示圖標(biāo)，當(dāng)它被點(diǎn)擊時(shí)會(huì)改變用戶之前看到的顏色。下面以一個(gè)小動(dòng)畫來(lái)表現(xiàn)我所說(shuō)的意思：

這一切都始于你可以在這里看到的默認(rèn)樣式的按鈕控件。我們要修改這個(gè)風(fēng)格，直到它能夠匹配上面的動(dòng)畫。我們改變的第一件事就是BackgroundBrush——將其設(shè)置為“透明”以除去灰色形狀，按鈕控件當(dāng)懸停或點(diǎn)擊時(shí)會(huì)顯示：

<Setter Property="Background" Value="Transparent"/>

當(dāng)我們想要一個(gè)圖標(biāo)按鈕，我們需要選擇一個(gè)常見(jiàn)的圖標(biāo)。我用一個(gè)路徑形狀作為圖標(biāo)來(lái)源，它允許在XAML做修改。所以下一步是在風(fēng)格里添加一個(gè)路徑形狀：

<Path x:Name="PathIcon"
      Data="{TemplateBinding Content}"
      Stretch="Uniform"
      Fill="{TemplateBinding Foreground}"
      Stroke="Transparent"
      StrokeThickness="1"
      Margin="4"
      RenderTransformOrigin="0.5,0.5">
    <Path.RenderTransform>
        <TransformGroup>
            <TransformGroup.Children>
                <RotateTransform Angle="0" />
                <ScaleTransform ScaleX="1" ScaleY="1" />
            </TransformGroup.Children>
        </TransformGroup>
    </Path.RenderTransform>
</Path>

在這種情況下，我們只是想通過(guò)我們的按鈕來(lái)使用圖標(biāo)，我們可以在風(fēng)格里安全地刪除“ContentPresenter”部分。我們已經(jīng)取得了不少進(jìn)展，但都仍然不會(huì)讓控件符合動(dòng)畫的效果。

現(xiàn)在是時(shí)候去修改CommonStates按鈕的風(fēng)格。我們只使用一個(gè)圖標(biāo)按鈕，所以我們需要給路徑的Fill (=Foreground)添加顏色狀態(tài)。修改如下：

‘PointerOver’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>

‘Pressed’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>

‘Disabled’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>

為了突出顯示圖標(biāo)的輪廓，我們要使用路徑的Stroke (=Border)屬性。在XAML添加這些修改到風(fēng)格中：

‘PointerOver’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>

‘Pressed’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>

‘Disabled’ state:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>

剩下的是在任何想要的按鈕上使用風(fēng)格：

<Button x:Name="BaseButton" Style="{StaticResource TransparentButtonStyle}"></Button>

如果你現(xiàn)在在應(yīng)用程序中使用它，你會(huì)得到和最初的動(dòng)畫看到的相同的結(jié)果。

為了用起來(lái)更方便，這是完整的代碼：

<Style x:Key="TransparentPathIconButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
    <Setter Property="Padding" Value="8,4,8,4"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PathIcon">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="PathIcon"
                          Data="{TemplateBinding Content}"
                          Stretch="Uniform"
                          Fill="{TemplateBinding Foreground}"
                          Stroke="Transparent"
                          StrokeThickness="1"
                          Margin="4"
                          RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <RotateTransform Angle="0" />
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

一如既往地，我希望這篇文章對(duì)你們有用。如果你有問(wèn)題或改進(jìn)的想法，或者只是想討論控件，可以隨時(shí)在下面留言。

最后祝大家編碼快樂(lè)！

本文翻譯自：

 

PS: 關(guān)于移動(dòng)開(kāi)發(fā)，這些產(chǎn)品你可以關(guān)注>>

關(guān)于移動(dòng)開(kāi)發(fā)的最新資訊和產(chǎn)品推薦，請(qǐng)<>!