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

概述参考我之前的一个问题( Silverlight MVVM Confusion: Updating Image Based on State),我开始采用一种新的方法.我离开了现有的问题,因为我不想肯定我的新方法是正确答案(我仍然欢迎对我原来的问题发表评论). 如果你阅读我之前的问题,请随意跳过这一段：我正在尝试构建一个控件,提供类似于音频播放按钮的功能.当应用程序处于“播放”模式时,应用程序应显示 参考我之前的一个问题( Silverlight MVVM Confusion: Updating Image Based on State),我开始采用一种新的方法.我离开了现有的问题,因为我不想肯定我的新方法是正确答案(我仍然欢迎对我原来的问题发表评论).

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

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

<UserControl x:Class="Foo.barMyControl"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:d="http://schemas.microsoft.com/Expression/blend/2008"    xmlns:mc="http://schemas.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组,我将能够仅考虑其中一个状态(已选中或未选中)的悬停.

解决方法 使用togglebutton时,不可能有不同的悬停/鼠标悬停状态,因为这对于按钮是常见的.
常见状态为normal(您最初看到的),MouSEOver,pressed和Disabled

其他状态与已检查,未检查或中间相关.在这里,您可以为各种状态设置不同的图像等.鼠标悬停将始终回滚到公共状态.

如果你必须拥有这个功能,你可以为此创建自己的自定义控件,并根据活动状态处理鼠标悬停动画.这将需要后端更多代码,因为您需要重新定义此对象的按钮类并插入各种状态的测试以允许为每个状态播放设置动画.可以这样做我只是不知道是否值得付出那么多努力.

总结

以上是内存溢出为你收集整理的silverlight – ToggleButton控件VisualStateManager：处理多个悬停状态全部内容，希望文章能够帮你解决silverlight – ToggleButton控件VisualStateManager：处理多个悬停状态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。