RadTabControl, how to use unused space

6 posts, 0 answers
  1. Samuele
    Samuele avatar
    3 posts
    Member since:
    Aug 2010

    Posted 24 Aug 2010 Link to this post

    Hello all,

    I have a very easy question, is it possible to use the unused space at the side of the tabs for some other elements, like in my example  (see attached screenshoot) ?

    Cheers
    Samuele
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 27 Aug 2010 Link to this post

    Hi Samuele,

    Yes, it is possible. In order to implement this scenario, you will have to edit the ControlTemplate of the RadTabControl. More information on how to edit Controltemplates in Expression Blend you can find here.

    Then you can modify the HeaderDockedElement to add the custom controls, for example like so:
    <!--HeaderDockedElement-->
    <telerik:LayoutTransformControl x:Name="HeaderDockedElement" telerik:RadDockPanel.Dock="Top">
        <Grid>
            <Border x:Name="HeaderBackground" Background="{StaticResource TabControl_HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>
            <Border BorderBrush="{StaticResource TabControl_ContentBorderBrush}" BorderThickness="0 0 0 1"/>
     
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
     
                <telerik:RadDockPanel Canvas.ZIndex="10">
                    <ToggleButton x:Name="DropDownButtonElement" telerik:RadDockPanel.Dock="Right" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="2 4 4 2" Style="{TemplateBinding DropDownButtonStyle}" Visibility="Collapsed">
                        <telerik:RadContextMenu.ContextMenu>
                            <Telerik_Windows_Controls_TabControl:DropDownMenu x:Name="DropDownMenuElement" DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}" ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}" ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}" Placement="Bottom" Style="{TemplateBinding DropDownStyle}" StaysOpen="False"/>
                        </telerik:RadContextMenu.ContextMenu>
                    </ToggleButton>
                    <RepeatButton x:Name="LeftScrollButtonElement" Margin="4 4 2 2" Style="{StaticResource LeftScrollButtonStyle}" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}"/>
                    <RepeatButton x:Name="RightScrollButtonElement" telerik:RadDockPanel.Dock="Right" Margin="2 4 2 2" Style="{StaticResource RightScrollButtonStyle}" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}"/>
                    <ScrollViewer x:Name="ScrollViewerElement" BorderThickness="0" HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}" IsTabStop="False" Margin="2 4 2 0" Style="{StaticResource EmptyScrollViewerStyle}" VerticalScrollBarVisibility="Disabled">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </telerik:RadDockPanel>
     
                <StackPanel Orientation="Horizontal" Grid.Column="1">
                    <TextBlock Text="User" FontWeight="Bold" Margin="0 0 3 0" VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding User}" Margin="0 0 3 0" VerticalAlignment="Center"/>
                    <TextBlock Text="Identity" FontWeight="Bold" Margin="0 0 3 0" VerticalAlignment="Center"/>
                    <telerik:RadComboBox ItemsSource="{Binding Identities}" Margin="0 0 3 0" SelectedIndex="0" VerticalAlignment="Center">
                        <telerik:RadComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}"/>
                            </DataTemplate>
                        </telerik:RadComboBox.ItemTemplate>
                    </telerik:RadComboBox>
                    <Button Width="20" Content="?" FontSize="14" FontWeight="Bold" Margin="0 0 3 0" VerticalAlignment="Center"/>
                </StackPanel>
     
            </Grid>
        </Grid>
    </telerik:LayoutTransformControl>

    I also attached a sample project illustrating this approach. Give it a try and let me know if this is what you had in mind.

    All the best,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Samuele
    Samuele avatar
    3 posts
    Member since:
    Aug 2010

    Posted 30 Aug 2010 Link to this post

    Hello Tina,

    Thanks for your fast answer its really what we needed.

    Cheers
    Samuele
  5. Erik
    Erik avatar
    4 posts
    Member since:
    Aug 2011

    Posted 22 Jan 2013 Link to this post

    I know this is an old post. But it is exactly what we want, only difference is that we want the tab headers at the bottom. But if I change the TabStripPlacement to Bottom all the extra items are placed upside down in the header (and placed on the left side instead of on the right side) whereas the original tabheaders are shown correctly. Is there an easy way to fix this?
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 25 Jan 2013 Link to this post

    Hi Erik,

    In your case, it would be best to rearrange the elements in the RadTabControl.ControlTemplate. Basically you need to consider the changes implemented by the LayoutTransformControl hosting all header elements. When the TabStip is positioned at the bottom of the RadTabControl, the LayoutTransformControl rotates the entire header TabStip part of the control. This why, it's better to place the additional content on the left side of the tabs ItemsPresenter and apply a RotateTransform on the StackPanel hosting the additional items.

    I modified the solution to demonstrate this approach. Have a look at it and let me know if it helps.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Erik
    Erik avatar
    4 posts
    Member since:
    Aug 2011

    Posted 04 Feb 2013 Link to this post

    Hi Tina,

    Thanks for the modified demo!
     
    Didn't realize this was a Silverlight example, I needed it for a RadTabControl in WPF.  But I didn't have much problems applying it to the WPF project.

    Regards,
    Erik

Back to Top
DevCraft banner