1 Answer, 1 is accepted
Hi Rolf,
Did you try the ContentPadding property? See https://docs.telerik.com/devtools/maui/controls/tabview/styling for details about every styling property available that is explicitly raised by us.
If you have used ContentPadding and it's not enough, please reply with two items:
- Required: A screenshot of the text clipping
- Optional: If you are using DataTemplates, please share a copy of the one being used for that area.
- Optional: If you've modified any of the other header properties, please share the code for that too. Many element affect this layout, from font to icon size, they all are responsible for their layout.
With that information, I can quickly identify the relevant parent and provide a more exact answer.
Regards,
Lance | Manager Technical Support
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Iron
It seems, that ContentPadding="0" is the default value. So I can't reduce the padding.
Here is the XAML code of a simple TabView and a screenshot to show what I want:
<telerik:RadTabView Grid.Row="1" BorderThickness="1" BorderColor="Red" VerticalOptions="Start">
<telerik:TabViewItem x:Name="Tab1" HeaderText="Tab 1" >
</telerik:TabViewItem>
<telerik:TabViewItem x:Name="Tab2" HeaderText="Tab 2" >
</telerik:TabViewItem>
<telerik:TabViewItem x:Name="Tab3" HeaderText="Tab 3" >
</telerik:TabViewItem>
</telerik:RadTabView>
I want to reduce the height of the areas I've circled red.
Regards,
Rolf
Thank you for the details. that part should only be there because of the vertical alignment of the text. If you change HeaderItemStyle's VerticalTextAlignment property it should show you the outer bounds of where the text can go.
Alternatively, for the most control over the appearance, you can define the HeaderItemTemplate. See https://docs.telerik.com/devtools/maui/controls/tabview/templates for more details, for now I can share the code.
I've pasted the default template below, you can modify the existing RadBorder host of the header text.
<telerik:RadTabView.HeaderItemTemplate>
<ControlTemplate>
<Grid>
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="2,0,0,0"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding ContentPadding}"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</telerik:RadTabView.HeaderItemTemplate>If you want a completely custom header item, then you can just replace it with your own Label and use the Header's BindingContext (of type TabViewHeaderItem) to bind to the Text property <Label Text="{Binding Text}" />