How to dynamically change the Itemtemplate of a ListView without a flicker?

I am working on a WinUI3 project. I have a ListView where I want to change the datatemplate during runtime. Whenever I do that I could see a flicker or a visible flash.

Template 1

<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
                    <Grid Padding=""0,10,0,10"" Background=""#f5f7fe"" HorizontalAlignment=""Stretch"">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text=""{0}"" Foreground=""#62686E"" Grid.Column=""0"" HorizontalAlignment=""Left"" FontWeight=""SemiBold"" Margin=""0,0,0,0""/>
                        <TextBlock Text=""{1}"" Foreground=""#62686E"" Grid.Column=""1"" HorizontalAlignment=""Left"" FontWeight=""SemiBold"" Margin=""0,0,0,0""/>
                        <TextBlock Text=""{2}"" Foreground=""#62686E"" Grid.Column=""2"" HorizontalAlignment=""Left"" FontWeight=""SemiBold""/>
                        <TextBlock Text=""{3}"" Foreground=""#62686E"" Grid.Column=""3"" HorizontalAlignment=""Left"" FontWeight=""SemiBold"" Margin=""0,0,0,0""/>
                        <TextBlock Text=""{4}"" Foreground=""#62686E"" Grid.Column=""4"" HorizontalAlignment=""Left"" FontWeight=""SemiBold""/>
                        <TextBlock Text=""{5}"" Foreground=""#62686E"" Grid.Column=""5"" HorizontalAlignment=""Left"" FontWeight=""SemiBold"" Margin=""0,0,0,0""/>
                        <TextBlock Text=""{6}"" Foreground=""#62686E"" Grid.Column=""6"" HorizontalAlignment=""Left"" FontWeight=""SemiBold"" Margin=""0,0,0,0""/>
                    </Grid>
                </DataTemplate>

Template 2

<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
                <Grid VerticalAlignment=""Stretch"" HorizontalAlignment=""Stretch"">
                    <Grid Margin=""3,16,8,16"">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=""*""/>
                            <ColumnDefinition Width=""*""/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column=""0"" Orientation=""Vertical"">
                            <TextBlock AutomationProperties.AutomationId=""OrderNo""
                               Foreground=""{ThemeResource Foreground}""
                               Style=""{StaticResource DefaultMediumTextBlockStyle}""
                               HorizontalAlignment=""Left""
                               Text=""{Binding {0}}"" />
                            <TextBlock TextTrimming=""CharacterEllipsis""
                               Margin=""0,8,0,0""
                               AutomationProperties.AutomationId=""UserName""
                               Foreground=""{ThemeResource Foreground}""
                               MaxWidth=""200""
                               HorizontalAlignment=""Left""
                               Text=""{Binding {1}}"" />
                        </StackPanel>
                        <StackPanel Grid.Column=""1"" Orientation=""Vertical"" HorizontalAlignment=""Right"">
                            <TextBlock AutomationProperties.AutomationId=""OrderAmount""
                               Foreground=""{ThemeResource Foreground}""
                               Margin=""0,0,0,0""
                               HorizontalAlignment=""Right""
                               Text=""{Binding {2}}"" />
                            <TextBlock Margin=""0,8,0,0""
                               Name=""Status""
                               Foreground=""{Binding {3}}""
                               AutomationProperties.AutomationId=""Status""
                               HorizontalAlignment=""Right""
                               Text=""{Binding {4}}"" />
                        </StackPanel>
                    </Grid>
                    <Border BorderThickness=""0,0,0,1""
                    BorderBrush=""{ThemeResource ListViewSeparatorBorderBrush}""
                    Margin=""-20,0,-6,0""
                    Grid.ColumnSpan=""2""/>
                </Grid>
            </DataTemplate>"

I am changing the ItemTemplate from Template1 to Template2. I could see a flash or flicker everytime when change the template. Is it a rendering issue. How do I fix this?

Solution

The issue I'm facing is not related to dynamically changing the ItemTemplate of the ListView. Initially, I suspected that switching between different ItemTemplates at runtime might be causing the problem, but after further investigation, I realized that’s not the case.

The real problem lies in the ItemContainerStyle. Specifically, when I apply a custom ItemContainerStyle to the ListView, the issue begins to appear. If I remove the custom style and let the ListView use its default ItemContainerStyle, everything works as expected.