创建按钮时不包含背景，边框，并且具有用于正常，滚动，按下状态的图像

问题描述

在UWP XAML应用中，我需要为每个状态创建一个按钮，其中包含3个单独的图像：正常，翻转，按下。我只想显示图像，没有背景和边框（默认情况下存在）。 我从以下内容开始：

    <Button x:Name="BackButton" Click="On_Back_Button" HorizontalAlignment="Right" VerticalAlignment="Top" Width="60" Height="60" Padding="0" BorderThickness="0">
        <Image Source="Assets/close.png" 
                Width="60" 
                Height="60"/>
    </Button>

现在，我希望它在光标指向它时切换到"Assets/close_hover.png"，并在按下它时切换到"Assets/close_pressed.png"。我该怎么办？

解决方法

如果需要在不同状态下修改按钮的显示，则需要创建按钮ControlTemplate。通过复制默认的ControlTemplate，我们可以将其修改为以下代码：

<Style TargetType="Button" x:Key="ImageButtonStyle">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter x:Name="ContentPresenter"
          Background="{TemplateBinding Background}"
          BackgroundSizing="{TemplateBinding BackgroundSizing}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Content="{TemplateBinding Content}"
          ContentTemplate="{TemplateBinding ContentTemplate}"
          ContentTransitions="{TemplateBinding ContentTransitions}"
          CornerRadius="{TemplateBinding CornerRadius}"
          Padding="{TemplateBinding Padding}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          AutomationProperties.AccessibilityView="Raw">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Image Source="ms-appx:///Assets/close_hover.png" 
                                                       Width="60" 
                                                       Height="60"/>       
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Image Source="ms-appx:///Assets/close_pressed.png" 
                                                       Width="60" 
                                                       Height="60"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </ContentPresenter>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以将此代码放在App.Resources标记中，也可以创建一个ResourceDictionary并在 App.xaml 中引用它。如果您想了解更多有关资源引用的信息，可以查看this document

用法

<Button x:Name="BackButton" Click="On_Back_Button" Width="60" Height="60"
        Style="{StaticResource ImageButtonStyle}">
    <Image Source="Assets/close.png" 
        Width="60" 
        Height="60"/>
</Button>