在编写应用程序时，你会经常想要做出不同于原始的风格。今天，我们将向你展示一款不显示周围形状和边界的纯粹的图标按钮。
在编写应用程序时，你会经常想要做出不同于原始的风格。今天，我们将向你展示一款不显示周围形状和边界的纯粹的图标按钮。然而，当按钮悬停时会高亮显示图标，当它被点击时会改变用户之前看到的颜色。下面以一个小动画来表现我所说的意思：
这一切都始于你可以在这里看到的默认样式的按钮控件。我们要修改这个风格，直到它能够匹配上面的动画。我们改变的第一件事就是BackgroundBrush——将其设置为“透明”以除去灰色形状，按钮控件当悬停或点击时会显示：
<Setter Property="Background" Value="Transparent"/>
<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>
在这种情况下，我们只是想通过我们的按钮来使用图标，我们可以在风格里安全地删除“ContentPresenter”部分。我们已经取得了不少进展，但都仍然不会让控件符合动画的效果。
现在是时候去修改CommonStates按钮的风格。我们只使用一个图标按钮，所以我们需要给路径的Fill (=Foreground)添加颜色状态。修改如下：
‘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>
为了突出显示图标的轮廓，我们要使用路径的Stroke (=Border)属性。在XAML添加这些修改到风格中：
‘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>
剩下的是在任何想要的按钮上使用风格：
<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>
一如既往地，我希望这篇文章对你们有用。如果你有问题或改进的想法，或者只是想讨论控件，可以随时在下面留言。
最后祝大家编码快乐！
PS: 关于移动开发，这些产品你可以关注>>
关于移动开发的最新资讯和产品推荐，请<咨询在线客服>!
标签：移动开发图标控件
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！