Rank 3
Iron
Iron
Iron
THe docs say this
I can add a HeaderItemTemplate to get what I need, but how do I add a HeaderTemplate and keep the Item Template controls?
Relatively new to XAML and using these controls..
I am trying to use the Tab control in a simar way to a previous post, with icon, label, close button to try and dynamically add, remove tabs etc
It seems when the MAUI desktop window is sized smaller, the tabs are scrollable/slidable, but its not obvious to the user, so want to show some kind of indicator (similar to what the toolbar does) maybe this a feature to add?
Feature: have scrollable buttons to scroll the Header Items like how the toolbar works
1 Answer, 1 is accepted
Hi Mark,
First, regarding the HeaderTemplate - please find below the default HeaderTemplate of the TabView:
<telerik:RadTabView x:Name="tabView" IsHeaderScrollable="True">
<telerik:RadTabView.HeaderTemplate>
<ControlTemplate>
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding ContentPadding}">
<ContentPresenter Content="{TemplateBinding Content}" />
</telerik:RadBorder>
</ControlTemplate>
</telerik:RadTabView.HeaderTemplate>
...
</telerik:RadTabView>The Content set to the ContentPresenter holds the TabViewHeaderItems.
Here is a simple customization with adding a Label in the header:
<telerik:RadTabView x:Name="tabView" IsHeaderScrollable="True">
<telerik:RadTabView.HeaderTemplate>
<ControlTemplate>
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding ContentPadding}">
<Grid ColumnDefinitions="*, 70">
<ContentPresenter Content="{TemplateBinding Content}" />
<Label Text="Extra text" Grid.Column="1" />
</Grid>
</telerik:RadBorder>
</ControlTemplate>
</telerik:RadTabView.HeaderTemplate>
...
</telerik:RadTabView>We're going to update the documentation article with an example, thank you for bringing this to our attention.
We have a feature request in our public feedback portal for providing built-in functionality to add/close tabs, you can add a comment and cast your vote here:
TabView: Provide options to rearrange, open, close tabs - desktop like experience
And lastly, about the scrolling experience - indeed there is a feature about an overflow menu which will indicate there are more tabs, you can find it here:
TabView: Provide overflow menu
For now, when there are more tabs, the last one is not fully displayed, which can be seen as an indication.
I hope I was of help. Let me know if you have any additional questions or concerns.
Regards,
Yana
Progress Telerik