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中使用它来使Textbox的宽度增长和缩小一个因子......

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

增长/收缩WPF动画

1 个答案: