Hi everyone !
I am using the card Views plugin in my Xamarin Forms project. What I want to do is use two carouselview one after the other. Both carousel will bind different information. If I normally used a single carousel, I would go to the .cs file and bind the information from the api to the BindingContex. But now we have information from two different api. So I can't do two bind to BindingContex on the .cs side. I want to do this with mvvm.
In my example code below I just threw a viewmodel code. How do I bind two different viewmodels to the page?
CollectionViewModel.cs
public class CollectionViewModel : INotifyPropertyChanged { readonly ServiceManager manager = new ServiceManager(); readonly IList<DLCollections> collectionModel = new ObservableCollection<DLCollections>(); public event PropertyChangedEventHandler PropertyChanged; public IList<DLCollections> Collections { set { if (Collections != value) { Collections = value; OnPropertyChanged("Collections"); GetCollections(); } } get { return Collections; } } private async void GetCollections() { foreach (DLCollections item in await manager.GetCollections()) Collections.Add(item); } protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
Campaings.xaml
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <cards:CarouselView ItemsSource="{Binding}" SlideShowDuration="2500"> <cards:CarouselView.ItemTemplate> <DataTemplate> <ContentView Grid.Row="0"> <Image x:Name="BannerImage" Source="{Binding CampaignPicture, Converter={StaticResource ImageConverter}}" HeightRequest="300" WidthRequest="300" Aspect="Fill" /> </ContentView> </DataTemplate> </cards:CarouselView.ItemTemplate> </cards:CarouselView> <cards:CoverFlowView SelectedIndex="{Binding Position}" SelectedItem="OnItemSelected" PositionShiftValue="120" IsCyclical="true"> <cards:CoverFlowView.BindingContext> <mvvm:CollectionViewModel/> </cards:CoverFlowView.BindingContext> <x:Arguments> <proc:BaseCoverFlowFrontViewProcessor ScaleFactor="0.75" OpacityFactor="0.25" /> <proc:BaseCoverFlowBackViewProcessor ScaleFactor="0.75" OpacityFactor="0.25" /> </x:Arguments> <cards:CoverFlowView.ItemTemplate> <DataTemplate> <ContentView Grid.Row="1"> <Frame VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="300" WidthRequest="300" Padding="0" HasShadow="True" IsClippedToBounds="true" BackgroundColor="#ED6933" CornerRadius="10"> <Image Source="{Binding CollectionLogo, Converter={StaticResource ImageConverter}}" HeightRequest="300" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center" /> <Frame.GestureRecognizers> <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="selectedCollection"> </TapGestureRecognizer> </Frame.GestureRecognizers> </Frame> </ContentView> </DataTemplate> </cards:CoverFlowView.ItemTemplate> <ind:IndicatorsControl ToFadeDuration="1500" SelectedIndicatorStyle="{StaticResource ActiveIndicator}" UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/> </cards:CoverFlowView> </Grid>