Change Data template in ListView programmatically

Question

I'm working on ListView in UWP. I'm changing the Data template of my ListView programmatically, I'm facing a glitch while the data template was changing. how to make a smooth transition while changing. Like UWP Mail App (Inbox while resizing).

Answer 1

Hello, Welcome to Micorosoft Q&A,

When you resize the inbox ListView in Mail app the maill's in the ListView Format changes Like (Date , Subject of Mail and few content over in it.)

It looks control's RepositionThemeTransition, you could add this theme transition for Date control. I will make Rectangle demo below.

Add RepositionThemeTransition for Rectangle Transitions.

<ListView x:Name="MyListView">  
    <ListView.ItemContainerStyle>  
        <Style TargetType="ListViewItem">  
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />  
        </Style>  
    </ListView.ItemContainerStyle>  
    <ListView.ItemTemplate>  
        <DataTemplate>  
            <Grid Margin="0,10,0,0">  
                <TextBlock Text="{Binding}" />  
                <Rectangle  
                    x:Name="TimeTag"  
                    Width="100"  
                    Height="44"  
                    HorizontalAlignment="Right"  
                    Fill="Red"  
                    Opacity="0.5">  
                    <Rectangle.Transitions>  
                        <TransitionCollection>  
                            <RepositionThemeTransition />  
                        </TransitionCollection>  
                    </Rectangle.Transitions>  
  
                </Rectangle>  
            </Grid>  
        </DataTemplate>  
    </ListView.ItemTemplate>  
</ListView>  

When you resize, it will update the Rectangle position with animation. For more please refer transition api.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.