Binding App Themes with MVVM

WorldOfBasti

Hello, I am using a carousel view to display some images with texts. I created two versions of the images, one for dark mode and one for light mode.
My problem is, that I don't know how to add the AppThemeBindings using MVVM. Everything I tried didn't work..

This is my xaml code:

    <CarouselView x:Name="carouselView" ItemsSource="{Binding myItems}" IndicatorView="indicatorView" HorizontalScrollBarVisibility="Never" CurrentItemChanged="carouselView_CurrentItemChanged">
        <CarouselView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal"/>
        </CarouselView.ItemsLayout>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Grid RowDefinitions="*, auto">
                    <Image Source="{Binding File}" HeightRequest="500" Grid.Row="1"/>
                    <Label Text="{Binding Text}" TextColor="{AppThemeBinding Light={StaticResource LightTertiaryColor}, Dark={StaticResource DarkTertiaryColor}}" FontSize="Medium" Grid.Row="2"/>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView" Margin="0, 15, 0, 25" IndicatorColor="Gray" SelectedIndicatorColor="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}"/>

And this is my Model:

    public class IntroductionModel : BaseViewModel
    {
        public List<IntroductionItemViewModel> myItems { get; set; } = new List<IntroductionItemViewModel>
        {
            new IntroductionItemViewModel(Text0, "MyImage0"),
            new IntroductionItemViewModel(Text1, "MyImage1"),
            new IntroductionItemViewModel(Text2 "MyImage2"),
            new IntroductionItemViewModel(Text3, "MyImage3"),
            new IntroductionItemViewModel(Text4, "MyImage4"),
            new IntroductionItemViewModel(Text5, "MyImage5"),
        };
    }

    public class IntroductionItemViewModel
    {
        public IntroductionItemViewModel(string text, string file)
        {
            Text = text;        
            File = file;
        }

        public string Text { get; set; }

        public string File { get; set; }
    }

I also tried to add two files in the ItemViewModel for light and dark and set the source like this:

Source="{AppThemeBinding Light={Binding LightFile}, Dark={Binding DarkFile}}"

but then nothing will displayed..

I hope anyone can help me. Thanks in advance.

Nodess

Have you tried this? https://medium.com/@milan.gohil/adding-themes-to-your-xamarin-forms-app-3da3032cc3a1

WorldOfBasti

Ok I didn't found a other solution so I switched to the CarouselView.FormsPlugin. Now it works fine. If there is a solution for the XF CarouselView, let me know!

Nodess

Have you tried this? https://medium.com/@milan.gohil/adding-themes-to-your-xamarin-forms-app-3da3032cc3a1

WorldOfBasti

Thank you for your reply @Nodess. I updated my code and I created two Styles in the App.xaml:

<Style x:Key="carouselViewStyle_Light" TargetType="CarouselView">
    <Setter Property="ItemsSource" Value="{Binding myItemsLight}"/>
</Style>

<Style x:Key="carouselViewStyle_Dark" TargetType="CarouselView">
    <Setter Property="ItemsSource" Value="{Binding myItemsDark}"/>
</Style>

and I am setting the style on the caouselview like this:

Style="{AppThemeBinding Light={StaticResource carouselViewStyle_Light}, Dark={StaticResource carouselViewStyle_Dark}}" 

It works as expected, also if I toggle the light/dark mode on the page. There is one problem I noticed:
If I toggle the light/dark mode twice (on the page), then the position can't be changed in code behind. So my 'next' button won't work.. is there any solution?

WorldOfBasti

Ok I didn't found a other solution so I switched to the CarouselView.FormsPlugin. Now it works fine. If there is a solution for the XF CarouselView, let me know!