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