How to reduce padding on RadTabView?

1 Answer 106 Views
TabView
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 13 Jul 2023, 01:01 PM
I think the padding of the TabViewItems in the RadTabView control is too large in some situations. If you reduce the height of the control, the text is no longer visible in whole or in part.Setting the value of padding to 0 changes nothing.Is there a way to reduce the padding?

1 Answer, 1 is accepted

Sort by
0
Lance | Senior Manager Technical Support
Telerik team
answered on 13 Jul 2023, 05:19 PM

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.

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Jul 2023, 07:09 PM

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>

 

Image link: https://imgtr.ee/image/U7ITx

I want to reduce the height of the areas I've circled red.

 

Regards,

Rolf

Lance | Senior Manager Technical Support
Telerik team
commented on 13 Jul 2023, 07:43 PM

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}" />

Tags
TabView
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lance | Senior Manager Technical Support
Telerik team
Share this question
or