Header of TabViewItem

[Jean-François VIGNERON]

Hello, 

  I have a RadTabView who has 3 tabs.   For each tab header, i use a style like this :

<ControlTemplate x:Key="TabViewHeaderItemControlTemplate">
          <Grid BackgroundColor="{StaticResource GreyLightColor}"> 
               <primitives:RadBorder BorderThickness="0,0,0,0" HeightRequest="50" 
                                  CornerRadius="20,20,0,0"
                                  BorderColor="{StaticResource GreyMediumColor}"
                                  BackgroundColor="{StaticResource GreyMediumColor}"
                                  Padding="0" >

                <primitives:RadBorder.Triggers>
                    <DataTrigger TargetType="primitives:RadBorder"
                                 Binding="{TemplateBinding IsSelected}"
                                 Value="True">
                        <Setter Property="BackgroundColor" Value="{StaticResource Key=BlueLightColor}" />
                        <Setter Property="BorderColor" Value="{StaticResource Key=BlueLightColor}" />
                </DataTrigger>
                    <DataTrigger TargetType="primitives:RadBorder"
                                 Binding="{TemplateBinding IsSelected}"
                                 Value="False">
                    <Setter Property="BackgroundColor" Value="{StaticResource Key=GreyMediumColor}" />
                    <Setter Property="BorderColor" Value="{StaticResource Key=GreyMediumColor}" />
                </DataTrigger>
                </primitives:RadBorder.Triggers>
                
                <Label Text="{TemplateBinding Text}" 
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       FontFamily="SFR-Bold.otf#SFR-Bold"
                       FontAttributes="Bold"
                       FontSize="20"  >
                    <Label.Triggers>
                        <DataTrigger TargetType="Label"
                                     Binding="{TemplateBinding IsSelected}"
                                     Value="True">
                            <Setter Property="TextColor" Value="White" />
                        </DataTrigger>
                        <DataTrigger TargetType="Label"
                                     Binding="{TemplateBinding IsSelected}"
                                     Value="False">
                            <Setter Property="TextColor" Value="{StaticResource Key=BlackColor}" />
                        </DataTrigger>
                    </Label.Triggers>
                </Label>
            </primitives:RadBorder>  
          </Grid> 
    </ControlTemplate>

  The result is like the photo attached.    But there is always a gap between two headers. 

  I want to know,  if there is a way that i can remove  the gap between two headers.  So that two tabs will be next to each other. 

  Thank you.

 

[Lance | Manager Technical Support]

Hi Jean,

Thank you for the screenshot, it helped clarify what you're looking for. Even if you moved the tabs closer together, you'd still see the page color peek through around the radius of the RadBorder.

Instead, I would just change the background color of the RadTabView (or the page):

<telerik:RadTabView BackgroundColor="{StaticResource GreyMediumColor}" >

This way, you get the same result you're looking for and you only have to worry about one thing: the selected item's color (BlueLightColor).

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Alexander]

I have the same issue but I can't resolve it with a background color change.  Is there any way to remove spacing between header items?

[Lance | Manager Technical Support]

Hello Alexander,

Currently this is not possible as there is no HeaderSpacing kind of property available. The background color workaround is an option to provide the appearance of not having tab headers in the TabView.

An alternate option would be to completely hide the tab headers by covering them with a different control. For example, see if RadSegmentedControl, RadButtons or even a horizontal RadListView could use used for your "tabs". Then, you can sync (i.e. Two-Way bind) the selected index between the two controls.

If you get stuck trying something like this, feel free to open a Support Ticket and provide the code so we can take a look.

Regards,
Lance | Team Lead - US DevTools Support
Progress Telerik