TabView - line under selected item is missing

[Petra]

I am testing the Telerik MAUI controls (trial version) and specifically looking into the TabView control. I cannot seem to get the line underneath the selected tab view item to display, as in your documentation:

My code is as follows:

<telerik:RadTabView
	x:Name="tabView"
	Grid.Row="0"
	BackgroundColor="Transparent"
	VerticalOptions="Fill">
	
	<telerik:RadTabView.HeaderStyle>
		<Style TargetType="telerik:TabViewHeader">
			<Setter Property="BackgroundColor" Value="Transparent" />
			<Setter Property="HorizontalOptions" Value="Start" />
		</Style>
	</telerik:RadTabView.HeaderStyle>

	<telerik:RadTabView.HeaderItemStyle >
		<Style TargetType="telerik:TabViewHeaderItem">
			<Setter Property="Padding" Value="10,5" />
			<Setter Property="VisualStateManager.VisualStateGroups">
				<VisualStateGroupList>
					<VisualStateGroup Name="CommonStates">
						<VisualState Name="Normal">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="#99ffffff" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
						<VisualState Name="Disabled">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="#b3b3b3" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
						<VisualState Name="Selected">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="White" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
					</VisualStateGroup>
				</VisualStateGroupList>
			</Setter>
		</Style>
	</telerik:RadTabView.HeaderItemStyle>

	<telerik:RadTabView.ContentStyle>
		<Style TargetType="telerik:TabViewContent">
			<Setter Property="VerticalOptions" Value="Fill" />
		</Style>
	</telerik:RadTabView.ContentStyle>
	
	<telerik:TabViewItem HeaderText="Settings">
		<Grid BackgroundColor="White">
			<Label Margin="10" Text="This is the content of the Settings tab" />
		</Grid>
	</telerik:TabViewItem>

	<telerik:TabViewItem HeaderText="About">
		<Label Margin="10" Text="This is the content of the About tab" />
	</telerik:TabViewItem>

	<telerik:TabViewItem HeaderText="View">
		<Label Margin="10" Text="This is the content of the View tab" />
	</telerik:TabViewItem>
</telerik:RadTabView>

And my tabview displays as follows (notice the line is missing):

 

I am running this on Android.

I have also tried to copy and paste some of the tabview examples from your code directly into my program, but I still don't see the line.

I have followed the instructions on getting started. Maybe I'm missing something small. Please assist. Thank you in advance.

[Deyan]

Hello Petra,

By default the color of the line underneath the selected TabViewHeaderItem is transparent. To change its color you need to set a value of the BorderColor property like so:

<VisualState Name="Selected">
    <VisualState.Setters>
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="BackgroundColor" Value="Transparent" />
        <Setter Property="BorderColor" Value="GreenYellow" />
    </VisualState.Setters>
</VisualState>

Keep in mind that you have set a value to the Padding property, so the line does not appear at the very bottom of the TabViewHeaderItem, but a few pixels above.

If you have any further questions, feel free to let us know.

Regards, Deyan Progress Telerik

[Rolf]

I made a test page using Petra's TabView example and Deyan's modification. The only additional
change is to set the TextColor value to Orange for "Normal".
I would now expect the text of the unselected TabHeaders to be displayed in orange. That's not 
the case. Only when this tab was selected and deselected again the text was displayed in orange.
How can I make the TabHeader text appear in orange immediately?

[Didi]

Hi Rolf,

I have tested the scenario and cannot reproduce the behavior. I have tested on all 4 platforms - Android, iOS, mac, WinUI.

<Style TargetType="telerik:TabViewHeaderItem">
                <Setter Property="FontAttributes" Value="Italic"/>
                <Setter Property="TextColor" Value="Orange" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="Orange" />
                                    <Setter Property="FontAttributes" Value="Bold" />
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="#610000" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="#e05194" />
                                    <Setter Property="BorderColor" Value="#e05194" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </telerik:RadTabView.HeaderItemStyle>

Make sure that the TextColor is set on the TabViewHeaderItem level, before on the VisualState level. We have a styling example here: https://github.com/telerik/maui-samples/blob/main/Samples/SdkBrowser/Examples/TabViewControl/StylingCategory/HeaderItemStyleExample/TabViewHeaderItemStyle.xaml