Quantcast
Viewing all articles
Browse latest Browse all 91519

Binding with MVVM

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>

Viewing all articles
Browse latest Browse all 91519

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>