SelectedIndex for CardView

HamittirpanHamittirpan Member ✭✭✭

Hi everyone !

I use CardView Plugin in my application.

When the user clicks on any of the cards, I want to go to that card's detail page. Since there is a dynamically variable number of cards, I want to get the index of the card that the user clicks on. Because I have to show the details of the selected card on the detail page.

I tried to do that, but I couldn't find the solution. However, there is a variable called position in the plugin documentation. I think I should solve my problem with this.

cs.Side

    void selectedCollection(object sender, EventArgs args)
    {
        var item = model[1];
                Navigation.PushAsync(new DlAnayasaPage(item.CampaignName,item.CampaignPicture));
    }

For example, when I clicked on the image using a GestureRecognizer, I said go to the detail page. Everything is very beautiful. But I couldn't use the dynamic position instead of the number 1 here.(model[1])

How can i solved ?

Tagged:

Best Answer

  • LandLuLandLu Xamurai
    edited October 22 Accepted Answer

    You can access the model in the tapped event directly like:

    private void selectedCollection(object sender, EventArgs e)
    {
        Frame frame = sender as Frame;
        AppCampaign item = (AppCampaign)frame.BindingContext;
        Navigation.PushAsync(new DlAnayasaPage(item.CampaignName, item.CampaignPicture));
    }
    

Answers

  • HamittirpanHamittirpan Member ✭✭✭

    CollectionPage.xaml

    <?xml version="1.0" encoding="UTF-8"?>

        <ContentPage.Resources>
            <local:ImageConverter x:Key="ImageConverter" />
            <ResourceDictionary>
                <Style x:Key="ActiveIndicator" TargetType="Frame">
                    <Setter Property="BackgroundColor" Value="#ED6933" />
                </Style>
                <Style x:Key="InactiveIndicator" TargetType="Frame">
                    <Setter Property="BackgroundColor" Value="Transparent" />
                    <Setter Property="OutlineColor" Value="Red" />
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
    
    
        <cards:CoverFlowView ItemsSource="{Binding}"
                             SelectedIndex="{Binding Position}"
                             SelectedItem="OnItemSelected"
                             PositionShiftValue="60"
                             IsCyclical="true">
    
          <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>
                        <Frame VerticalOptions="Center"
                               HorizontalOptions="Center"
                               HeightRequest="300"
                               WidthRequest="300"
                               Padding="0"
                               HasShadow="false"
                               IsClippedToBounds="true"
                               BackgroundColor="Black"
                               CornerRadius="10">
    
                            <Image Source="{Binding CampaignPicture, Converter={StaticResource ImageConverter}}" Aspect="AspectFit"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer NumberOfTapsRequired="1"
                                                      Tapped="selectedCollection">
    
                                </TapGestureRecognizer>
                            </Frame.GestureRecognizers>
                        </Frame>
                    </ContentView>
                </DataTemplate>
            </cards:CoverFlowView.ItemTemplate>
    
           <controls:IndicatorsControl ToFadeDuration="1500"
                    SelectedIndicatorStyle="{StaticResource ActiveIndicator}"
                    UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/>
    
          <controls:LeftArrowControl ToFadeDuration="2500"/>
          <controls:RightArrowControl ToFadeDuration="2500"/>
    
        </cards:CoverFlowView>
    
    </ContentPage>
    

    .cs

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using GulaylarMenuDesign.Services;
    using GulaylarMenuDesign.Tables;
    using GulaylarMenuDesign.ViewModel;
    using Newtonsoft.Json;
    using Plugin.Settings;
    using Xamarin.Forms;

    namespace GulaylarMenuDesign.Views
    {
        public partial class CollectionsPage : ContentPage
        {
            readonly ServiceManager manager = new ServiceManager();
            readonly IList<AppCampaign> model = new ObservableCollection<AppCampaign>();
            AppCustomer customerModel = new AppCustomer();
    
            public CollectionsPage()
            {
                LoadData();
                BindingContext = model;
                InitializeComponent();
                NavigationPage.SetTitleIconImageSource(this, "DL.png");
    
            }
    
            async void CreateBarcodeClicked(object sender, System.EventArgs e)
            {
                await Navigation.PushAsync(new BarcodePage(), true);
            }
    
            protected async override void OnAppearing()
            {
                base.OnAppearing();
                customerModel = await manager.GetCustomerUpdatedInfo(Helpers.Settings.GeneralSettingsPass);
                CrossSettings.Current.AddOrUpdateValue("Information", JsonConvert.SerializeObject(customerModel));
            }
    
            #region Get Campaing Data From Api
            private async void LoadData()
            {
                this.IsBusy = true;
                try
                {
                    foreach (AppCampaign item in await manager.GetAll())
                        model.Add(item);
                }
                finally
                {
                    this.IsBusy = false;
                }
            }
            #endregion
    
            void selectedCollection(object sender, EventArgs args)
            {
                var item = model[1];
                Navigation.PushAsync(new DlAnayasaPage(item.CampaignName,item.CampaignPicture));
            }
        }
    }
    
  • LandLuLandLu Member, Xamarin Team Xamurai
    edited October 22 Accepted Answer

    You can access the model in the tapped event directly like:

    private void selectedCollection(object sender, EventArgs e)
    {
        Frame frame = sender as Frame;
        AppCampaign item = (AppCampaign)frame.BindingContext;
        Navigation.PushAsync(new DlAnayasaPage(item.CampaignName, item.CampaignPicture));
    }
    
  • HamittirpanHamittirpan Member ✭✭✭

    @LandLu Thank you so much. That's exactly what I wanted.

Sign In or Register to comment.