This is a very simple animation example of the tabs... If you have huge tabs that get in the way, animate them down away from the user while they work. It woudl be nice to keep the content area the same size making the tabs pop out w/out resizing the content... I just ran out of time ;).
I found it very helpful to actually give a mouse over to expand each tab in order to show content when the user hovers over a tab item. I do this through code because we are adding the tabs dynamically but the idea is still the same.
We find it best to provide an image on the header content, then a short text description of the item they are clicking on when it expands.
The following XAML can be pasted into a new WPF app. Just remember to add your Telerik controls!
<
Window.Resources
>
<!-- Animates the tab's overall width using the framework element pnl as a common binding proxy -->
<
Storyboard
x:Key
=
"AnimateUp"
>
<
DoubleAnimation
Storyboard.Target
=
"{Binding ElementName=pnl}"
BeginTime
=
"00:00:00.20"
Duration
=
"00:00:00.250000"
Storyboard.TargetProperty
=
"Width"
To
=
"200"
FillBehavior
=
"HoldEnd"
/>
</
Storyboard
>
<!-- Animates the tab's overall width using the framework element pnl as a common binding proxy -->
<
Storyboard
x:Key
=
"AnimateDown"
>
<
DoubleAnimation
Storyboard.Target
=
"{Binding ElementName=pnl}"
BeginTime
=
"00:00:00.5"
Duration
=
"00:00:00.250000"
Storyboard.TargetProperty
=
"Width"
To
=
"37"
FillBehavior
=
"HoldEnd"
/>
</
Storyboard
>
<!-- Style to apply to the containers of the tab -->
<
Style
x:Key
=
"SPMouseOver"
TargetType
=
"{x:Type FrameworkElement}"
>
<
Style.Triggers
>
<!-- start animation when the user hovers over the tab's container -->
<
EventTrigger
RoutedEvent
=
"MouseEnter"
>
<
EventTrigger.Actions
>
<
BeginStoryboard
Storyboard
=
"{StaticResource AnimateUp}"
/>
</
EventTrigger.Actions
>
</
EventTrigger
>
<!-- end animation when the user leaves the tab's container -->
<
EventTrigger
RoutedEvent
=
"MouseLeave"
>
<
EventTrigger.Actions
>
<
BeginStoryboard
Storyboard
=
"{StaticResource AnimateDown}"
/>
</
EventTrigger.Actions
>
</
EventTrigger
>
</
Style.Triggers
>
</
Style
>
</
Window.Resources
>
<
Grid
>
<!-- this is hidden proxy object to be a common bind to all tabs. This is used so all tabs expand and not just the tab hovered over -->
<
FrameworkElement
Name
=
"pnl"
Width
=
"37"
Visibility
=
"Collapsed"
/>
<
telerik:RadTabControl
HorizontalAlignment
=
"Stretch"
Name
=
"tab"
VerticalAlignment
=
"Stretch"
TabStripPlacement
=
"Left"
TabOrientation
=
"Vertical"
Align
=
"Right"
>
<
telerik:RadTabControl.Items
>
<!-- Each tab item's height must bind to the width property. Due to the tab alignment the height is actually the width of the tab -->
<
telerik:RadTabItem
Name
=
"tab1"
Height
=
"{Binding ElementName=pnl, Path=Width}"
HorizontalContentAlignment
=
"Left"
>
<
telerik:RadTabItem.Header
>
<
StackPanel
Style
=
"{StaticResource SPMouseOver}"
Orientation
=
"Horizontal"
HorizontalAlignment
=
"Left"
Name
=
"tab1Header"
>
<
Image
Source
=
"/TabMouseOver;component/Images/24_button_green.png"
Width
=
"24"
Height
=
"24"
/>
<
TextBlock
Text
=
"Other descriptive content"
Margin
=
"5,0,0,0"
VerticalAlignment
=
"Center"
/>
</
StackPanel
>
</
telerik:RadTabItem.Header
>
<!-- For this example the content will be compressed as the tab is expanded. -->
<
telerik:RadTabItem.Content
>
<
ScrollViewer
>
<
TextBlock
TextWrapping
=
"Wrap"
Background
=
"Beige"
>
Text Content 1
</
TextBlock
>
</
ScrollViewer
>
</
telerik:RadTabItem.Content
>
</
telerik:RadTabItem
>
<!-- Second tab for demo purposes -->
<
telerik:RadTabItem
Name
=
"tab2"
Height
=
"{Binding ElementName=pnl, Path=Width}"
HorizontalContentAlignment
=
"Left"
>
<
telerik:RadTabItem.Header
>
<
StackPanel
Style
=
"{StaticResource SPMouseOver}"
Orientation
=
"Horizontal"
HorizontalAlignment
=
"Left"
Name
=
"tab2Header"
>
<
Image
Source
=
"/TabMouseOver;component/Images/24_button_purple.png"
Width
=
"24"
Height
=
"24"
/>
<
TextBlock
Text
=
"Other descriptive content"
Margin
=
"5,0,0,0"
VerticalAlignment
=
"Center"
/>
</
StackPanel
>
</
telerik:RadTabItem.Header
>
<
telerik:RadTabItem.Content
>
<
ScrollViewer
>
<
TextBlock
TextWrapping
=
"Wrap"
Background
=
"LightBlue"
>
Text Content 2
</
TextBlock
>
</
ScrollViewer
>
</
telerik:RadTabItem.Content
>
</
telerik:RadTabItem
>
</
telerik:RadTabControl.Items
>
</
telerik:RadTabControl
>