Decrease space between item in a TabView

Question

I created a TabView, I have about 5 elements in all, and I wish there was less space between one element and another. Now with 5 elements not all fit and to view them I have to scroll sideways inside the TabView. How can I solve the problem? In the code I have inserted 3 elements, but in reality I have more.

<Style
                x:Key="CustomTabStyle"
                TargetType="xct:TabView">
                <Setter
                    Property="IsTabTransitionEnabled"
                    Value="True"/>
                <Setter
                    Property="TabStripHeight"
                    Value="55"/>
                <Setter
                    Property="TabStripPlacement"
                    Value="Bottom"/>
 </Style>


<xct:TabView
    Style="{StaticResource CustomTabStyle}"
    BackgroundColor="LightGray"
    IsSwipeEnabled="False">

<xct:TabViewItem
    x:Name="Home"
    Icon="IC003.png"
    Text="Home"
    TextColor="Gray"
    TextColorSelected="Black"
    ControlTemplate="{StaticResource TabItemTemplate}">
    <StackLayout BackgroundColor="Gray">
        <Label
                HorizontalOptions="Center"
                Text="TabContent1"
                VerticalOptions="Center" />
    </StackLayout>
</xct:TabViewItem>

<xct:TabViewItem
    x:Name="Diario"
    Icon="Smile.png"
    Text="Diario"
    TextColor="Black"
    ControlTemplate="{StaticResource TabItemTemplate}">
        <StackLayout BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                Text="TabContent1"
                VerticalOptions="Center" />
        </StackLayout>
</xct:TabViewItem>

<xct:TabViewItem
    x:Name="ToDoList"
    Icon="ExpanderWriting.png"
    Text="To-Do List"
    TextColor="Black"
    ControlTemplate="{StaticResource TabItemTemplate}">
        <StackLayout BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                Text="TabContent1"
                VerticalOptions="Center" />
        </StackLayout>
</xct:TabViewItem>

Answer 1

Hello,

Welcome to Microsoft Q&A!

There is no method to set space between tab items , but as a workaround , you could use TabWidth to divide the width of the entire screen according to the number of the tab items , in this way you don't need to scroll the tab to show all items.

   //xaml  
   <xct:TabViewItem TabWidth="{Binding TabWidth}"  


   //code   
   var actualWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;  
   TabWidth.TabWidth = actualWidth/ItemNumber;  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.