Add linebreak mode to the Header text, Make the Tabs fit in single screen when have multiple tabs, Chnage the color of image (PNG)

[Mohammed Rameez]

Hi Telerik,

I have been using RadTabView for MAUI and have used the different style but, not able to make the header text to make to next line when it has lengthy text.  and also, I need all my tabs to be visible in a single screen.

 Requirements:

1. Line break for header text.

2. Make the tabs fit the screen.

3. Change the color of image (here we are using .png).

Below is the image for your reference:

 

Thanks & Best regards,

Mohammed Rameez Raza (Rameez).

[Petar Marchev]

Hi Rameez,

The RadTabView does not offer out-of-the-box capabilities to fill the item headers as per your requirement.

In order to get the desired effect, you need to manually calculate the width that each item should be. For example, if the whole RatTabView is 600 pixels wide, and there are 5 items in it, then each header should be 120 pixels in Width.

I've constructed a custom utils class that will do this for your custom template. I think this class will be a good starting point for you to implement the final solution. It's usage is fairly easy: local:TabViewUtils.EqualHeaderItemWidth="True"

<ControlTemplate x:Key="TabViewHeaderTemplate">
  <Grid local:TabViewUtils.EqualHeaderItemWidth="True" RowDefinitions="Auto, Auto">
    <Image Source="{TemplateBinding ImageSource}" Aspect="Center" />
    <Label Text="{TemplateBinding Text}" Grid.Row="1" LineBreakMode="WordWrap" HorizontalTextAlignment="Center" />
  </Grid>
</ControlTemplate>

 

The code I am sending contains the business logic for calculating the desired width for each item, so that the tabs can fit the screen. Using the custom template, you have direct access to the Label and Image, so you should be able to handle all desired customizations there.

Regards,
Petar Marchev
Progress Telerik

[Petar Marchev]

I am also attaching a couple of images of the output I get when I run the code.

 

Regards,
Petar Marchev
Progress Telerik

[Mohammed Rameez]

Hi Petar,

Thanks for the reply.

 

Can you also tell how exactly to change the color of the icons. I need to use the ImageSource and not the unicode.

 

Thanks,

Mohammed Rameez Raza (Rameez).

[Didi]

Hi Mohammed,

You can add an icon and change its color using the FontImageSource. Here is an example:

<Grid>
		<telerik:RadTabView x:Name="tabView" HeaderItemStyle="{StaticResource headerstyle}">
			<telerik:RadTabView.HeaderItemTemplate>
				<ControlTemplate>
					<Grid local:TabViewUtils.EqualHeaderItemWidth="True" RowDefinitions="Auto, Auto">
						<Image Source="{TemplateBinding ImageSource}" Aspect="Center" />
						<Label Text="{TemplateBinding Text}" Grid.Row="1" LineBreakMode="WordWrap" HorizontalTextAlignment="Center" />
					</Grid>
				</ControlTemplate>
			</telerik:RadTabView.HeaderItemTemplate>
			<telerik:TabViewItem HeaderText="Som Item 1">
				<telerik:TabViewItem.ImageSource>
					<FontImageSource Glyph="&#xe804;"
									 Color="Red"
                                     FontFamily="TelerikFont"
                                    />
				</telerik:TabViewItem.ImageSource>
				<Label Text="Item 1" HorizontalOptions="Center" VerticalOptions="Center" />
			</telerik:TabViewItem>
			<telerik:TabViewItem HeaderText="Other Item 2">
				<telerik:TabViewItem.ImageSource>
					<FontImageSource Glyph="&#xe804;"
									 Color="Red"
                                     FontFamily="TelerikFont"
                                    />
				</telerik:TabViewItem.ImageSource>
				<Label Text="Item 2" HorizontalOptions="Center" VerticalOptions="Center" />
			</telerik:TabViewItem>
			<telerik:TabViewItem HeaderText="Long Item 333">
				<telerik:TabViewItem.ImageSource>
					<FontImageSource Glyph="&#xe804;"
									 Color="Red"
                                     FontFamily="TelerikFont"
                                    />
				</telerik:TabViewItem.ImageSource>
				<Label Text="Item 3" HorizontalOptions="Center" VerticalOptions="Center" />
			</telerik:TabViewItem>
		</telerik:RadTabView>
	</Grid>

Hope this helps.

Regards,
Didi
Progress Telerik

[Mohammed Rameez]

Hi Didi,

 

Thanks for the reply.

The solution that you gave works for FontImageSource, I have .png image, on that i need to apply that. I need to use ImageSource directly.

Thanks.

[Didi]

The png image does not have a color property. so you have to create an image with the exact look you want. 

If the image is actually an svg, how to change the color of the svg can be found here: https://medium.com/@kulashekar2025/how-to-changing-svg-image-color-dynamically-in-net-maui-6fbe4f996401 

Also you can submit question in the Microsoft forum or StackOverflow.