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.
Have you tried this? https://medium.com/@milan.gohil/adding-themes-to-your-xamarin-forms-app-3da3032cc3a1
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!
Answers
Have you tried this? https://medium.com/@milan.gohil/adding-themes-to-your-xamarin-forms-app-3da3032cc3a1
Thank you for your reply @Nodess. I updated my code and I created two Styles in the App.xaml:
and I am setting the style on the caouselview like this:
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?
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!