Stage.xaml

<UserControl x:Class="LottieViewer.Stage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:LottieViewer"
             xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
             xmlns:viewmodel="using:LottieViewer.ViewModel"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">
    <UserControl.Resources>
        <viewmodel:LottieVisualDiagnosticsViewModel x:Name="_diagnosticsViewModel" DiagnosticsObject="{x:Bind _player.Diagnostics, Mode=OneWay}"/>
    </UserControl.Resources>

    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.4*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="0.4*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.4*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.4*" />
            </Grid.ColumnDefinitions>
            <!--
                Background canvas. Initialized from code.
            -->
            <Canvas x:Name="_canvas" Grid.ColumnSpan="3" Grid.RowSpan="3" Visibility="Collapsed">
            </Canvas>
            <local:FeedbackLottie x:Name="_feedbackLottie"
                                  Grid.Row="1"
                                  Grid.Column="1" />
        </Grid>

        <Grid>
            <!--  Define a ninegrid with the composition in the middle  -->
            <Grid.RowDefinitions>
                <RowDefinition Height="0.1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="0.1*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
            </Grid.ColumnDefinitions>

            <!--
                Viewbox is necessary for stretching because we want to keep the Lottie unstretched so that
                the background has the same aspect ratio as the Lottie. This allows the user to see the
                shape of the Lottie's bounding rectangle.
            -->
            <Viewbox Grid.Row="1"
                     Grid.Column="1"
                     Stretch="Uniform"
                     MaxHeight="512"
                     x:Name="_playerContainer">
                <Border>
                    <Border.Background>
                        <SolidColorBrush Color="{x:Bind ArtboardColor, Mode=OneWay}" x:Name="_backgroundColorBrush"/>
                    </Border.Background>
                    <!--  Stretch="None" so that the Border will have the same shape as the Lottie.  -->
                    <muxc:AnimatedVisualPlayer x:Name="_player"
                                            AutomationProperties.Name="Current animation"
                                            AutoPlay="False"
                                            Stretch="None">
                        <lottie:LottieVisualSource x:Name="_playerSource"
                                                Options="All" />
                    </muxc:AnimatedVisualPlayer>
                </Border>
            </Viewbox>
        </Grid>
    </Grid>
</UserControl>