Tab Expand Animation in RadTabControl

Environment

Property	Value
Product	RadTabControl for WPF
Version	2024.1.312

Description

How to implement size expand animation for the RadTabItem triggered on mouse over.

Solution

One way to create this is to use Storyboard objects with DoubleAnimation that targets the Width or Height of the element in the Header of the RadTabItem.

<Window.Resources> 
    <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> 
 
    <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 x:Key="SPMouseOver" TargetType="{x:Type FrameworkElement}">             
        <Style.Triggers> 
            <EventTrigger RoutedEvent="MouseEnter"> 
                <EventTrigger.Actions> 
                    <BeginStoryboard Storyboard="{StaticResource AnimateUp}" /> 
                </EventTrigger.Actions> 
            </EventTrigger> 
            <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 TabStripPlacement="Left" 
                           TabOrientation="Vertical" 
                           Align="Right"> 
        <telerik:RadTabControl.Items> 
            <telerik:RadTabItem Height="{Binding ElementName=pnl, Path=Width}"  
                                HorizontalContentAlignment="Left">                 
                <telerik:RadTabItem.Header> 
                    <StackPanel Style="{StaticResource SPMouseOver}" Orientation="Horizontal" HorizontalAlignment="Left" Name="tab1Header"> 
                        <Image Source="/WpfApp1;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>                                
                <telerik:RadTabItem.Content>                     
                    <TextBlock TextWrapping="Wrap" Background="Beige" Text="Text Content 1"/> 
                </telerik:RadTabItem.Content> 
            </telerik:RadTabItem> 
            <telerik:RadTabItem Height="{Binding ElementName=pnl, Path=Width}" 
                                HorizontalContentAlignment="Left"> 
                <telerik:RadTabItem.Header> 
                    <StackPanel Style="{StaticResource SPMouseOver}" Orientation="Horizontal" HorizontalAlignment="Left" Name="tab2Header"> 
                        <Image Source="/WpfApp1;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> 
                    <TextBlock TextWrapping="Wrap" Background="Beige" Text="Text Content 2"/> 
                </telerik:RadTabItem.Content> 
            </telerik:RadTabItem> 
        </telerik:RadTabControl.Items> 
    </telerik:RadTabControl> 
</Grid>