如何使用滑入动画为ItemsControl中插入的对象设置动画?

在查看了本网站上的几个示例之后,看来我想要的here动画类型并不难。现在,我在xaml中有此内容:

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Name="Info">
                <TextBlock Text="{Binding ItemName}"/>
                <TextBlock Text="{Binding Quantity}"/>
                <TextBlock Text="{Binding Price}"/>
            </StackPanel>
            <DataTemplate.Resources>
                <Storyboard x:Key="Anim">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info" 
                                            Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </DataTemplate.Resources>
            <DataTemplate.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Storyboard="{StaticResource Anim}" />
                </EventTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <itemspaneltemplate>
            <StackPanel Orientation="Horizontal"/>
        </itemspaneltemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

在代码中,我以这种方式将最后一项添加在第一位:

MyCollection.Insert(0,new Transaction()
{
    Name = ItemName + "   ",Quantity = QuantityTraded,Price = AtPrice
});

所有这些新项目在左上角渐隐,然后将所有现有项目推到右侧,但是行为却很迅速!我想要翻译而不是不透明,为此我必须在StackPanel内的DataTemplate中使用它:

<StackPanel.RenderTransform>
    <TransformGroup>
        <TranslateTransform/>
    </TransformGroup>
</StackPanel.RenderTransform>

StoryboardTranslateTransform中有什么要求? 它会为所有现有项目设置动画,还是会像使用这些代码一样将其捕捉到目标位置?

我尝试了将这些插入的blend:

<b:Interaction.Behaviors>
    <b:FluidmoveBehavior Duration="0:0:5" AppliesTo="Children">
        <b:FluidmoveBehavior.EaseY>
            <BackEase EasingMode="EaseOut"/>
        </b:FluidmoveBehavior.EaseY>
        <b:FluidmoveBehavior.EaseX>
            <BackEase EasingMode="EaseIn"/>
        </b:FluidmoveBehavior.EaseX>
    </b:FluidmoveBehavior>
</b:Interaction.Behaviors>

ItemsControl内部,但这并没有改变行为!

bobo3324 回答:如何使用滑入动画为ItemsControl中插入的对象设置动画?

作为起点,您可以将Width的{​​{1}}的{​​{1}}属性设置为最大宽度。实际上,随着第一个项目的增长,这会将所有项目推向右侧。

StackPanel

enter image description here

但是为0设置动画可能不是您想要的视觉效果。

您可以对此进行详细说明,而为外部元素的<Storyboard x:Key="Anim"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info" Storyboard.TargetProperty="Width"> <EasingDoubleKeyFrame KeyTime="0" Value="0" /> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100" /> </DoubleAnimationUsingKeyFrames> </Storyboard> 设置动画,从而裁剪内部Width

Width

enter image description here

您可能需要从此处进行一些调整,以删除动画中的任何硬编码值。

本文链接:https://www.f2er.com/3129997.html

大家都在问