CODEWITHSUNDEEP
c#.netxamlanimationuwp
SuperJMN
SuperJMN

Reputation: 13982

Fade-In effect for new items of ListView

I would like that whenever a new item is added to a ListView, is shows up with a fade in effect (Opacity 0 => 1)

For now, I have applied a Transition to the inner Panel to make new elements come from below with a nice animation:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>

        <ItemsStackPanel ItemsUpdatingScrollMode="KeepLastItemInView">
            <ItemsStackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition
                        FromVerticalOffset="400" />
                </TransitionCollection>
            </ItemsStackPanel.ChildrenTransitions>
        </ItemsStackPanel>

    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Can I do something similar to the Fade In effect?

Upvotes: 1

Views: 1482

Answers (1)

Sunteen Wu
Sunteen Wu

Reputation: 10627

I would like that whenever a new item is added to a ListView, is shows up with a fade in effect (Opacity 0 => 1)

If you want to animate one item when it is added, actually by testing on my side, when adding a new item, it shows up with fade in effect by default. The ItemContainerTransitions of the default ListView styles and templates contains Add​Delete​Theme​Transition, so when you adding or deleting item from the ListView it has default animation to animate item in and out of view.

enter image description here

If you want to animate the ItemsStackPanel to make the Opacity from 0 to 1, you may use the Double​Animation. Code as follows:

<ListView.ItemsPanel>
   <ItemsPanelTemplate>
       <ItemsStackPanel
           x:Name="stack"
           ItemsUpdatingScrollMode="KeepLastItemInView"
           Opacity="0">
           <ItemsStackPanel.Triggers>
               <EventTrigger>
                   <BeginStoryboard>
                       <Storyboard>
                           <DoubleAnimation
                               Storyboard.TargetName="stack"
                               Storyboard.TargetProperty="Opacity"
                               To="1"
                               Duration="0:0:5" />
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
           </ItemsStackPanel.Triggers>
       </ItemsStackPanel>
   </ItemsPanelTemplate>
</ListView.ItemsPanel>

If you don't want the default fade in effect defined by ItemContainerTransitions, you may add the storyboard as you want to the elements inside the ItemTemplate, for example:

<ListView.ItemTemplate>
   <DataTemplate x:DataType="local:Category">
       <StackPanel x:Name="stack" Opacity="0">
           <StackPanel.Triggers>
               <EventTrigger>
                   <BeginStoryboard>
                       <Storyboard>
                           <DoubleAnimation
                               Storyboard.TargetName="stack"
                               Storyboard.TargetProperty="Opacity"
                               To="1"
                               Duration="0:0:5" />
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
           </StackPanel.Triggers>
           <TextBlock Text="{x:Bind Name}" />
       </StackPanel>
   </DataTemplate>
</ListView.ItemTemplate>

Upvotes: 1

Related Questions