XAML Activate icon animation by click on itself

Question

I have an animated icon in XAML using Lottie. I made a separate folder AnimatedVisuals where I keep icons in json format.

MyPage.xaml

<winui:AnimatedVisualPlayer x:Name="LottiePlayer" AutoPlay="False" Width="40" Height="40">
    <lottie:LottieVisualSource x:Name="LottieJsonSource" UriSource="ms-appx:///AnimatedVisuals/plus-icon.json" />
</winui:AnimatedVisualPlayer>
<Button Click="PlayButton_Click">Play</Button>

I can play it using the separate button
MyPage.xaml.cs

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    _ = LottiePlayer.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);
}

Problems

1. How can I activate the icon animation when I click on it? Now I activate with a separate button. Maybe with some kind of overlaping?

2. How can I link the result of question 1 to a Command? When I click the icon, a command is called in MyPageViewModel.cs?
   <Button Command="{x:Bind ViewModel.CreateFileCommand}" />

3. Is this the right way to activate the animation? I use MVVM and keep code behing as empty as possible. Can I activate the animation from XAML or ViewModel.cs instead of MyPage.xaml.cs?

Try 1

I can make a separate style with the icon and apply it to a button.
ButtonStyle.xaml

<Style
    x:Key="CircleButtonStyle"
    BasedOn="{StaticResource DefaultButtonStyle}"
    TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid">
                    <Ellipse x:Name="EllipseBase" Fill="#239E56" />

                    <winui:AnimatedVisualPlayer x:Name="LottiePlayer" AutoPlay="False" Width="40" Height="40">
                        <lottie:LottieVisualSource x:Name="LottieJsonSource" UriSource="ms-appx:///AnimatedVisuals/plus-icon.json" />
                    </winui:AnimatedVisualPlayer>

                    <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
[...]

<Button Width="40" Height="40" Style="{StaticResource CircleButtonStyle}" Command="{x:Bind ViewModel.CreateFileCommand}" />

The blockage to my try is I cannot activate the animation because ButtonStyle.xaml is a style file without code behind to activate the animation. It has no access to _ = LottiePlayer.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);.

Useful Notes

Lottie-Windows Github
My app is a WinUI 3 project scaffolded with Template Studio.

Answer 1

You can set it as Button's Content:

<Button
    Padding="0"
    Background="Transparent"
    BorderThickness="0"
    Click="PlayButton_Click">
    <winui:AnimatedVisualPlayer
        x:Name="LottiePlayer"
        Width="40"
        Height="40"
        AutoPlay="False">
        <lottie:LottieVisualSource
            x:Name="LottieJsonSource"
            UriSource="ms-appx:///Assets/AnimatedVisuals/plus-icon.json" />
    </winui:AnimatedVisualPlayer>
</Button>

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    _ = LottiePlayer.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);
}