放大/缩小WPF动画 [英] Grow/Shrink WPF Animation

查看:1514
本文介绍了放大/缩小WPF动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在WPF中,当用户获得焦点在 A 文本框,我想一些动画,将让文本框成为多行,并使其宽度更大(虽然他是打字),当丢失焦点时,文本框返回到原来的大小。

的大小是未知的。

此外,最终的文本框需要一个WPF中的DataGrid

我从来没有做过动画,想一些帮助让我开始。谢谢你。

编辑:我已经成功地做​​动画,同时具有一些固定宽度值(使它多行不工作,但它并不重要)。所以现在我的问题是我怎么能回到我原来的大小,如果这是个未知数。是否有乘数我可以在宽度属性中使用?

下面是我的code迄今:

 < Window.Resources>
        <情节提要X:键=GrowStoryboard>
            < D​​oubleAnimationUsingKeyFrames的BeginTime =00:00:00Storyboard.TargetName =textBox中Storyboard.TargetProperty =(FrameworkElement.Width)>
                &所述; SplineDoubleKeyFrame KeyTime =00:00:00.4000000值=400KeySpline =0.54,0.27,0.38,0.69/>
            < / DoubleAnimationUsingKeyFrames>
            &所述; Int32Animation持续时间=0:0:0.4从=1要=3Storyboard.TargetName =的textBoxStoryboard.TargetProperty =(TextBox.MinLines)>
            < / Int32Animation>
        < /故事板>
        <情节提要X:键=ShrinkStoryboard>
            < D​​oubleAnimationUsingKeyFrames的BeginTime =00:00:00Storyboard.TargetName =textBox中Storyboard.TargetProperty =(FrameworkElement.Width)>
                &所述; SplineDoubleKeyFrame KeyTime =00:00:00.4000000值=200KeySpline =0.54,0.27,0.38,0.69/>
            < / DoubleAnimationUsingKeyFrames>
        < /故事板>
    < /Window.Resources>
    < Window.Triggers>
        <的EventTrigger RoutedEvent =FocusManager.GotFocusSOURCENAME =textBox中>
            < BeginStoryboard X:NAME =GrowStoryboard_BeginStoryboard故事板={StaticResource的GrowStoryboard}/>
        < /&的EventTrigger GT;
        <的EventTrigger RoutedEvent =FocusManager.LostFocusSOURCENAME =textBox中>
            < BeginStoryboard X:NAME =ShrinkStoryboard_BeginStoryboard故事板={StaticResource的ShrinkStoryboard}/>
        < /&的EventTrigger GT;
    < /Window.Triggers>    <&StackPanel的GT;
        <文本框X:名称=的textBoxWIDTH =200HEIGHT =20文本=文本框/>
        <文本框X:NAME =textBox1的WIDTH =200HEIGHT =20文本=文本框/>
    < / StackPanel的>


解决方案

虽然没有倍增,你可以在XAML中使用,你可以创建一个类的IValueConverter做到这一点。例如:

 类乘数:的IValueConverter
{
    公共对象转换(对象的值,类型TARGETTYPE,对象参数,System.Globalization.CultureInfo文化)
    {
        变种dblValue = 1.0;
        如果(值是双)
            dblValue =(双)值;
        否则,如果(!(值为字符串)||!double.TryParse((串)值,出dblValue))
            返回null;        变种dblParam = 1.0;
        如果(参数是双)
            dblParam =(双)参数;
        否则,如果(!(参数字符串)||!double.TryParse((字符串)参数,出dblParam))
            返回null;        返回dblValue * dblParam;
    }    公共对象ConvertBack(对象的值,类型TARGETTYPE,对象参数,System.Globalization.CultureInfo文化)
    {
        抛出新NotImplementedException();
    }
}

然后就可以使用这个在XAML使文本框的宽度和成长的一个因素,像这样缩小...

 < D​​oubleAnimationUsingKeyFrames的BeginTime =00:00:00Storyboard.TargetName =textBox中Storyboard.TargetProperty =(FrameworkElement.Width)>
            < SplineDoubleKeyFrame KeyTime =0:0:0.4VALUE ={绑定的ElementName =文本框中路径=宽度,转换器= {StaticResource的乘数},ConverterParameter = 2}KeySpline =0.54,0.27,0.38,0.69/&GT ;
        < / DoubleAnimationUsingKeyFrames>        < D​​oubleAnimationUsingKeyFrames的BeginTime =00:00:00Storyboard.TargetName =textBox中Storyboard.TargetProperty =(FrameworkElement.Width)>
            < SplineDoubleKeyFrame KeyTime =0:0:0.4VALUE ={绑定的ElementName =文本框中路径=宽度,转换器= {StaticResource的乘数},ConverterParameter = 0.5}KeySpline =0.54,0.27,0.38,0.69/&GT ;
        < / DoubleAnimationUsingKeyFrames>

In WPF, when a user gets focus in a TextBox, I would like some animation that would make the TextBox becomes multiline and make its Width bigger (while he is typing) and when the focus is lost, that the TextBox goes back to its original size.

The size is unknown.

Also, ultimately, that TextBox needs to be within a WPF DataGrid.

I have never done animation before, and would like some help to get me started. Thanks.

EDIT: I have succeeded in doing the animation while having the some fixed width values (making it multiline did not work, but it is not that important). So my question now is how can I go back to my original size if that is unknown. Is there multiplier I could use on the Width property?

Here is my code so far:

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

解决方案

While there is no multiplier you could use in XAML, you could create a IValueConverter class to accomplish this. For example:

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

Then you can use this in the XAML to make the Textbox's width grow and shrink by a factor like so...

        <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动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆