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