Question

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

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

我可以让它工作，所以如果我的按钮是聚焦的，我可以显示image2.png而不是image1.png吗？我正在开发窗口商店应用程序，因此这里不支持触发器。我可以在这里使用Visual状态管理器吗？

Answer 1

根据您的描述，我发现您有两个要求，一个要求是将Image设置为Button的内容，另一个要求是在Button被聚焦时将Button的内容更改为另一个图像。

要求1：将图像设置为按钮的内容

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

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

PS：由于您使用的是Windows应用商店应用，我将使用Windows 8.1商店应用作为后续信息的示例，对于UWP应用来说几乎相同。

我们可以通过在XAML中创建按钮来获取按钮的模板，然后右键单击按钮控件 - ＆gt;“编辑模板” - ＆gt;“编辑副本...”，如下所示：

然后它将显示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的内容设置为ImageURL / Soruce的值，例如： ms-appx：///image1.png ，它会将图像显示为内容按钮。

要求2：当按钮聚焦时，将按钮的内容更改为另一个图像。

请找到这些 PointerOver Pressed Focused PointerFocused VisualState并逐个添加以下XAML，因为当Button进入聚焦状态时会触发这些视觉状态：

 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="MyImage">
     <DiscreteObjectKeyFrame KeyTime="0" Value="ms-appx:///image2.png "/>
 </ObjectAnimationUsingKeyFrames>

所以Button的整体风格： 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。

Answer 2

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

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

2 个答案: