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

---

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

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

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

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

<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>

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

現(xiàn)在是時候去修改CommonStates按鈕的風(fēng)格。我們只使用一個圖標(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)用程序中使用它，你會得到和最初的動畫看到的相同的結(jié)果。

為了用起來更方便，這是完整的代碼：

<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>

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

最后祝大家編碼快樂！

本文翻譯自：

 

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

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