悬停或单击时更改按钮图像答案

【问题标题】：Change Button Image On Hover or Click悬停或单击时更改按钮图像
【发布时间】：2012-05-09 21:41:55
【问题描述】：

如何在悬停和单击时更改按钮的背景图像？ Visual Studio 的 UI 似乎没有提供任何简单的方法来做到这一点。目前，默认行为似乎将我的图像替换为纯色，看起来很棒。

到目前为止，我只有 Button 基础：

    <Button Content="" Height="75" VerticalAlignment="Center" Width="75" HorizontalAlignment="Center" ClickMode="Press">
        <Button.Background>
            <ImageBrush ImageSource="../data/images/icons/skill_icon_0.png"/>
        </Button.Background>
    </Button>

我尝试处理事件并手动设置它，但它不适用于 Pressed/Released：

        Button skillButton = new Button();
        skillButton.Width = 75;
        skillButton.Height = 75;
        skillButton.ClickMode = ClickMode.Press;
        skillButton.Background = GetIconImage(iconIndex, 0);
        skillButton.PointerEntered += 
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 1);
            };
        skillButton.PointerExited +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 0);
            };
        skillButton.PointerPressed +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                skillButton.Background = GetIconImage(iconIndex, 2);
            };
        skillButton.PointerReleased +=
            (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
                if (skillButton.FocusState == FocusState.Pointer)
                    skillButton.Background = GetIconImage(iconIndex, 1);
                else skillButton.Background = GetIconImage(iconIndex, 0);
            };

【问题讨论】：

标签： image xaml button windows-8 windows-runtime

【解决方案1】：

我最终编辑 ControlTemplate 只是为了创建和更改边框。但它也可以用来改变图像。

    <Button Width="75" Height="75" ClickMode="Press">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement" CornerRadius="10" BorderThickness="2">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
                                <VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Yellow" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="Black"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border.BorderBrush>
                        <SolidColorBrush x:Name="BorderBrush" Color="White"/>
                    </Border.BorderBrush>
                    <Border.Background>
                        <ImageBrush ImageSource="ms-appx:/data/images/icons/skill_icon_0.png"/>
                    </Border.Background>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>

【讨论】：

【解决方案2】：

你几乎在那里。您始终可以在文本/内容下方的图片顶部应用半透明颜色，但由于您要求更改整个图片，您可以执行以下操作：

在 Visual Studio 2012 中，如果您已经有一个大部分样式/配置为您想要的按钮，请右键单击它，编辑模板 -> 编辑副本。选择要放置新样式/模板的位置。这就像选择放置 CSS 的位置。可能位于全局文件（App.xaml 或 StandardStyle.xaml）中，也可能位于标头（页面资源）或内联（控制资源）中。

下面的 XAML 可能过于简化并且不起作用，但这就是它的想法：

<ControlTemplate x:Key="MyButton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground"
                            Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                            Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                [...]
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                [...]
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="Border" [...]>
            <Grid>
                <Image Source="[...]" Stretch="None" />
                <Image x:Name="HoverBackground" Source="[...]" Visibility="Collapsed" />
                <Image x:Name="PressedBackground" Source="[...]" Visibility="Collapsed" />
                <ContentPresenter x:Name="ContentPresenter"
                Content="{TemplateBinding Content}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                Margin="{TemplateBinding Padding}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    [...]/>
            </Grid>
        </Border>
        [...]
    </Grid>
</ControlTemplate>

现在您可以将 3 张图片放在 3 个<Image> 标签中，并且由于 ContentPresenter 在顶部，当您使用带有 <Button Template="{StaticResource MyButton}"> 的模板时，您仍然可以放入内容，它会出现在您的背景顶部图片。或者，您也可以只使用带有图像的全图形按钮。

【讨论】：

非常适合我，用于切换按钮图像而不会闪烁

【解决方案3】：

Windows UI XAML 工具包现在具有以下功能：

Image Button and Toggle Image Button

在visual studio 2012中使用包管理器控制台命令“Install-Package winrtxamltoolkit”来安装工具包...对很多事情真的很有用。

【讨论】：

【解决方案4】：

这是一种样式，可以打开和关闭您在 Blend 中添加的一些额外图像的可见性。这些图像是透明的，并且通过使用“Send to Back”在按钮背景图像后面。换句话说，您可以继续为每个按钮使用不同的背景图像画笔，以及交换的 Normal、Pointer 和 Pressed 图像。所以两个背景图像重叠。

    <Style x:Key="qButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" />
    <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="4" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" >
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Thickness>0</Thickness>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
                                </Storyboard>

                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                        Storyboard.TargetName="Border"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                        Storyboard.TargetName="ContentPresenter"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#7F006400"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#7F006400"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <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" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/>
                    <Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/>
                    <Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/>
                    <Border x:Name="Border"
                        Background="{TemplateBinding Background}" Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Content="{TemplateBinding Content}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0"
                        StrokeDashOffset="1.5" StrokeEndLineCap="Square"
                        Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" />
                    <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0"
                        StrokeDashOffset="0.5" StrokeEndLineCap="Square"
                        Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

【解决方案5】：

在按钮上的 Pointer_Entered 事件中使用此代码，它将起作用:)

 private void Button_PointerEntered_1(object sender, PointerEventArgs e)
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:/Images/Shapes/blueball.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        ImageBrush i = new ImageBrush();
        i.ImageSource=bmp;
        button.Background= i;

    }

【讨论】：

所以唯一的办法就是让代码响应事件并手动更改它？
我知道是的 :) 但可能还有另一种解决方案，但我从未见过 :)
我试了一下，进出都可以，但是按放不行。

【解决方案6】：

PointerPressed / PointerReleased 的 += 在您的原始代码中不起作用的原因是 Button（实际上是 ButtonBase）类处理这些事件。那是因为它们被合并到 Click 事件中（发布时）。如果您将 SkillButton.AddHandler 与第一个参数 PointerPressedEvent 一起使用，第二个参数是对命名处理程序的新处理程序引用，第三个参数为 true，则您可以使用 PointerPressed 而不是 Entered/Exited 作为事件。

【讨论】：