CODEWITHSUNDEEP
wpfxamlwpf-animation
user856197
user856197

Reputation:

ListBox Item Added Animation

I have a ListBox with items that will be bound to a datasource and ItemTemplate will be a user control. I need to get new items added to the datasource collection to animate / move in from out of view into view.

Here is what I have. (please ignore the lack of data binding / ItemTemplate) I want to focus on the animation.

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

If you run this, you will see the opacity change works. However the item does not animate to 0. Nor does it work if I add a duration.

Upvotes: 1

Views: 2231

Answers (2)

Steven Meiresonne
Steven Meiresonne

Reputation: 21

This is how I do an upwards slide animation on 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>

Upvotes: 2

MHollis
MHollis

Reputation: 1459

The animation is being applied to the ListBoxItem thanks to the TargetType="{x:Type ListBoxItem}" however the transformation is on the Rectangle.RenderTransform. Move the <TranslateTransform x="-50"> to the ListBoxItem's RenderTransform.

Upvotes: 1

Related Questions