silverlight – ToggleButton控件VisualStateManager：处理多个悬停状态

如果你阅读我之前的问题,请随意跳过这一段：我正在尝试构建一个控件,提供类似于音频播放按钮的功能.当应用程序处于“播放”模式时,应用程序应显示“Pause.png”图像.当它暂停时,它应该显示“Play.png”图像.还有两个附加图像来说明当用户悬停在控件上时的任一状态(例如,“Play_Hover.png”和“Pause_Hover.png”).状态由我的视图模型中的IsPlaying属性确定.

我决定使用ToggleButton根据当前状态确定要显示的图像.请记住,当IsPlaying为false时,将显示播放按钮,如果为true,则会显示暂停按钮.因此,我提出了以下XAMl.它的工作原理除了悬停：

<UserControl x:Class="Foo.barMyControl"
    xmlns="http://scheR_185_11845@as.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://scheR_185_11845@as.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://scheR_185_11845@as.microsoft.com/expression/blend/2008"
    xmlns:mc="http://scheR_185_11845@as.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d"
    d:DesignHeight="100" d:DesignWidth="200">
    <UserControl.resources>
        <Style x:Key="MyButtonStyle" TargetType="ToggleButton">
            <Setter Property="IsEnabled" Value="true"/>
            <Setter Property="IsTabStop" Value="true"/>
            <Setter Property="BACkground" Value="#FFA9A9A9"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="MinWidth" Value="5"/>
            <Setter Property="MinHeight" Value="5"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="checkStates">
                                    <VisualState x:Name="checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Pause">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Play">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Play">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Pause">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image x:Name="Play" source="/Foo.bar;component/resources/Icons/Bar/Play.png" />
                            <Image x:Name="Pause" source="/Foo.bar;component/resources/Icons/Bar/Pause.png" Visibility="Collapsed" />
                            <Image x:Name="PlayHover" source="/Foo.bar;component/resources/Icons/Bar/Play_Hover.png" Visibility="Collapsed" />
                            <Image x:Name="PauseHover" source="/Foo.bar;component/resources/Icons/Bar/Pause_Hover.png" Visibility="Collapsed" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.resources>
    <Grid x:Name="LayoutRoot" BACkground="White">
        <ToggleButton Style="{Staticresource MyButtonStylE}" Ischecked="{Binding LiveEnableD}" Command="{Binding ChangeStatus}" Height="30" Width="30" />
    </Grid>
</UserControl>

你如何为这两个州提供不同的悬停图像？如果我将一个悬停状态添加到CommonStates组,我将能够仅考虑其中一个状态(已选中或未选中)的悬停.