how do i bind a skiasharp animation based on a string in maui?

Question

i'm creating a weather app and i get as a response from the api the status of the current weather. since it's a string i could store it in a public string currentWeather with the [ObservableProperty] annotation. since i have animations stored in my Resources/Raw folder, i'm trying to bind from the xaml code the SKLottieView to the CurrentWeather property that was created by the [ObservableProperty] which is placed in the viewmodel. the problem is, it does take the space in my application through the HeightRequest and WidthRequest, but it's not visible.

XAML code
<skia:SKLottieView
                Source="{Binding CurrentWeather}"
                RepeatCount="-1"
                HeightRequest="300"
                WidthRequest="200"
                HorizontalOptions="Center" >
            </skia:SKLottieView>

ViewModel code
[ObservableProperty]
public string currentWeather;

public YourCurrentLocationForecast(WeatherService weatherService, IConnectivity connectivity, IGeolocation geolocation)
    {
        this.weatherService = weatherService;
        this.connectivity = connectivity;
        this.geolocation = geolocation;
        title = "Weather";
        CurrentWeather = "night_raining.json";
        TestingTheDailyStatMethod();
    }

as you've noticed, i tried first to hardcode the CurrentWeather property just to check whether it would work before i create a converter class to convert the received status string from the api into the json animation name. i wanted to see if it works. do you have any advice on how i should bind in the xaml code, maybe i'm not doing something right.

tried in the beginning the same way as binding am image based on a string, but it's still not visible.

Answer 1

According to SKLottieView document, the Source property is type of SKLottieImageSource. It cannot automatically convert a string into SKLottieImageSource

You may try the following way to set the currentWeather property,

    [ObservableProperty]
    public SKFileLottieImageSource currentWeather = new SKFileLottieImageSource();
    
    public YourCurrentLocationForecast(WeatherService weatherService, IConnectivity connectivity, IGeolocation geolocation)
    {
     ....
     CurrentWeather.File = "night_raining.json";
    }

Hope it helps!