Grow/Shrink WPF Animation

Question

В WPF, когда пользователь получает фокус в TextBox, мне нужна анимация, которая заставит TextBox стать многострочной и сделать ее Width больше (пока он печатает), и когда фокус потерян, что TextBox возвращается к первоначальному размеру.

Размер неизвестен.

Кроме того, в конечном счете, TextBox должен быть в пределах WPF DataGrid.

Я раньше не делал анимацию и хотел бы помочь, чтобы я начал. Благодарю.

EDIT: Мне удалось выполнить анимацию, имея некоторые фиксированные значения ширины (что делает ее многострочной не работает, но это не так важно). Итак, теперь мой вопрос заключается в том, как я могу вернуться к своему первоначальному размеру, если это неизвестно. Есть ли множитель, который я мог бы использовать на свойстве Width?

Вот мой код до сих пор:

<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

Пока нет мультипликатора вы могли бы использовать в XAML, вы можете создать класс IValueConverter для достижения этой цели. Например:

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(); 
    } 
} 

Затем вы можете использовать это в XAML, чтобы ширина текстового поля растут и сжиматься на фактор, как так ...

 <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>