TabView header background color

[Software]

Hi there

I am just wondering is there any option for TabView header background color for all tab headers?currently its taking content's background color in between two tabs (if you see the attached image, there is a white border in between two header item which is actually the content background color. i want no border in between two header items.) 

[Lance | Senior Manager Technical Support]

Hello Tahmina,

Can you please share the code for that view so that I can replicate the appearance? With that reproducible, I'll be able to work on a solution for you.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Software]

 <ContentPage.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="HeaderControlTemplate">
                <Grid BackgroundColor="#006B91" Padding="0">
                    <BoxView IsVisible="{TemplateBinding IsSelected}"
                          BackgroundColor="#12E3FF"
                          VerticalOptions="EndAndExpand"
                          HeightRequest="5"
                          Margin="0"/>
                    <Label  Text="{TemplateBinding Text}"
                        FontSize="18"
                        TextColor="#FFFFFF"
                        Margin="0, 0, 0, 15"
                        HorizontalTextAlignment="Center"/>
                    <Label  Text="{TemplateBinding Text}"
                        FontSize="18"
                        TextColor="#12E3FF"
                        Margin="0, 0, 0, 15"
                        IsVisible="{TemplateBinding IsSelected}"
                        HorizontalTextAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
 <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="110"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 <Grid Grid.Column="0" Grid.Row="0" BackgroundColor="#006b91" Padding="0" ></Grid>
 <telerikPrimitives:RadTabView x:Name="tabView"  Grid.Row="1">
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="{Binding VolumeText}" Padding="0"
                                                             ControlTemplate="{StaticResource HeaderControlTemplate}" >
                        </telerikPrimitives:TabViewHeaderItem>
                    </telerikPrimitives:TabViewItem.Header>

                    <telerikPrimitives:TabViewItem.Content>
                        <telerikDataControls:RadListView Margin="10,0,10,0" ItemsSource="{Binding SearchItems.volumes}" x:Name="listView" VerticalOptions="FillAndExpand">
                            <telerikDataControls:RadListView.ItemTemplate>
                                <DataTemplate>
                                    <telerikListView:ListViewTemplateCell>
                                        <telerikListView:ListViewTemplateCell.View>
                                            <Grid Margin="0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="3*"></ColumnDefinition>
                                                    <ColumnDefinition Width="7*"></ColumnDefinition>
                                                </Grid.ColumnDefinitions>
                                                <ffimageloading:CachedImage Margin="0" class="thumbnail-image" Grid.Column="0" Grid.Row="0" Aspect="AspectFit"
                                                 DownsampleToViewSize="true" Source="{Binding ImageUrl}">
                                                </ffimageloading:CachedImage>
                                            </Grid>
                                        </telerikListView:ListViewTemplateCell.View>
                                    </telerikListView:ListViewTemplateCell>
                                </DataTemplate>
                            </telerikDataControls:RadListView.ItemTemplate>
                            <telerikDataControls:RadListView.LayoutDefinition>
                                <telerikListView:ListViewLinearLayout  VerticalItemSpacing="20" ItemLength="80"  />
                            </telerikDataControls:RadListView.LayoutDefinition>
                        </telerikDataControls:RadListView>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>

                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="{Binding ModuleText}" Padding="0" Margin="0"
                                                                     ControlTemplate="{StaticResource HeaderControlTemplate}" >
                        </telerikPrimitives:TabViewHeaderItem>
                    </telerikPrimitives:TabViewItem.Header>
                    <telerikPrimitives:TabViewItem.Content>
                        <telerikDataControls:RadListView  Margin="10"   ItemsSource="{Binding SearchItems.clips}" x:Name="listViewmodule" VerticalOptions="FillAndExpand">
                            <telerikDataControls:RadListView.ItemTemplate>
                                <DataTemplate>
                                    <telerikListView:ListViewTemplateCell>
                                        <telerikListView:ListViewTemplateCell.View>
                                            <Grid Margin="0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="3*"></ColumnDefinition>
                                                    <ColumnDefinition Width="7*"></ColumnDefinition>
                                                </Grid.ColumnDefinitions>
                                                <ffimageloading:CachedImage Margin="0" class="thumbnail-image" Grid.Column="0" Grid.Row="0" Aspect="AspectFit"
                                      DownsampleToViewSize="true" Source="{Binding ThumbnailUrl}">
                                                </ffimageloading:CachedImage>
                                            </Grid>
                                        </telerikListView:ListViewTemplateCell.View>
                                    </telerikListView:ListViewTemplateCell>
                                </DataTemplate>
                            </telerikDataControls:RadListView.ItemTemplate>
                            <telerikDataControls:RadListView.LayoutDefinition>
                                <telerikListView:ListViewLinearLayout  VerticalItemSpacing="20" ItemLength="80"  />
                            </telerikDataControls:RadListView.LayoutDefinition>
                        </telerikDataControls:RadListView>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>

            </telerikPrimitives:RadTabView.Items>
        </telerikPrimitives:RadTabView>

[Lance | Senior Manager Technical Support]

Hi Tahmina,

Thank you for providing the code. This is because the default background color of the TabView is white. So you're seeing the back of the TabView in between the TabHeaders.

To get the result you, want, you instead make the BackgroundColor of the TabView to the preferred  and make the tab content background white.

Here's a screenshot of what I'm suggesting:



Here's the code:

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="110"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0" BackgroundColor="#006b91" Padding="0" ></Grid>

        <telerikPrimitives:RadTabView x:Name="tabView" BackgroundColor="#006b91" Grid.Row="1">
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="{Binding VolumeText}" Padding="0" Margin="0"
                                                             ControlTemplate="{StaticResource HeaderControlTemplate}" >
                        </telerikPrimitives:TabViewHeaderItem>
                    </telerikPrimitives:TabViewItem.Header>
                    <telerikPrimitives:TabViewItem.Content>
                        <Grid BackgroundColor="White">
                             ...
                        </Grid>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="{Binding ModuleText}" Padding="0" Margin="0"
                                                                     ControlTemplate="{StaticResource HeaderControlTemplate}" >
                        </telerikPrimitives:TabViewHeaderItem>
                    </telerikPrimitives:TabViewItem.Header>
                    <telerikPrimitives:TabViewItem.Content>
                        <Grid BackgroundColor="White">
                           ...
                        </Grid>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
            </telerikPrimitives:RadTabView.Items>
        </telerikPrimitives:RadTabView>
    </Grid>
</ContentPage>

I hope this is helpful.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik