Customize tabview

[HannahC]

Hi all,

I write different UI and behavior in A, B, C, D, E page. (each page has its own .xaml and .cs file)

I want to ask can I initialize the tabs with these pages like below?

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"

             x:Class="TabView.TabView">

    <ContentPage.Content>

         <tabView:SfTabView OverflowMode="DropDown"

                            EnableSwiping="false" 

                            VisibleHeaderCount="5" 

                            BackgroundColor="Aqua">

            <tabView:SfTabItem Title="Call">

                <tabView:SfTabItem.Content>

                    <StackLayout>

                        <Grid BackgroundColor="Green" />

                        <Button Text="A" WidthRequest="300" />

                        <Button Text="B" WidthRequest="300" />

                        <Button Text="C" WidthRequest="300" />

                        <Button Text="D" WidthRequest="300" />

                        <Button Text="E" WidthRequest="300" />

                    </StackLayout>

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem Title="A">

                <tabView:SfTabItem.Content>

                    //new Page_A();

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem Title="B">

                <tabView:SfTabItem.Content>

                    //new Page_B();

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem Title="C">

                <tabView:SfTabItem.Content>

                    //new Page_C();

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem Title="D">

                <tabView:SfTabItem.Content>

                    //new Page_D();

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem Title="E">

                <tabView:SfTabItem.Content>

                    //new Page_E();

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

        </tabView:SfTabView>

    </ContentPage.Content>

</ContentPage>

Thanks for your kindly response.

[Ruba Shanmugam]

Hi HannahC,

Greetings from Syncfusion.

We have validated your query and prepared a sample based on provided screenshot and information. We have prepared a sample for your reference. Get the sample and below.

We would like to let you know that currently border for SfTabItem is directly not supported and you can achieve that through the TabItem HeaderContent. You can refer the below user guidance for more information.

UG link: https://help.syncfusion.com/xamarin/tabbed-view/custom-header

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

Please let us know, if you have any other concerns.

Regards,
Ruba Shanmugam

[HannahC]

Hi Ruba,

Thanks for the reply!

Following your suggestion to revise the project, I got the APP crash but I don't know why...

Otherwise, I have a problem is that my project needs to keep the page type of the sub-pages(A,B,C,D,E) to be 'ContenePage'.

Because I need to display some messages by using DisplayAlert() and also need to use OnAppearing() to do something.

But once I change the sub-pages(A,B,C,D,E) to 'ContenetView', then the DisplayAlert() and OnAppearing() are not working anymore...

Can you tell me how to deal with this problem?

And I also want to ask whether the TabViewItem's title can wrap text auto?

If the title is too long, then the text will not display completely(like the pic shows below)

My project is attached.

Thank you very much!

Attachment: TabView_DiffContentView1093659800_HC_20210127_35e4effc.zip

[Ruba Shanmugam]

Hi HannahC,

Query 1: ContentPage query:

Current we are handling only the ContentView. We don’t have direct support to “Add ContentPage as TabItem Content”. We would like to let you know that we have logged a feature request on this, and it can be tracked through our feedback portal below.

Link: https://www.syncfusion.com/feedback/1209/provide-content-page-support-for-sftabitem  

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we committed with already planned work. So, this feature will be available for any of our upcoming releases.

Query 2: And I also want to ask whether the TabViewItem's title can wrap text auto?

Currently we dont have auto wrap suport. You can achieve that through the TabItem HeaderContent. You can refer the below user guidance for more information.

UG link: https://help.syncfusion.com/xamarin/tabbed-view/custom-header

We have prepared a sample for your reference get it from below:

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

Please let us know, if you have any other concerns.

Regards,
Ruba Shanmugam

[HannahC]

Hi Ruba Shanmugam,

Is there any good new about support using ContentPage?

So if I use the content view which Syncfusoion is supported, how to deal with the problem that the "DisplayAlert function" and "OnAppearing function" cannot be used?

I see the "Tabbed View" example in Syncfusion APP can scroll the header and also can make the header's width auto fit to its header text.

I want to implement these needs to my code, can you provide the sample code by using my project?

 

Attachment: TabView_Example_a9601e8b.zip

[Anandraj Selvam]

Hi HannahC, 

  

Thanks for the update. 

  

Query 1: How to deal with the problem that the "DisplayAlert function" and "OnAppearing function" cannot be used. 

  

We have checked the reported query and we would like to inform you that we can’t use onAppearing() on ContentView. We already have this query in a Xamarin.Forms discussion page, please have the link for reference. 

  

Github link: https://github.com/xamarin/Xamarin.Forms/issues/3486  

  

You can set the DisplayAlert by using the following code: 

  

App.Current.MainPage.DisplayAlert("", "Hello world!", "OK"); 

  

Query 2: Can make the header's width auto fit to its header text. 

  

We have checked the reported query and we can achieve it by setting TabWidthMode to BasedOnText. Please have the sample for your reference. 

  

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

  

Please revert us for further investigation. 

  

Regards, 

Anand Raj S.