带有图像的 Silverlight 超链接按钮（图像上的悬停效果）答案

【问题标题】：Silverlight Hyperlink button with image (hover effect on the image)带有图像的 Silverlight 超链接按钮（图像上的悬停效果）
【发布时间】：2012-01-28 06:38:08
【问题描述】：

我正在尝试创建一个带有图像的超链接按钮，其中图像将具有悬停效果（在 MouseOver 上更改）。我能够用一个图像创建一个超链接按钮，但停留在图像上的悬停效果。请帮忙！

这是我的用户控件：

<UserControl.Resources>
        <Style x:Key="NavigationButton_Middle" TargetType="HyperlinkButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="HyperlinkButton">
                        <Grid Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Background"
                                                            Storyboard.TargetProperty="Color"
                                                            To="White"
                                                            Duration="00:00:0.1">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Edge" BorderBrush="#FFD9D9D9" BorderThickness="1" CornerRadius="1" Height="32" Width="48">
                                <Border.Background>
                                    <SolidColorBrush x:Name="Background" Color="#FFF4F4F4" />
                                </Border.Background>
                                <ContentPresenter Content="{TemplateBinding Content}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

XAML：

<HyperlinkButton x:Name="HomeButton" Style="{StaticResource NavigationButton_Middle}" ToolTipService.ToolTip="Home" Visibility="Visible" Margin="0" HorizontalAlignment="Right">
                    <Image Source="home.png" Margin="13,5,13,5" Height="20" Width="20"/>
                </HyperlinkButton>

提前感谢您的帮助！

【问题讨论】：

标签： silverlight image hyperlink hover

【解决方案1】：

由于您要更改按钮的实际内容（样式未知），因此很难做到不损害样式的可重用性。但是，如果您不介意，您可以将 Image 移动到 Template 内，即 ContentPresenter 现在所在的位置。然后，您可以从情节提要中按名称对其进行修改。

【讨论】：