Display a progress ring in a AppBarButton

[igiona]

I would like to have an AppBarButton in the utu:NavigationBar which shows a progress ring when I press the button and an operation is in progress. While the progress-ring runs, the displayed icon should be hidden.

I tried the following approach, which works on Windows but doesn't on Android (nothing is displayed in the control), and I guess the other Uno heads too.
This is not very surprising given that apparently the Content property is not supported in Uno (https://platform.uno/docs/articles/implemented/microsoft-ui-xaml-controls-appbarbutton.html#breadcrumb).

<AppBarButton>
  <AppBarButton.Content>
    <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
      <ProgressRing IsActive="{Binding OperationInProgress}" utu:AutoLayout.CounterAlignment="Center" />
      <BitmapIcon UriSource="ms-appx:///MyApp/Assets/Icons/bluetooth.png" Visibility="{Binding OperationInProgress, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter='inverse'}" />
    </StackPanel>
  </AppBarButton.Content>
</AppBarButton>

Provided this Uno limitation, what would be the suggest Uno way to achieve this functionality?

Many thanks in Advance!

[jeromelaban]

@igiona at this time, on Android, custom content is not supported in the AppBarButton, for the same reason SVGs are not supported. The only way around is to not use the native AppBarButton, and use the XAML ones, which render completely using Uno.

[igiona]

Thank you @jeromelaban for the explanation.
I'm not sure I understand what you you mean with "use the XAML ones", could you please elaborate on this?
Thanks again 👍

[jeromelaban]

The CommandBar is likely using the native styles, and you need to use the fluent/Windows style instead.