TabView - line under selected item is missing

1 Answer 196 Views
TabView
Petra
Top achievements
Rank 1
Petra asked on 02 Jun 2022, 02:26 PM

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.

1 Answer, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 03 Jun 2022, 09:38 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 22 Dec 2022, 02:37 PM

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
Telerik team
commented on 23 Dec 2022, 10:05 AM

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 


Tags
TabView
Asked by
Petra
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Share this question
or