This is a migrated thread and some comments may be shown as answers.

Header of TabViewItem

3 Answers 82 Views
TabView
This is a migrated thread and some comments may be shown as answers.
Jean-François VIGNERON
Top achievements
Rank 1
Jean-François VIGNERON asked on 04 Jul 2018, 02:26 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 04 Jul 2018, 09:33 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Alexander
Top achievements
Rank 1
answered on 26 Mar 2020, 12:11 AM
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?
0
Lance | Manager Technical Support
Telerik team
answered on 26 Mar 2020, 04:31 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TabView
Asked by
Jean-François VIGNERON
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Alexander
Top achievements
Rank 1
Share this question
or