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

Question

如何在悬停和单击时更改按钮的背景图像？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, 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);
            };

Answer 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>

Answer 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}">,您仍然可以放入内容,它将显示在背景图像的顶部.或者您也可以使用带有图像的完全图形按钮.