Agrandir/Réduire Animation WPF

Question

Dans WPF, quand un utilisateur obtient le focus dans un TextBox, je voudrais une animation qui ferait que le TextBox devienne multiligne et fasse son Width plus grand (pendant qu'il tape) et quand le focus est perdu, que le TextBox remonte à sa taille d'origine.

La taille est inconnue.

De même, finalement, que TextBox doit être dans un WPF DataGrid.

Je n'ai jamais fait d'animation auparavant, et je voudrais de l'aide pour me lancer. Merci.

EDIT: J'ai réussi à faire l'animation tout en ayant des valeurs de largeur fixe (ce qui fait que multiline ne fonctionnait pas, mais ce n'est pas si important). Donc, ma question est maintenant comment puis-je revenir à ma taille d'origine si cela est inconnu. Y a-t-il un multiplicateur que je pourrais utiliser sur la propriété Width?

Voici mon code à ce jour:

<Window.Resources> 
     <Storyboard x:Key="GrowStoryboard"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="400" KeySpline="0.54,0.27,0.38,0.69"/> 
      </DoubleAnimationUsingKeyFrames> 
      <Int32Animation Duration="0:0:0.4" From="1" To="3" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(TextBox.MinLines)"> 
      </Int32Animation> 
     </Storyboard> 
     <Storyboard x:Key="ShrinkStoryboard"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="200" KeySpline="0.54,0.27,0.38,0.69"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </Window.Resources> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="FocusManager.GotFocus" SourceName="textBox"> 
      <BeginStoryboard x:Name="GrowStoryboard_BeginStoryboard" Storyboard="{StaticResource GrowStoryboard}"/> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="FocusManager.LostFocus" SourceName="textBox"> 
      <BeginStoryboard x:Name="ShrinkStoryboard_BeginStoryboard" Storyboard="{StaticResource ShrinkStoryboard}"/> 
     </EventTrigger> 
    </Window.Triggers> 

    <StackPanel> 
     <TextBox x:Name="textBox" Width="200" Height="20" Text="TextBox" /> 
     <TextBox x:Name="textBox1" Width="200" Height="20" Text="TextBox" /> 
    </StackPanel> 

Answer 1

Bien qu'il n'y ait pas de multiplicateur, vous pouvez utiliser en XAML, vous pouvez créer une classe IValueConverter pour y parvenir. Par exemple:

class Multiplier : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     var dblValue = 1.0; 
     if (value is double) 
      dblValue = (double)value; 
     else if (!(value is string) || !double.TryParse((string)value, out dblValue)) 
      return null; 

     var dblParam = 1.0; 
     if (parameter is double) 
      dblParam = (double)parameter; 
     else if (!(parameter is string) || !double.TryParse((string)parameter, out dblParam)) 
      return null; 

     return dblValue * dblParam; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Ensuite, vous pouvez utiliser dans le XAML pour rendre la largeur de la zone de texte grandir et rétrécir par un facteur comme si ...

 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="{Binding ElementName=textBox, Path=Width, Converter={StaticResource Multiplier}, ConverterParameter=2}" KeySpline="0.54,0.27,0.38,0.69"/> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="{Binding ElementName=textBox, Path=Width, Converter={StaticResource Multiplier}, ConverterParameter=0.5}" KeySpline="0.54,0.27,0.38,0.69"/> 
     </DoubleAnimationUsingKeyFrames>