How to make TabControl TabItem full height

4 posts, 0 answers
  1. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 04 Nov 2011 Link to this post

    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: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>

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 09 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 10 Nov 2011 Link to this post

    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 :)
  5. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 15 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top