question

StefanoM-9408 avatar image
0 Votes"
StefanoM-9408 asked ColeXia-MSFT edited

Decrease space between item in a TabView

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>
dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered ColeXia-MSFT edited

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.