Forum General


The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Binding App Themes with MVVM

WorldOfBastiWorldOfBasti Member ✭✭✭

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">
            <LinearItemsLayout Orientation="Horizontal"/>
                <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"/>
    <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.

Best Answers


  • WorldOfBastiWorldOfBasti Member ✭✭✭

    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 x:Key="carouselViewStyle_Dark" TargetType="CarouselView">
        <Setter Property="ItemsSource" Value="{Binding myItemsDark}"/>

    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?

  • WorldOfBastiWorldOfBasti Member ✭✭✭
    Accepted Answer

    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!

Sign In or Register to comment.