How to use RadTransitionControl in RadTabControl

4 posts, 1 answers
  1. Antony
    Antony avatar
    13 posts
    Member since:
    May 2014

    Posted 14 Mar Link to this post

    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

  2. Antony
    Antony avatar
    13 posts
    Member since:
    May 2014

    Posted 20 Mar in reply to Antony Link to this post

    Hi Team,

    Any update on this?

    Regards,

    Antony

  3. Answer
    Kalin
    Admin
    Kalin avatar
    1279 posts

    Posted 22 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Antony
    Antony avatar
    13 posts
    Member since:
    May 2014

    Posted 23 Mar in reply to Kalin Link to this post

    Its works great, Thanks Kalin.

    -

    Antony

Back to Top