Question

我有ListBox项，其中的项目将绑定到数据源，而ItemTemplate将是用户控件。我需要将新项目添加到数据源集合中，以便从视图中动画/移入视图。

这就是我所拥有的。（请忽略缺少数据绑定/ ItemTemplate）我想专注于动画。

<ListBox Width="350" Height="125">
   <ListBox.ItemContainerStyle>
      <Style TargetType="{x:Type ListBoxItem}">
         <Setter Property="LayoutTransform">
            <Setter.Value>
               <ScaleTransform x:Name="transform"/>
            </Setter.Value>
         </Setter>
         <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" />
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" To="-0"/>
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Style.Triggers>
      </Style>
   </ListBox.ItemContainerStyle>
   <ListBoxItem>
      <Rectangle Width="320" Height="50" Fill="Green">
         <Rectangle.RenderTransform>
            <TranslateTransform X="-50"/>
         </Rectangle.RenderTransform>
      </Rectangle>
   </ListBoxItem>
</ListBox>

如果您运行此操作，您将看到不透明度更改有效。但是，该项目的动画效果为0.如果我添加持续时间，它也不起作用。

Answer 1

这是我在listboxitems上执行向上幻灯片动画的方式：

<ListBox DataContextChanged="klantListBox_DataContextChanged" Name="klantListBox" Width="380" Height="255" Margin="0 10 10 0" ItemsSource="{Binding}" SelectionChanged="klantListBox_SelectionChanged">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <TranslateTransform Y="230" X="0"  />
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>

                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" To="0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>

Answer 2

由于动画正在应用于ListBoxItem TargetType="{x:Type ListBoxItem}" 然而转型是在 Rectangle.RenderTransform。将<TranslateTransform x="-50">移至ListBoxItem＆＃39; s RenderTransform。

ListBox项目添加动画

2 个答案: