Réaliser une animation "glisser vers le bas" dans WPF

Je cherche à créer mon propre modèle pour un Expander de contrôle. Lorsque le contrôle est étendu, je veux que le contenu de glisser vers le bas lentement.

La hauteur désirée pour le contenu n'est pas connu au moment de la compilation.

Je pensais que l'on pouvait définir le glisser vers le bas comme une animation:

<Storyboard x:Key="ExpandContent">

    <DoubleAnimation 
        Storyboard.TargetName="_expanderContent" 
        Storyboard.TargetProperty="Height" 
        From="0.0" 
        To="{Binding ElementName=_expanderContent,Path=DesiredHeight}"
        Duration="0:0:1.0" />
</Storyboard>

Mais Malheureusement pas. Nous obtenons une erreur

Ne risque pas de geler ce Storyboard montage de l'arbre pour une utilisation dans les threads.

Il semble que nous ne pouvons pas utiliser de liaison lors de la définition des paramètres d'animation. (Discuté aussi dans cette question.)

Quelqu'un a une idée sur comment je peux approche? Je suis méfier de l'utilisation de LayoutTransform.ScaleYparce que ce serait de créer une image déformée.

Ceci est similaire à cette questionmais cette question a une réponse qui a participé à l'écriture de code-behind, je ne pense pas possible dans un modèle de contrôle.
Je me demande si un XAML solution est réalisable.

Pour ce que ça vaut, ici, c'est l'état actuel de mon modèle de contrôle.

<ControlTemplate x:Key="ExpanderControlTemplate"  TargetType="{x:Type Expander}">
<ControlTemplate.Resources>
<!-- Here are the storyboards which don't work -->
<Storyboard x:Key="ExpandContent">
<DoubleAnimation 
Storyboard.TargetName="_expanderContent" 
Storyboard.TargetProperty="Height" 
From="0.0" 
To="{Binding ElementName=_expanderContent,Path=DesiredHeight}"
Duration="0:0:1.0" />
</Storyboard>
<Storyboard x:Key="ContractContent">
<DoubleAnimation 
Storyboard.TargetName="_expanderContent" 
Storyboard.TargetProperty="Height" 
From="{Binding ElementName=_expanderContent,Path=DesiredHeight}"
To="0.0"
Duration="0:0:1.0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid Name="MainGrid" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Name="ContentRow" Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header" />
<ToggleButton Template="{StaticResource ProductButtonExpand}"
Grid.Column="1"
IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" 
/>
<Rectangle Grid.ColumnSpan="2" Fill="#FFDADADA" Height="1" Margin="8,0,8,2" VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ContentPresenter Grid.Row="1" HorizontalAlignment="Stretch" Name="_expanderContent">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="_expanderContent" Property="Height" Value="{Binding ElementName=_expanderContent,Path=DesiredHeight}" />
<!-- Here is where I would activate the storyboard if they did work -->
<Trigger.EnterActions>
<!--<BeginStoryboard Storyboard="{StaticResource ExpandContent}"/>-->
</Trigger.EnterActions>
<Trigger.ExitActions>
<!--<BeginStoryboard x:Name="ContractContent_BeginStoryboard" Storyboard="{StaticResource ContractContent}"/>-->
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsExpanded" Value="False">
<Setter TargetName="_expanderContent" Property="Height" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

source d'informationauteur Andrew Shepherd

Si vous pouvez utiliser Interactions avec FluidLayout (Mélange 4 SDK) vous avez de la chance, elle est vraiment très utile pour les amateurs d'animation choses.

Tout d'abord définir le contenu du CP la Hauteur à 0:

<ContentPresenter Grid.Row="1"
HorizontalAlignment="Stretch"
x:Name="_expanderContent"
Height="0"/>

Pour animer ce, le Height juste besoin d'être animé à NaN dans le VisualState qui représente l'état d'expansion (non-discret animations vous permettent pas d'utiliser NaN):

xmlns:is="http://schemas.microsoft.com/expression/2010/interactions"

<Grid x:Name="MainGrid" Background="White">
<VisualStateManager.CustomVisualStateManager>
<is:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates" is:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="_expanderContent">
<DiscreteDoubleKeyFrame KeyTime="0" Value="NaN"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- ... --->

Que devrait être tout ce qui est nécessaire, le liquide de mise en page créer la transition pour vous.

Si vous avez un code-behind de la solution qui serait bien, vous pouvez même utiliser le code-behind dans les dictionnaires comme ceci:

<!-- TestDictionary.xaml -->
<ResourceDictionary x:Class="Test.TestDictionary"
...>

//TestDictionary.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
namespace Test
{
partial class TestDictionary : ResourceDictionary
{
//Handlers and such here
}
}

4

C'est une vieille question, mais j'ai eu des problèmes avec cela aujourd'hui, donc je suppose que de poster ma solution serait en vaut la peine:

J'ai eu à animer la Hauteur de la propriété d'une ligne de grille (glissement vers le haut et vers le bas), mais elle a besoin de liaison dynamique, de sorte que la ligne serait glisser de nouveau à la même position qu'avant.

J'ai trouvé cette réponse très utile (après avoir vainement combattre XAML):
http://go4answers.webhost4life.com/Question/found-solution-work-protected-override-190845.aspx

Parfois de faire des choses dans le code-behind est juste plus simple:
```
        Storyboard sb = new Storyboard();
var animation = new GridLengthAnimation
{
Duration = new Duration(500.Milliseconds()),
From = this.myGridRow.Height,
To = new GridLength(IsGridRowVisible ? GridRowPreviousHeight : 0, GridUnitType.Pixel)
};
//Set the target of the animation
Storyboard.SetTarget(animation, this.myGridRow);
Storyboard.SetTargetProperty(animation, new PropertyPath("Height"));
//Kick the animation off
sb.Children.Add(animation);
sb.Begin();
```
La GridLengthAnimation classe peuvent être trouvés ici:
http://social.msdn.microsoft.com/forums/en-US/wpf/thread/da47a4b8-4d39-4d6e-a570-7dbe51a842e4/

Vous devez vous connecter pour publier un commentaire.