How to apply transitions in ItemsView on reload in WinUI 3?

youki 1,016 Reputation points
2024-03-13T16:26:29.3166667+00:00

I have an ItemsView and the transition gets applied when loading the items by a ViewModel but when I reload the ViewModel, there is no transition.

<ItemsView x:Name="itemsView"
	Margin="0,20,0,0"
	Height="Auto"
	CornerRadius="3"
	HorizontalAlignment="Stretch"
	SelectionMode="None"
	VerticalAlignment="Top"  
 
	ItemsSource="{x:Bind BookViewModel.Books}">                    
	<ItemsView.ItemTemplate>
		<DataTemplate x:DataType="local:Book">
			<ItemContainer HorizontalAlignment="Stretch" Height="40" Background="#232323" x:Name="itemContainer"  Margin="0,0,20,0">
				<ItemContainer.Transitions>
					<TransitionCollection>
						<EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="True"/>
					</TransitionCollection>    
				</ItemContainer.Transitions>
				
				<Grid Padding="5,5,5,0" x:Name="grid">
					<Grid.RowDefinitions>
						<RowDefinition Height="auto" />
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition></ColumnDefinition>
					</Grid.ColumnDefinitions>
					<StackPanel Orientation="Horizontal">
						<CheckBox Margin="10,0,-80,0" Width="0" MaxWidth="5"/>
						<Image Height="20" Width="20" Margin="0,0,10,0"  Source="{x:Bind Icon, Mode=OneWay}" />
						<TextBlock Text="{x:Bind Name, Mode=OneWay}" TextWrapping="Wrap" FontSize="14" VerticalAlignment="Center"/>
					</StackPanel>
				</Grid>
				
			</ItemContainer>
		</DataTemplate>
	</ItemsView.ItemTemplate>
</ItemsView>


I'm just reloading my ViewModel by the clear method which clears the bound ItemsView:

BookViewModel().Books().Clear();

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
745 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. youki 1,016 Reputation points
    2024-03-13T18:08:09.4433333+00:00

    Omg,

    got it.

    You have to add the special transition.

    <ItemContainer.Transitions>
        <TransitionCollection>
            <ContentThemeTransition/>
            <EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="False"></EntranceThemeTransition>
            <!--<RepositionThemeTransition IsStaggeringEnabled="False"/>-->
        </TransitionCollection>    
    </ItemContainer.Transitions>
    
    
    0 comments No comments