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

TabView header background color

3 Answers 118 Views
TabView
This is a migrated thread and some comments may be shown as answers.
Software
Top achievements
Rank 1
Software asked on 25 Feb 2019, 03:50 PM

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.) 

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 25 Feb 2019, 08:04 PM
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
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
Software
Top achievements
Rank 1
answered on 25 Feb 2019, 08:17 PM
 <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>
0
Lance | Manager Technical Support
Telerik team
answered on 25 Feb 2019, 08:51 PM
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
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
Tags
TabView
Asked by
Software
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Software
Top achievements
Rank 1
Share this question
or