增长/缩小 WPF 动画

Question

在 WPF 中，当用户在 中获得焦点时TextBox，我想要一些动画，该动画可以使TextBox变成多行并使其Width变大（当他打字时），并且当焦点丢失时，它TextBox会恢复到其原始大小。

大小未知。

此外，最终，这TextBox需要在 WPF 中DataGrid。

我以前从未做过动画，希望能帮助我入门。谢谢。

编辑：我已经成功地制作了动画，同时具有一些固定的宽度值（使其多行不起作用，但这并不重要）。所以我现在的问题是，如果这是未知的，我怎样才能回到原来的尺寸。我可以在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>