logo标签列表

当鼠标悬停或点击时更改按钮图像

imagexamlbuttonwindows-8windows-runtime
5

如何在鼠标悬停和点击时更改按钮的背景图像？ Visual Studio 的用户界面似乎没有提供任何简单的方法来完成它。当前，当我悬停在按钮上时，其默认行为是用纯色替换我的图像，这看起来很糟糕。

我目前只有按钮基础：

    <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);
            };
6个回答
6

我最终编辑了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>
5
你已经非常接近成功了。你可以在文本/内容下面的图片上方应用半透明颜色，但由于你要求更改整个图像，这里是你可以做的：
在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}">时，您仍然可以放置内容，并且它将出现在背景图像的上方。或者您也可以使用这些图像创建一个完全图形化的按钮。
对我来说非常完美，可以在不出现闪烁的情况下切换按钮图像。 - Jamie - Fenrir Digital Ltd
3
Windows UI XAML工具包现在具有以下功能：

图像按钮和切换图像按钮

在Visual Studio 2012中使用软件包管理器控制台命令“Install-Package winrtxamltoolkit”安装工具包......它对许多事情非常有用。

2
这是一种样式，可以在Blend中添加额外的图片并控制其可见性。这些图片是透明的，并且通过使用“发送到后面”功能放置在按钮背景图片后面，因此您可以为每个按钮继续使用不同的背景图片刷子，并且可以交换 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>
1
在按钮的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;

    }
那么唯一的方法就是编写代码响应事件并手动更改吗？ - Nick Banks
据我所知，是的 :) 但可能还有另一种解决方案，但我从未见过 :) - Ibraheem Osama
我试过了，对于进入和退出是有效的，但按下和释放却不起作用。 - Nick Banks
0
原始代码中 PointerPressed / PointerReleased 的 += 无法工作的原因是 Button（实际上是 ButtonBase）类处理这些事件。这是因为它们被合并到 Click 事件中（在 Release 上）。如果您使用 skillButton.AddHandler，第一个参数为 PointerPressedEvent，第二个参数为指向命名处理程序的新处理程序引用，第三个参数为 true，则可以使用 PointerPressed 而不是 Entered/Exited 作为事件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接