TabControl's content

2 posts, 1 answers
  1. Goran
    Goran avatar
    77 posts
    Member since:
    Feb 2011

    Posted 21 Jun 2012 Link to this post


    Is it possible to do these two things with TabControl (TabOrientation="Vertical" and TabStripPlacement="Left")

    1) all TabItem headers to occupy all available space. (ex, if tabControl's Height is 500, and we have 5 TabItems, then each TabItem should have Header.Height = 100. I am using below template to make TabItem;'s header wider, but I am setting the Height explicitly.

    <DataTemplate x:Key="tabItemTemplate">
        <Grid Height="100">
            <TextBlock Text="{Binding Mode=OneWay, Converter={StaticResource enumConverter}}" VerticalAlignment="Center"/>

    <telerik:RadTabControl ItemsSource="{Binding Source={x:Static data:ActivityType.Production}, Converter={StaticResource enumWithoutNoneConverter}}"
                           ItemTemplate="{StaticResource tabItemTemplate}"
                           SelectedItem="{Binding SelectedType}"
                           TabStripPlacement="Left" />

    2) I would like to set the Content of each TabItem to null (Nothing). Currently it is displaying the same text as Header does, only without converter. I don't want it to display anything, I just need TabControl;s headers visible.

  2. Answer
    Tina Stancheva
    Tina Stancheva avatar
    3298 posts

    Posted 26 Jun 2012 Link to this post

    Hi Goran,

    In order to implement your scenario, you don't have to set the Height of the Headers through the ItemTemplate. Instead you can set the RadTabControl.Align property to Justify.

    You can implement your second requirement by defining a RadTabControl.ContentTemplate which displays an empty Grid control.

    I attached a sample solution demonstrating both suggestions. Please have a look at it and let me know if it helps.

    All the best,
    Tina Stancheva
    the Telerik team

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

  3. DevCraft banner
Back to Top