如何为你的UWP应用创建一个纯粹的图标按钮

在编写应用程序时，你会经常想要做出不同于原始的风格。今天，我们将向你展示一款不显示周围形状和边界的纯粹的图标按钮。然而，当按钮悬停时会高亮显示图标，当它被点击时会改变用户之前看到的颜色。下面以一个小动画来表现我所说的意思： 如何为你的UWP应用创建一个纯粹的图标按钮 这一切都始于你可以在这里看到的默认样式的按钮控件。我们要修改这个风格，直到它能够匹配上面的动画。我们改变的第一件事就是BackgroundBrush——将其设置为“透明”以除去灰色形状，按钮控件当悬停或点击时会显示：

<setter property="Background" value="Transparent"></setter> 当我们想要一个图标按钮，我们需要选择一个常见的图标。我用一个路径形状作为图标来源，它允许在XAML做修改。所以下一步是在风格里添加一个路径形状：

<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"> </scaletransform></rotatetransform></transformgroup.children> </transformgroup> </path.rendertransform> </path> 在这种情况下，我们只是想通过我们的按钮来使用图标，我们可以在风格里安全地删除“ContentPresenter”部分。我们已经取得了不少进展，但都仍然不会让控件符合动画的效果。

现在是时候去修改CommonStates按钮的风格。我们只使用一个图标按钮，所以我们需要给路径的Fill (=Foreground)添加颜色状态。修改如下：

‘PointerOver’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Fill" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="{ThemeResource SystemControlHighlightBaseHighBrush}"> </discreteobjectkeyframe></objectanimationusingkeyframes> ‘Pressed’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Fill" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="{ThemeResource SystemControlForegroundAccentBrush}"> </discreteobjectkeyframe></objectanimationusingkeyframes> ‘Disabled’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Fill" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"> </discreteobjectkeyframe></objectanimationusingkeyframes> 为了突出显示图标的轮廓，我们要使用路径的Stroke (=Border)属性。在XAML添加这些修改到风格中：

‘PointerOver’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Stroke" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="{ThemeResource SystemControlHighlightAccentBrush}"> </discreteobjectkeyframe></objectanimationusingkeyframes> ‘Pressed’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Stroke" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="Transparent"> </discreteobjectkeyframe></objectanimationusingkeyframes> ‘Disabled’ state:

<objectanimationusingkeyframes storyboard.targetproperty="Stroke" storyboard.targetname="PathIcon"> <discreteobjectkeyframe keytime="0" value="Transparent"> </discreteobjectkeyframe></objectanimationusingkeyframes> 剩下的是在任何想要的按钮上使用风格：

<button x:name="BaseButton" style="{StaticResource TransparentButtonStyle}"></button> 如果你现在在应用程序中使用它，你会得到和最初的动画看到的相同的结果。

为了用起来更方便，这是完整的代码：

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

一如既往地，我希望这篇文章对你们有用。如果你有问题或改进的想法，或者只是想讨论控件，可以随时在下面留言。

最后祝大家编码快乐！

本文翻译自：How to Create a Pure Icon Button for Your UWP App

转载于:https://my.oschina.net/charttool/blog/734111