我正在开发橱窗商店应用程序。我有一个按钮，它使用的样式定义如下：
<Style x:Key="MyButtonStyle" TargetType="ButtonBase">
<Setter Property="Content" Value="ms-appx:///image1.png"/>
</Style>
我可以让它工作，如果我的按钮被聚焦，我可以显示 image2.png 而不是 image1.png？我正在开发橱窗商店应用程序，因此此处不支持触发器。我应该在这里使用 Visual 状态管理器吗？
【问题讨论】：
标签： c# wpf button windows-store-apps styles
根据您的描述，我看到您有两个要求，一个要求是将 Image 设置为 Button 的内容，另一个要求是在 Button 获得焦点时将 Button 的内容更改为另一个图像。
要求一：将图片设置为按钮的内容
我看到您使用以下样式将图像设置为 Button 的内容：
直接使用你的代码不能将图片设置为Button的内容，为了实现它，我们需要将Image控件放在Button的模板中。
PS：由于您使用的是 Windows Store 应用，我将使用 Windows 8.1 应用商店应用作为我以后的信息，UWP 应用几乎相同。
我们可以通过在 XAML 中创建一个 Button 并右键单击 Button 控件-->“编辑模板”-->“编辑副本...”来获取 Button 的模板，如下所示：
然后它将显示Button控件的默认样式，名称为：OriginalButtonStyle，然后找到ContentPresenter并在其中添加Image控件，如下所示：
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Image Name="MyImage" Source="{TemplateBinding Content}"></Image>
</ContentPresenter>
之后，如果我们将Button的Content设置为ImageURL/Soruce的值，例如：ms-appx:///image1.png，它会将Image显示为Content按钮。
要求 2：当 Button 获得焦点时，将 Button 的内容更改为另一张图片。
请找到这些PointerOver Pressed Focused PointerFocused VisualState并一一添加以下XAML，因为当Button进入焦点状态时，这些visualstates将被触发：
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image2.png "/>
</ObjectAnimationUsingKeyFrames>
所以整个样式：OriginalButtonStyle 按钮将如下：
<Style x:Key="OriginalButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="12,4,12,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image1.png"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image1.png"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image1.png"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image1.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Image Name="MyImage" Source="{TemplateBinding Content}"></Image>
</ContentPresenter>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
注意： 以上所有改动都是在OriginalButtonStyle中进行的，为了使用你的MyButtonStyle，我们可以继承MyButtonStyle OriginalButtonStyle如下：
<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource OriginalButtonStyle}">
<Setter Property="Content" Value="ms-appx:///image1.png"/>
</Style>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="button" Style="{StaticResource MyButtonStyle}" HorizontalAlignment="Left" Margin="100,100,100,100" />
</Grid>
之后就可以正常使用了。
更多信息，请查看：Button styles and templates。
【讨论】：
您想要设置 FocusVisualStyle，请参阅此答案以获取示例：How Can I change the way that focus looks like in WPF?
【讨论】：