ToggleButton 控件 VisualStateManager:处理多个悬停状态 [英] ToggleButton Control VisualStateManager: Handling Multiple Hover States
问题描述
参考我之前的一个问题(Silverlight MVVM Confusion:根据状态更新图像)我开始使用一种新方法.我留下了现有的问题，因为我不想肯定我的新方法是正确的答案(我仍然欢迎对我原来的问题发表评论).
In reference to a previous question I had (Silverlight MVVM Confusion: Updating Image Based on State) I started with a new approach. I left the existing question because I didn't want to say for sure my new approach was the correct answer (I still welcome comments on my original problem).
如果您阅读了我之前的问题，请随意跳过这一段:我正在尝试构建一个控件，该控件提供类似于音频播放按钮的功能.当应用程序处于播放"模式时，应用程序应显示Pause.png"图像.当它暂停时，它应该显示Play.png"图像.当用户将鼠标悬停在控件上时，还有两个额外的图像可以说明两种状态(例如，Play_Hover.png"和Pause_Hover.png").状态由我的视图模型中的 IsPlaying 属性决定.
If you read my previous question, please feel free to skip this paragraph: I'm trying to build a control that provides functionality similar to an audio play button. When the app is in its "Play" mode, the app should display the "Pause.png" image. When it's paused, it should display the "Play.png" image. There are also two additional images to account for either state for when a user hovers over the control (e.g., "Play_Hover.png" and "Pause_Hover.png"). The state is determined by the an IsPlaying property in my view model.
我决定使用 ToggleButton 来根据当前状态确定要显示的图像.请记住，当 IsPlaying 为 false 时，将显示播放按钮，当为 true 时，将显示暂停按钮.因此，我想出了以下 XAML.除了悬停之外，它有效:
I decide to use a ToggleButton to determine which image to display based on the current status. Remember, when IsPlaying is false, the play button is displayed and when it's true, the pause button is displayed. As such, I came up with the following XAML. It works except for the hovers:
<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 组，我将能够仅考虑其中一种状态(选中或未选中)的悬停.
How do you have different hover images for both states? If I add a Hover state to the CommonStates group, I'll be able to account for hover of only one of the states (checked or unchecked).
推荐答案
使用切换按钮时，不可能有不同的悬停/鼠标悬停状态，因为这对按钮来说很常见.常见状态是正常(您最初看到的)、鼠标悬停、按下和禁用
With the togglebutton it is not possible to have a different hover / Mouse over state as this is common to the button. Common states are Normal (what you initally see), Mouseover,Pressed and Disabled
与已检查、未检查或中间状态相关的其他状态.在这里，您可以为各种状态设置不同的图像等.鼠标悬停将始终回滚到普通状态.
The other states related to checked, unchecked or intermediate. Here as you have done you can set different images etc for the various state. The mouseover though will always roll back to the common state.
如果您必须拥有此功能，您可以为此创建自己的自定义控件并根据活动状态处理鼠标悬停动画.这将需要在后端添加更多代码，因为您需要为此对象重新定义按钮类并插入对各种状态的测试，以允许为每个状态播放一组动画.这是可以做到的，我只是不知道是否值得付出那么多努力.
If you have to have this funcionality you could create your own custom control for this and handle the mouseover animation based upon the active state. This would require more code on the back-end as you will need to redefine the button class for this object and insert testing for the various states to allow a set animation to play for each state. It could be done I just don't know if it would be worth that much effort.
这篇关于ToggleButton 控件 VisualStateManager:处理多个悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
