[UWP] Change Lottie Animation Color / Theme Dynamically

Md. Niaz Mahmud 111

I have used lottie json animation in xaml uwp using "CommunityToolkit.WinUI.Lottie" and "AnimatedVisualPlayer".

But for dark theme I can not see the lottie animation as the color is fixed. How can we dynamically change color of lottie animation?

<Page x:Class="Lottie_Test.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Lottie_Test"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="White">
        <Border Background="Transparent"
                BorderThickness="3"
                BorderBrush="Transparent"
                Width="30"
                Height="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <muxc:AnimatedVisualPlayer x:Name="VoiceWaveLottiePlayer"
                                       AutomationProperties.Name="Lottie animation"
                                       AutoPlay="True">
                <lottie:LottieVisualSource x:Name="LottieJsonSource"
                                           Options="All"
                                           UriSource="ms-appx:///Assets/lottie_equalizer.json" />
            </muxc:AnimatedVisualPlayer>
        </Border>
    </Grid>
</Page>

Castorix31 84,956

In WinUI 3, If I change the Background of the border, for example LightGray, on a random Lottie I got from Google , I get :

<Window
    x:Class="WinUI3_Lottie.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3_Lottie"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:animatedvisuals="using:AnimatedVisuals"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
        <!--Copied from WinUI3 Gallery-->
        <Border Width="400" Height="400"
                            BorderBrush="{ThemeResource ToolTipBorderThemeBrush}"
                            BorderThickness="5"
                            Background="LightGray"
                            Margin="0, 20, 0, 20">

            <!--  AnimatedVisualPlayer  -->
            <AnimatedVisualPlayer x:Name="Player" AutoPlay="False">

                <AnimatedVisualPlayer.Source>
                    <!--  Codegen-ed Lottie animation source: /AnimatedVisuals/LottieLogo1.cs -->
                    <animatedvisuals:_130153_santa_telegram_sticker/>
                </AnimatedVisualPlayer.Source>

                <!-- Fallback since Lottie-Windows is only supported on OS version 17763 and above -->
                <AnimatedVisualPlayer.FallbackContent>
                    <DataTemplate>
                        <Image Source="/Assets/130153-santa-telegram-sticker.gif"/>
                    </DataTemplate>
                </AnimatedVisualPlayer.FallbackContent>
            </AnimatedVisualPlayer>
        </Border>
    </StackPanel>
</Window>

User's image

Share via

[UWP] Change Lottie Animation Color / Theme Dynamically

Your answer