This is a migrated thread and some comments may be shown as answers.

RadTabControl, how to use unused space

5 Answers 218 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Samuele
Top achievements
Rank 2
Samuele asked on 24 Aug 2010, 04:42 PM
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

5 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 27 Aug 2010, 03:51 PM
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
0
Samuele
Top achievements
Rank 2
answered on 30 Aug 2010, 08:57 AM
Hello Tina,

Thanks for your fast answer its really what we needed.

Cheers
Samuele
0
Erik
Top achievements
Rank 1
answered on 22 Jan 2013, 03:10 PM
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?
0
Tina Stancheva
Telerik team
answered on 25 Jan 2013, 01:12 PM
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.

0
Erik
Top achievements
Rank 1
answered on 04 Feb 2013, 10:20 AM

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

Tags
TabControl
Asked by
Samuele
Top achievements
Rank 2
Answers by
Tina Stancheva
Telerik team
Samuele
Top achievements
Rank 2
Erik
Top achievements
Rank 1
Share this question
or