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

发布时间：2020-12-14 02:13:58 所属栏目：Windows 来源：网络整理

导读：如何在悬停和单击时更改按钮的背景图像？ Visual Studio的UI似乎没有提供任何简单的方法.目前,默认行为似乎用纯色替换我的图像,这看起来很糟糕. 我到目前为止所有的都是按钮基础： Button Content="" Height="75" VerticalAlignment="Center" Width="75" Hor

如何在悬停和单击时更改按钮的背景图像？ Visual Studio的UI似乎没有提供任何简单的方法.目前,默认行为似乎用纯色替换我的图像,这看起来很糟糕.

我到目前为止所有的都是按钮基础：

<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,0);
            };
        skillButton.PointerPressed +=
            (object sender,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);
            };

解决方法

我最后编辑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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!