Question

我很难找到一种方法来做以下事情......

我有“图片按钮样式”，它适用于 Silverlight 应用中的每个按钮。有没有办法让毯子VisualStateManager更改MouseOver上的图像，这对每个按钮都有效？我有几个想法，但我不确定它们是否可以实施......

假设我的按钮图像路径是一致的：

image1.png
image2.png

和

image1 - hover.png
image2 - hover.png

有没有办法改变图像的路径以追加“ - 悬停”？我想过为此使用IValueConverter，但不知道如何访问控件状态......

我有另一种想法，如果有办法实现这一目标：

<Button>
    <Image Source="../Images/image1.png" Width="70"/>
    <Image Source="../Images/image1 - hover.png" Width="70"/>
</Button>

有两个内容（内容数组？），在正常状态下，只将第一个内容不透明度设置为1，其余设置为0.然后在MouseOver上切换不透明度。

这些解决方案是否可行，以及如何实施？

由于

编辑：我知道我可以为每个切换图像的按钮制作自定义样式，但我想要一种可以应用于所有按钮的毛毯样式。

Answer 1

您可以（ab）将Tag属性用于您的目的，并创建一个ControlTemplate，其中包含两个Image控件，其BitmapImage将其UriSource属性绑定到分别为Content或Tag属性：

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal"/>
                            <VisualState Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="image1"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0" Duration="0:0:0.1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="image2"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1" Duration="0:0:0.1"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="image1">
                        <Image.Source>
                            <BitmapImage UriSource="{Binding Content,
                                RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                        </Image.Source>
                    </Image>
                    <Image x:Name="image2" Opacity="0">
                        <Image.Source>
                            <BitmapImage UriSource="{Binding Tag,
                                RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                        </Image.Source>
                    </Image>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在您可以声明一个这样的按钮：

<Button Content="../Images/image1.png" Tag="../Images/image1_hover.png"/>

Silverlight - 样式所有图像按钮在MouseOver上更改

1 个答案: