[UWP] Change Lottie Animation Color / Theme Dynamically

Md. Niaz Mahmud 111 Reputation points
2024-09-30T07:38:02.08+00:00

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>
Universal Windows Platform (UWP)
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
810 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.