如何在按钮样式中使用不同的图像作为内容？

Question

我正在 window 商店应用开发。我有一个按钮，它使用如下定义的样式：

<Style x:Key="MyButtonStyle" TargetType="ButtonBase">
    <Setter Property="Content" Value="ms-appx:///image1.png"/>
</Style>

我能否让它工作，以便在我的按钮获得焦点时显示 image2.png 而不是 image1.png？我正在开发 window 商店应用程序，因此此处不支持触发器。我要在这里使用可视化状态管理器吗？

Answer 1

您想要设置 FocusVisualStyle，请参考此答案作为示例：How Can I change the way that focus looks like in WPF?

Answer 2

根据您的描述，我了解到您有两个需求，一个是将Image设置为Button的内容，另一个是当Button获得焦点时，将Button的内容更改为另一个图像。

需求一：将Image设置为Button的内容

我看到您使用了以下样式将图像设置为按钮的内容：

直接使用你的代码是不能将图片设置为Button的内容的，需要在Button的模板中放置Image控件才能实现。

PS: 由于您使用的是Windows商店应用程序，我将使用Windows 8.1商店应用程序作为我稍后信息的示例，它将对于 UWP 应用几乎相同。

我们可以通过在XAML中创建一个Button并右键单击Button控件-->"Edit Template"-->"Edit a Copy..."来获取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>

之后，如果我们将按钮的内容设置为 ImageURL/Soruce 的值，例如：ms-appx:///image1.png , 它会将图像显示为按钮的内容。

要求 2：当 Button 获得焦点时将 Button 的内容更改为另一个图像。

请找到这些 PointerOver Pressed Focused PointerFocused VisualState 并一一添加以下 XAML，因为这些视觉状态将在 Button 进入焦点时触发状态：

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

如何在按钮样式中使用不同的图像作为内容？

How to use different image as content in button style?

c#

wpf

styles

button

windows-store-apps