扩大/缩小 WPF 动画答案

【问题标题】：Grow/Shrink WPF Animation扩大/缩小 WPF 动画
【发布时间】：2011-01-09 17:02:15
【问题描述】：

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

【问题讨论】：

标签： wpf animation textbox width storyboard

【解决方案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>

【讨论】：