Question

向DataTemplate-Generated控件添加动画时遇到一些问题。我想动画边框高度。
XAML代码：

<StackPanel x:Name="stackpanel">
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Height="42">
                    <!--There some controls-->
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

有C＃代码（但它只适用于最后一项）：

StoryBoard maxhasb = new Storyboard();
StoryBoard minhasb = new Storyboard();
var maximizeHeightAnimation= new DoubleAnimation(42, 72, duration, FillBehavior.HoldEnd);
var minimizeHeightAnimation= new DoubleAnimation(72, 42, duration, FillBehavior.HoldEnd);
....
ItemsControl itemsControl = (ItemsControl)stackpanel.Children[0];
    foreach (var item in itemsControl.Items)
    {
        ContentPresenter contentPresenter = (ContentPresenter)itemsControl.ItemContainerGenerator.ContainerFromItem(item);
        Border border = (Border)itemsControl.ContentTemplate.LoadContent();
        Storyboard.SetTarget(maximizeHeightAnimation, border);
        Storyboard.SetTargetProperty(maximizeHeightAnimation, new PropertyPath(HeightProperty));
        Storyboard.SetTarget(minimizeHeightAnimation, border);
        Storyboard.SetTargetProperty(minimizeHeightAnimation, new PropertyPath(HeightProperty));
        maxhasb.Children.Add(maximizeHeightAnimation);
        minhasb.Children.Add(minimizeHeightAnimation);
    }

我有什么不对的吗？

Answer 1

很难弄清楚你打算用这个做什么。我想这个想法是增加一个项目的高度，然后在它插入时减少一点。也许这并不是你想要的。您可以找到＆＃34; Toast＆＃34;的样本。在这篇文章中有趣： https://social.technet.microsoft.com/wiki/contents/articles/31416.wpf-mvvm-friendly-user-notification.aspx#Toast

您可能只想使用layouttransform为ScaleY设置动画，然后向下播放而不会反弹。但也许弹跳会给你你想要的效果，或者你不会对特定的效果感到困扰。

来自ToastList：

<ListBox ItemsSource="{Binding Messages}" BorderBrush="Transparent" Background="LightGray">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.2" FillBehavior="Stop" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:.2" FillBehavior="Stop">
                                    <DoubleAnimation.EasingFunction>
                                        <BounceEase Bounces="2" Bounciness="6"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <DataTrigger Binding="{Binding IsGoing}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1.2" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" To="0" Duration="0:0:1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Background="Yellow"
                    CornerRadius="3"
                    BorderThickness="1"
                    Margin="4" Padding="4">
                <Border.BitmapEffect>
                    <DropShadowBitmapEffect ShadowDepth="4" Color="Purple" />
                </Border.BitmapEffect>
                <TextBlock Text="{Binding Msg}" FontWeight="SemiBold" TextWrapping="Wrap"  MaxWidth="200"/>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

将动画添加到DataTemplate生成的控件

1 个答案: