How to use RadTransitionControl in RadTabControl

[Antony]

Hi Team,

 

I need to use some transition effects for RadTabControl when the tab selection is changed.I have used the below code in RadTabControl style, but it is not working as expected. Please share any ideas to use transition control in RadTabControl?

<ControlTemplate x:Key="TabControlTemplate" TargetType="telerikNavigation:RadTabControl">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="Normal"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="DropDownDisplayStates">
                <VisualState x:Name="DropDownButtonCollapsed"/>
                <VisualState x:Name="DropDownButtonVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PlacementStates">
                <VisualState x:Name="Left">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="-90"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0 1 1 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Right">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="90"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1 1 0 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Top"/>
                <VisualState x:Name="Bottom">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1 1 1 0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="180"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="180"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <telerik:RadDockPanel LastChildFill="True">
            <telerikPrimitives:LayoutTransformControl x:Name="HeaderDockedElement" SnapsToDevicePixels="True" telerik:RadDockPanel.Dock="Top">
                <Grid SnapsToDevicePixels="True">
                    <Border x:Name="HeaderBackground" SnapsToDevicePixels="True" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>
                    <telerik:RadDockPanel Panel.ZIndex="10"
                                          SnapsToDevicePixels="True">
                        <telerikPrimitives:LayoutTransformControl x:Name="AdditionalContentTransform" Margin="0 4 0 2" telerik1:RadDockPanel.Dock="Right">
                            <ContentPresenter x:Name="AdditionalContentElement" Content="{TemplateBinding AdditionalContent}"/>
                        </telerikPrimitives:LayoutTransformControl>
                        <ToggleButton x:Name="DropDownButtonElement"
                                      Visibility="Collapsed"
                                      telerik1:RadDockPanel.Dock="Right"
                                      Style="{TemplateBinding DropDownButtonStyle}"
                                      ClickMode="Press"
                                      IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            <telerikNavigation:RadContextMenu.ContextMenu>
                                <telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"
                                                                StaysOpen="False"
                                                                Placement="Bottom"
                                                                Style="{TemplateBinding DropDownStyle}"
                                                                ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"
                                                                ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
                                                                DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"/>
                            </telerikNavigation:RadContextMenu.ContextMenu>
                        </ToggleButton>
                        <RepeatButton x:Name="LeftScrollButtonElement" Margin="4 4 2 2"/>
                        <RepeatButton x:Name="RightScrollButtonElement" telerik:RadDockPanel.Dock="Right" RenderTransformOrigin="0.5 0.5" Margin="2 4 0 2">
                            <RepeatButton.RenderTransform>
                                <ScaleTransform ScaleX="-1"/>
                            </RepeatButton.RenderTransform>
                        </RepeatButton>
                        <Grid>
                            <ScrollViewer x:Name="ScrollViewerElement"
                                          VerticalScrollBarVisibility="Disabled"
                                          BorderThickness="0"
                                          IsTabStop="False"
                                          HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Grid>
                    </telerik:RadDockPanel>
                </Grid>
            </telerikPrimitives:LayoutTransformControl>
            <Border x:Name="ContentBorder"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Mode=TwoWay}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">

                <Grid>
                    <telerik:RadTransitionControl x:Name="ContentElement"
                                                  Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertBoolToVisConverter}}"
                                      ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                                      ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}">
                        <telerik:RadTransitionControl.Transition>
                            <telerikTransitions:FadeTransition />
                        </telerik:RadTransitionControl.Transition>
                    </telerik:RadTransitionControl>
                    <Grid x:Name="ContentElementsPanel"
                          Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BoolToVisConverter}}"/>
                </Grid>
            </Border>
        </telerik:RadDockPanel>
    </Grid>
</ControlTemplate>

 

 

Regards,

Antony

[Antony]

Hi Team,

Any update on this?

Regards,

Antony

[Kalin]

Hello Antony,

RadTransitionControl plays the transition animation whenever its Content changes - try binding the Content property of the control to the SelectedContent property of the TabControl:

<telerik:RadTransitionControl x:Name="ContentElement"
    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertBoolToVisConverter}}"
    Content="{TemplateBinding SelectedContent}"
    ContentTemplate="{TemplateBinding SelectedContentTemplate}"
    ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}">

Hope this helps.

Regards,
Kalin
Telerik by Progress

[Antony]

Its works great, Thanks Kalin.

-

Antony