He creado una animación WPF Storyboard en una imagen en Expression Blend 4. Al pasar el mouse, la imagen se borra gradualmente. ¿Hay alguna manera en que pueda hacer que Storyboard se deshaga o se invierta cuando el mouse sale de la imagen? Podría hacer que desencadene Storyboard.Remove(), pero eso no funcionaría en el Storyboard al revés.Cómo revertir la animación WPF Storyboard?
¿Hay alguna manera de lograrlo dentro de Expression Blend 4?
dado que está utilizando Blend, debe aprovechar el soporte de Mezcla para el VisualStateManager. Todo lo que tiene que hacer es describir cómo se ve el objeto en sus diversos estados, como MouseOver y Normal y cuánto tiempo son las transiciones entre varios estados, y el administrador de estado visual describe cómo hacer la transición entre estados.
Una imagen no tiene ningún estado visual pero puede editar una plantilla Button y hacer que su contenido sea una imagen y luego editar los estados para el botón. He hecho esto y limpiado el XAML para demostrar la técnica:
<Grid>
<Grid.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0">
<Image.Effect>
<DropShadowEffect ShadowDepth="0"/>
</Image.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button Style="{StaticResource ButtonStyle1}"/>
</Grid>
Tenga en cuenta que Blend hace todo esto para usted, pero la comprensión de la XAML ayudaré. He aquí una orientada Blend-tutorial:
Gracias por su ayuda. Convertir en un botón es una especie de fastidio, pero siempre y cuando funcione correctamente, puedo manejarlo. ¡Gracias! –
Puede ver en mi ejemplo cómo puede "quitar el estilo" de todo el botón: sin bordes, sin bordes, sin un comportamiento superfluo del mouse-over, etc. Pero si lee los enlaces que le envié, le mostrará cómo crea tus propios grupos de estados y estados como MouseOver y Normal para cualquier tipo de elemento. Entonces, no, no tiene ser o parecer un botón. –
Esta no es la respuesta a "Cómo invertir la animación del guión gráfico de WPF". -.- ' –
Tal vez la solución está en esta respuesta:
How to animate ListBox Items on MouseEnter and MouseLeave events using C#/WPF?
bajo su pregunta, comentó que quería evitar la creación de otro guión gráfico –
No consumo Expression Blend, pero tal vez usted quiere trabajar en el XAML directamente? Para invertir un guión gráfico por otro evento, la forma más sencilla es crear un guión gráfico nuevo haciendo la animación en orden inverso y etiquetarlo para ese evento –
. Estaba pensando en hacerlo, pero estaba tratando de evitar la creación de otro guión gráfico. Gracias por el aporte. –
Hasta ahora, si un solo evento desencadena "do-and-reverse", se puede realizar fácilmente, pero para su caso, se trata de 2 eventos separados. Estará interesado en saber de una manera conveniente a través de xaml solo. –