ProgressRing not showing when Theme changed in runtime - xaml

Question

I am developing an UWP app. I used a ProgressRing as below code:
<ListViewItem Template="{ThemeResource SeetingsListItemContentThemeStyle}"
BorderBrush="{ThemeResource SettingsListItemBorderThemeColor}"
BorderThickness="0,0,0,1"
AutomationProperties.SizeOfSet="0"
AutomationProperties.Name="{Binding SettingsAutomationText, Mode=OneWay}">
<ProgressRing VerticalAlignment="Center"
Margin="18, 0, 0, 14"
Height="21"
Width="21"
IsActive="True"
Foreground="Red"
Visibility="Visible"/>
</ListViewItem>
"SeetingsListItemContentThemeStyle" is as below:
For Light Theme:
<ControlTemplate x:Key="SeetingsListItemContentThemeStyle" TargetType="ListViewItem">
<ListViewItemPresenter x:Name="Root"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
HorizontalContentAlignment="Left"
Control.IsTemplateFocusTarget="False"
PressedBackground="#12000000"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="#08000000"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
SelectedPressedBackground="#12000000"
SelectedPointerOverBackground="#08000000"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
</ListViewItemPresenter>
</ControlTemplate>
For Dark Theme:
<ControlTemplate x:Key="SeetingsListItemContentThemeStyle" TargetType="ListViewItem">
<ListViewItemPresenter x:Name="Root"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
HorizontalContentAlignment="Left"
Control.IsTemplateFocusTarget="False"
PressedBackground="#12ffffff"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="#08ffffff"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
SelectedPressedBackground="#12ffffff"
SelectedPointerOverBackground="#08ffffff"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
</ListViewItemPresenter>
</ControlTemplate>
The progress ring is showing correctly when the parent page loads. But it is not showing when I change theme from System. Once this issue occurs, Progress Ring not shows for Light-Dark both themes. If I go back to some other pages and come back to this page again, this time progress ring shows correctly.
Can anyone please help me to work Progress Ring correctly after theme change in app runtime?

Answer 1

ProgressRing not showing when Theme changed in runtime
I think the problem is the ProgressRing ring animation was be destroy when you change ListViewItem's ControlTemplate by update current system theme. For this scenario, you could reload current page to rebuild this animation after the theme change.
private void Button_Click(object sender, RoutedEventArgs e)
{
Reload();
}
public bool Reload() { return Reload(null); }
private bool Reload(object param)
{
Type type = this.Frame.CurrentSourcePageType;
if (this.Frame.BackStack.Any())
{
type = this.Frame.BackStack.Last().SourcePageType;
param = this.Frame.BackStack.Last().Parameter;
}
try { return this.Frame.Navigate(type, param); }
finally { this.Frame.BackStack.Remove(this.Frame.BackStack.Last()); }
}
Usage
public MainPage()
{
this.InitializeComponent();
var Listener = new ThemeListener();
Listener.ThemeChanged += Listener_ThemeChanged;
}
private void Listener_ThemeChanged(ThemeListener sender)
{
Reload();
}