Previous card need not show, should hide behind visible index card

[Pawan Shakya]

Hi,

We have requirement where under SfCardLayout, having 3 SFCardViews. So each card have one button which sets next Visible Card Index (0 -1 -2) value to show up next card in MVVM binding mode.

So if user if on 2nd Card , 1st card is slightly visible behind current one. We want to hide / Remove (preferred) previous card, so end user will always see 1 card only. 

Please refer attached image. 

Regards

Pawan Shakya 

Attachment: Card_HidePrevious_53045baa.zip

[Pawan Shakya]

Any update on this ? 

This is really important for us. 

Regards

Pawan Shakya

[Sridevi Sivakumar]

Hi Pawan Shakya, 

  

Greetings from Syncfusion.
 
We have added Previous and Next button and changed the card index and visibility in MVVM command action as per the below code snippet. 

[C#]: 

NextCommand = new Command( 

           execute: () => 

           {​​​​​​​ 

               ViewModel.ModelCollecion[ViewModel.CardIndex].IsVisible = false; 

               ViewModel.CardIndex += 1; 

              ViewModel.ModelCollecion[ViewModel.CardIndex].IsVisible = true; 

    }​​​​​​​); 

            PreviousCommand = new Command( 

           execute: () => 

           {​​​​​​​ 

               if (ViewModel.CardIndex > 0) 

        {​​​​​​​ 

                   ViewModel.ModelCollecion[ViewModel.CardIndex].IsVisible = false; 

            ViewModel.CardIndex -= 1; 

            ViewModel.ModelCollecion[ViewModel.CardIndex].IsVisible = true; 

        }​​​​​​​ 

 

           }​​​​​​​); 

Please have a sample from the below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Getting_Started_(1)1548762124 

Let us know if you need any further assistance.

Regards,
Sridevi S. 

[Pawan Shakya]

Hi Sridevi, 

Thanks for response. 

I was able to do this , however may main concern is that card was not overlapping with previous card. 

With each Next click, new card was not completely overlapping older one , instead it shift by margin. Thus my page content keep on shifting towards right with each shuffle.

Ex: 

1st card left margin 10 , 2nd card left margin increase around 12 , 3rd card left margin increase around 14 , and so on......... 

More cards , more shifting towards right.  

Attached screenshot from your sample below explaining same,  In that last card starting position is not same as first card. 

Wanted started position remain same for all cards thus overlap will happen perfectly. 

Attachment: CardLayoutOverlapIssue_56edf9e5.zip

[Eswaran Thirugnanasambandam]

Hi Pawan Shakya, 

 

We have analyzed your requirement and we would like to inform you that our SfCardLayout children gets arranged with some padding value in based on children count to check available cards in panel. For your requirement we have used SfCardView alone and updated its Binding Context based on Command action. Using this solution card will noy get move to any position and you will get the updated content in our SfCard. 

 

Code snippet 

 

<Grid HeightRequest="500" WidthRequest="300" x:Name="cardLayout" 

                        VerticalOptions="Center" 

                        HorizontalOptions="Center"  BackgroundColor="#F0F0F0"> 

 

        <cards:SfCardView BindingContext="{Binding CurrentCard}" BackgroundColor="{Binding Color}" Margin="10"> 

 

            <Grid> 

                <Label Text="This is CardView" HorizontalOptions="CenterAndExpand" 

                           VerticalTextAlignment="Center"/> 

                <Button Margin="10" Text="Previous" Command="{Binding PreviousCommand}" 

                               IsVisible="{Binding PreviousCommandVisible}" 

                                HorizontalOptions="StartAndExpand" VerticalOptions="EndAndExpand"/> 

 

                <Button Margin="10" Text="Next" Command="{Binding NextCommand}" 

                                 IsVisible="{Binding NextCommandVisible}" 

                                HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"/> 

            </Grid> 

        </cards:SfCardView> 

    </Grid> 

 

  

public Model() 

        { 

            NextCommand = new Command( 

           execute: () => 

           { 

               ViewModel.Index += 1; 

               ViewModel.CurrentCard = ViewModel.ModelCollecion[ViewModel.Index]; 

           }); 

 

            PreviousCommand = new Command( 

           execute: () => 

           { 

               ViewModel.Index -= 1; 

               ViewModel.CurrentCard = ViewModel.ModelCollecion[ViewModel.Index]; 

           }); 

        } 

 

 

  

public class ViewModel :INotifyPropertyChanged 

    { 

        private Model currentCard; 

        public Model CurrentCard 

        { 

            get { return currentCard; } 

            set 

            { 

                currentCard = value; 

                OnPropertyChanged("CurrentCard"); 

            } 

        } 

 

        public ObservableCollection<Model> ModelCollecion { get; set; } 

        public int Index { get; set; } 

 

        public ViewModel() 

        { 

            ModelCollecion = new ObservableCollection<Model>(); 

            ModelCollecion.Add(new Model() { Color = Color.Cyan, PreviousCommandVisible=false }); 

            ModelCollecion.Add(new Model() { Color = Color.Yellow}); 

            ModelCollecion.Add(new Model() { Color = Color.Red}); 

            ModelCollecion.Add(new Model() { Color = Color.Orange, NextCommandVisible=false }); 

 

            Index = 0; 

            CurrentCard = ModelCollecion[Index]; 

 

            foreach (var item in ModelCollecion) 

            { 

                item.ViewModel = this; 

            } 

        } 

 

  

Please find the modified sample from the below location. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Getting_Started-1591640118  

 

Please let us know if you have any other queries. 

 

Regards, 

Eswaran