[Solved] How to make TabControl TabItem full height

[Lasse]

Hello there,

I have a RadDataForm in which I added a custom template, and in this template I added a TabControl with a few TabItems.

My problem is that the TabItems (a.k.a. tab pages) adjust the height to the contents in stead of being height 100%. How can I achieve all TabItems filling the height 100%?

Here is my XAML (RadTabControl is on line 14):

<UserControl x:Class="ModulePackage.Views.GridView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
    mc:Ignorable="d"
    d:DesignHeight="414" d:DesignWidth="763" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:my="clr-namespace:ModulePackage.Views">

    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="ModulesInPackageTemplate">
                <Grid>
                    <telerik:RadTabControl>
                        <telerik:RadTabItem Header="General">
                            <telerik:DataFormDataField Label="Name" DataMemberBinding="{Binding Name, Mode=TwoWay}" />
                        </telerik:RadTabItem>
                        <telerik:RadTabItem Header="Modules">
                            <my:ModulesInPackage Height="300" HorizontalAlignment="Left" x:Name="modulesInPackage" VerticalAlignment="Top" Loaded="modulesInPackage_Loaded"/>
                        </telerik:RadTabItem>
                    </telerik:RadTabControl>
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <telerik:RadDocking Name="RadDocking" HasDocumentHost="False">

            <telerik:RadSplitContainer Name="RadSplitContainerTop" InitialPosition="DockedTop" Width="Auto" Height="30">
                <telerik:RadPaneGroup Name="RadGroupToolBar" Background="Transparent" BorderThickness="0">
                    <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed">
                        <telerik:RadToolBarTray Name="RadToolBarTray" VerticalAlignment="Top">
                            <telerik:RadToolBar Name="RadToolBar">
                                <Button Content="Manage Modules" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Click="button1_Click" />
                            </telerik:RadToolBar>
                        </telerik:RadToolBarTray>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <telerik:RadSplitContainer Name="RadSplitContainerBottom" InitialPosition="DockedLeft" Orientation="Horizontal">
                <telerik:RadPaneGroup Name="RadGroup1" >
                    <telerik:RadPane Name="GridViewPane" PaneHeaderVisibility="Collapsed">
                        <telerik:RadGridView x:Name="RadGridView" />
                    </telerik:RadPane>
                </telerik:RadPaneGroup>

                <telerik:RadPaneGroup Name="RadGroup2" >
                    <telerik:RadPane Name="ReadingPane" PaneHeaderVisibility="Collapsed">
                        <telerik:RadDataForm Name="RadDataForm" AutoGenerateFields="False"
                                                                 NewItemTemplate="{StaticResource ModulesInPackageTemplate}"
                                                                 EditTemplate="{StaticResource ModulesInPackageTemplate}"
                                                                 ReadOnlyTemplate="{StaticResource ModulesInPackageTemplate}"/>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

        </telerik:RadDocking>
        <telerik:RadBusyIndicator Name="RadBusyIndicator" IsBusy="{Binding Path=IsBusy, ElementName=_domainDataSource}" telerik:Theming.Theme="Expression_Dark" Visibility="Collapsed" />
    </Grid>
</UserControl>

[Tina Stancheva]

Hi Mikkel,

The issue is caused by the RadDataForm ControlTemplate structure - basically the control places its content in a StackPanel inside a ScrollViewer. However, both controls measure its children with infinity and this is why the RadTabControl cannot be stretched.

You can either edit the default ControlTemplate of the RadDataForm to host its content in different panel - like Grid, or you can set the RadTabControl Width and Height properties to control its size.

I attached a sample project where I modified the RadDataForm ControlTemplate to host its content in a Grid instead of a StackPanel. Please have a look at the solution and let me know if it helps or if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[Lasse]

Hi Tina,


Took me a while to try out your sample, but finally got it done.

I don't think it is a good solution to edit the default ControlTemplate of the RadDataForm, since it would have to do it in every form using the TabControl - and that's many. It could also turn out to be nasty to maintain when updating the Telerik SDK.

Isn't there a more elegant generic way of going about it? Setting the size of the TabControl/TabPage seems like a bad and non-dynamic solution too - it should resize when the user resizes the browser...

Hope you can dig something up for me :)

[Ivan Ivanov]

Hello Mikkel,

Unfortunately there is no alternative approach to achieving this but these two ones. As for me, I would recommend you to customize RadDataForm's template, like my colleague has demonstrated in the previous post, as breaking changes in control's templates are being introduced only in extreme cases and the support of such a solution won't be as cumbersome as it looks. However, if such changes has been made, they would be documented in the release notes and a quick solution will be provided in case you are affected. Please, excuse us for this inconvenience.

Regards,
Ivan Ivanov
the Telerik team