We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rounded Corners on top of TabMenu

Hi, I am using SfTabView and I need to have rounded corners on top of it. How can I achieve it ?
Also, Can I increase the Height of tabview ?


Mine is like this


But I need like this 


5 Replies

MC marcelo couto fernandes October 7, 2022 04:18 AM

My xaml code:

 <ContentPage.Content>

        <Grid >

            <tabView:SfTabView BackgroundColor="{StaticResource Primary}" x:Name="tabView"

                           VisibleHeaderCount="3"

                           EnableSwiping="false"

                           TabHeaderPosition="Bottom"

                           OverflowMode="CenterButton"

                           DisplayMode="Image"

                           Items="{Binding Items}"

                           >

                <tabView:SfTabView.CenterButtonSettings>

                    <tabView:CenterButtonSettings Height="85" Width="80"/>

                </tabView:SfTabView.CenterButtonSettings>


                <tabView:SfTabView.SelectionIndicatorSettings>

                    <tabView:SelectionIndicatorSettings Color="Transparent"

                                                         StrokeThickness="1"

                                                         Position="Top"/>

                </tabView:SfTabView.SelectionIndicatorSettings>


                <tabView:SfTabView.CenterButtonView>

                    <StackLayout Padding="10">

                        <Image Source="CenterButton.png" HeightRequest="60"/>

                    </StackLayout>

                </tabView:SfTabView.CenterButtonView>

            </tabView:SfTabView>

        </Grid>

    </ContentPage.Content>





My cs code on ViewModel:


public class MyTabViewModel : BaseViewModel

    {

        public TabItemCollection Items { get; set; }


        public MyTabViewModel()

        {

            SetItems();

        }


        internal void SetItems()

        {

            Items = new TabItemCollection();

            DashboardPage page1 = new DashboardPage();

            AboutPage page2 = new AboutPage();


            SfBorder borderLeft = new SfBorder();

            borderLeft.CornerRadius = new Thickness(20, 20, 0, 0);

            SfTabItem tab1 = new SfTabItem { Content = page1.Content, Title = "OUR WORLD", ImageSource = "Properties.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };

            borderLeft.Content = tab1;



            SfBorder borderRight = new SfBorder();

            borderRight.CornerRadius = new Thickness(0, 0, 20, 20);

            SfTabItem tab2 = new SfTabItem { Content = page2.Content, Title = "ABOUT", ImageSource = "Messages.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };

            borderRight.Content = tab2;


            Items.Add(tab1);

            Items.Add(tab2);


        }

    }



MC marcelo couto fernandes October 7, 2022 04:19 AM

You can see that I tried to use  SfBorder , but it's not working.



RS Ruba Shanmugam Syncfusion Team October 10, 2022 07:57 AM

Hi Marcelo,

Query: Rounded Corners on top of TabMenu

We have validated the reported query and in SfTabView, we don't have direct support for this requirement, and we can achieve the same by adding the desired view inside the Syncfusion Border control in the header view of TabItem as per in below code snippet.  


Items = new TabItemCollection();

            sfTabView.SelectionChanged += SfTabView_SelectionChanged;

            ContentPage page1 = new ContentPage() { BackgroundColor=Color.LightCyan };

            ContentPage page2 = new ContentPage() { BackgroundColor = Color.LightGreen };

            SfBorder borderLeft = new SfBorder();

            borderLeft.CornerRadius = new Thickness(20, 0, 0, 0);

            Image label = new Image();

            label.HorizontalOptions = LayoutOptions.Center;

            label.VerticalOptions = LayoutOptions.Center;

            label.Source = "settings.png";

            borderLeft.Content = label;

            borderLeft.BackgroundColor = Color.Blue;

            SfTabItem tab1 = new SfTabItem { HeaderContent = borderLeft, Content = page1.Content, Title = "OUR WORLD", ImageSource = "Properties.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };

           

            SfBorder borderRight = new SfBorder();

            borderRight.CornerRadius = new Thickness(0, 20, 0, 0);

            Image label1 = new Image();

            label1.HorizontalOptions = LayoutOptions.Center;

            label1.VerticalOptions = LayoutOptions.Center;

            label1.Source = "inbox1.png";

            borderRight.Content = label1;

            SfTabItem tab2 = new SfTabItem { HeaderContent = borderRight, Content = page2.Content, Title = "ABOUT", ImageSource = "Messages.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };

            Items.Add(tab1);

            Items.Add(tab2);


Documentation Link: https://help.syncfusion.com/xamarin/tabbed-view/custom-header

To know more about border customization, please refer to the below link

https://help.syncfusion.com/xamarin/border/customization 


Based on your requirement, we have prepared the sample which can be downloaded from the attachment.


Regards,

Ruba Shanmugam  


Attachment: SfTabViewSample_Radius_61161c7f.zip


MC marcelo couto fernandes October 10, 2022 09:48 AM

In my case, I am setting the BackgroundColor of TabView as Blue. When I use the Border, the BackgroundColor blue keeps appearing squared.
How can I achieve all this part of ROUNDED tabview with a color ? Like in the image below, including the Center Button



When I am trying to add Border, appear like bellow. If I set the bordercolor to transparent, it's look like the rounded border is not there.




RS Ruba Shanmugam Syncfusion Team October 11, 2022 06:59 AM

Hi Marcelo,


Currently, we don’t have direct support setting a corner radius for SfTabView when using the center button view. So, we have considered “Provide corner radius support for TabHeaderView in SfTabView” as a feature and logged this as a feature request, and you can track the status of this feature implementation through the below link.


Feedback link: https://www.syncfusion.com/feedback/38338/provide-corner-radius-support-for-tabheaderview-in-sftabview


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 to already planned work. So, this feature will be available in any of our upcoming releases.


If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal.


Regards,

Ruba Shanmugam


Loader.
Live Chat Icon For mobile
Up arrow icon