ProgressRing not showing when Theme changed in runtime

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?

I have found something, after removing Parent/Outer element's style, issue not repro. IsActive value is changed nowhere. I will check with that style again & get back to you if I find any issue again. Thanks for your response :-) — Abu Raihan
@NicoZhu-MSFT , I have updated the question. please take a look. With above configuration issue always repro. — Abu Raihan

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2021-05-05T09:55:34

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();
}

ProgressRing not showing when Theme changed in runtime

1 Answers