Question

所以，我最近对复制这种效果的挑战感到沮丧：

<style>
a:hover {background-color:yellow; }
</style>

在WinRT中使用XAML实现。

什么是最简洁的解决方案？

Answer 1

好的，所以这是我的尝试：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="Hover">
            <Storyboard>
                <ColorAnimation To="Yellow" Duration="0"
                    Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
                    Storyboard.TargetName="MyTextBox" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid x:Name="MyTextBox" Background="White"
        PointerEntered="MyTextBox_PointerEntered" 
        PointerExited="MyTextBox_PointerExited"
        Height="114" Width="537">
</Grid>

而且：

private void MyTextBox_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(this, Hover.Name, false);
}

private void MyTextBox_PointerExited(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(this, Normal.Name, false);
}

但是，肯定有更好的方法！

Answer 2

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ColorAnimation To="Yellow" Duration="0"
                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" 
                Storyboard.TargetName="MyTextBox" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed"/>
            </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

RT中的“悬停”状态为“PointerOver”。

Answer 3

我认为你必须研究视觉状态和VisualStateManager。我认为Button控件是唯一具有可视状态的控件，这意味着您的可视实体必须被定义为Button（尽管它不必像一个一样）。在该文章的底部，您将找到一个示例。

This SO-question也可能有用，描述如何从现有按钮中提取控件模板。这将为您提供一个起点，您可以根据自己的需要进行修改。

至于“最简洁的解决方案”，我也希望看到这一点。我见过的例子都需要20多行XAML代码，这对我来说并不是很浓缩......

XAML中的简单悬停效果？

3 个答案: