CardLayout inside sfTabView needs HeightRequest to get displayed

[Markus]

Hallo, 

 CardLayout needs the HeightRequest to get displayed. Then the First CardView is displayed on the Size of the HeightRequest, any other Cardview behind get resized to the Height of the content. If no HeightRequest is set, the cards will not display. If I set the MinimumHeightRequest, no cards are displayed!

This is the same in IOS and Android



                <tabView:SfTabItem

                    Title="Section"

                    ImageSource="result_tab_32x32.png"

                    MinimumHeightRequest="32">

                    <tabView:SfTabItem.Content>

                        <StackLayout>

                            <!--<StackLayout HorizontalOptions="Center" VerticalOptions="Center">-->

                                <cards:SfCardLayout

                                    HeightRequest="500"

                                BackgroundColor="Transparent"

                                ShowSwipedCard="True"

                                SwipeDirection="Left">

                                    <!-- Start CdA -->

                                    <cards:SfCardView

                                    BackgroundColor="Transparent"

                                    BorderColor="Transparent"

                                    BorderThickness="0"

                                    FadeOutOnSwiping="True"

                                    HasShadow="True"

                                    ShadowColor="Black">

Thanks

[Eswaran Thirugnanasambandam]

Hi Markus, 

 

Thanks for contacting Syncfusion support. 

 

When placing the SfCardLayout inside the StackLayout, the default height for the SfCardLayout is not obtained, hence it is not displayed. The default height for the SfCardLayout control can be obtained by placing the control inside the Grid layout instead of Stack layout. 

 

We have prepared a simple sample to show the SfCardLayout control without providing the height request and placed the SfCardLayout control inside the grid layout. Please get the sample from the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Getting_Started880517087  

 

Please check the sample and let us know if you have any concerns. 

 

Regards, 

Eswaran 

[Markus]

Hi  Eswaran,

well I need to add  VerticalOptions="FillAndExpand" to the Grid, that the Cards are shown and than it is adjusting to the height of the first card. So any bigger cards behind, will get cut in the bottom.

Thanks,

Markus

[Sridevi Sivakumar]

Hi Markus,

The visible card view height in SfCardLayout is higher than the next card. That's how we designed it. This is our current behavior. The visible card height is greater than the remaining card when you swipe the card.

We have analysed your requirement. I think, you would like to display the first card as small compare to the behind one.  For this, you can set HeightRequest to the card view and set VerticalOption as Center as mentioned in the below code snippet.

[XAML]: 

    <tabView:SfTabView BackgroundColor="Aqua"> 

        <tabView:SfTabItem Title="Color"> 

            <tabView:SfTabItem.Content> 

                <Grid VerticalOptions="FillAndExpand"> 

                <cards:SfCardLayout  SwipeDirection="Left" BackgroundColor="#F0F0F0" > 

 

                    <cards:SfCardView  BackgroundColor="Cyan" > 

                             

                        </cards:SfCardView> 

 

                        <cards:SfCardView BackgroundColor="Yellow"> 

                        </cards:SfCardView> 

 

                        <cards:SfCardView  BackgroundColor="Orange"  VerticalOptions="Center"  HeightRequest="300"> 

                            

                        </cards:SfCardView> 

 

                </cards:SfCardLayout> 

                </Grid> 

            </tabView:SfTabItem.Content> 

        </tabView:SfTabItem> 

        <tabView:SfTabItem Title="Favorites"> 

            <tabView:SfTabItem.Content> 

                <Grid BackgroundColor="Green" x:Name="FavoritesGrid" /> 

            </tabView:SfTabItem.Content> 

        </tabView:SfTabItem> 

    </tabView:SfTabView> 

 

Please have a sample from the below link
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CardSample-261306914

Please check the sample, code snippet and revert us with more details or modifying sample if your requirement is different from this.

Regards,
Sridevi S

 

[Markus]

Thanks  Sridevi :)

[Sridevi Sivakumar]

Hi Markus, 

Thanks for your update

Let us know if you have any other queries.

Regards,
Sridevi S. 

.