Direction with SlideAndZoomTransition

2 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 05 Apr 2012 Link to this post

    Hi,
    I have a problem with RadtransitionControl:
    I set the transition property in the XAML as :

    SlideAndZoomTransition

     

     

    MinAlpha="1.0" MinZoom="1.0" StartSlideAt="0.2" LayoutAnimation="Animated" SlideDirection="LeftToRight"


    My goal is to change the slideDirection at runtime from LeftToRight to RightToLeft, but I can' t access the RadTransitionControl object.

    this is the xaml of my project:

    <

     

     

    Window x:Class="Kribi3D_BenchMark.MainWindow"

     

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

     

    Title="" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" ShowInTaskbar="False" WindowStyle="None" VerticalContentAlignment="Center" VerticalAlignment="Center" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="750px" Width="1350px" SnapsToDevicePixels="True">

     

     

    <Window.Background>

     

     

    <ImageBrush ImageSource="/Kribi3D_BenchMark;component/images/Kribi_Bench_mirino.png" />

     

     

    </Window.Background>

     

     

    <Window.Resources>

     

     

    <ControlTemplate x:Key="FrameTemplate" TargetType="{x:Type Frame}" x:Name="template">

     

     

    <telerik:RadTransitionControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Duration="00:00:02" FlowDirection="LeftToRight" UseLayoutRounding="True" TransitionStatusChanged="transition_TransitionStatusChanged" x:Name="transition" HorizontalAlignment="Center" HorizontalContentAlignment="Center" IsManipulationEnabled="True">

     

     

    <telerik:RadTransitionControl.Transition>

     

     

    <telerik:SlideAndZoomTransition MinAlpha="1.0" MinZoom="1.0" StartSlideAt="0.2" LayoutAnimation="Animated" SlideDirection="LeftToRight"/>

     

     

    </telerik:RadTransitionControl.Transition>

     

     

    </telerik:RadTransitionControl>

     

     

    </ControlTemplate>

     

     

    <Style x:Key="RadButtonStyle1" TargetType="{x:Type telerik:RadButton}">

     

     

    <Setter Property="BorderThickness" Value="1"/>

     

     

    <Setter Property="BorderBrush" Value="#FF848484"/>

     

     

    <Setter Property="Background">

     

     

    <Setter.Value>

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

    <GradientStop Color="White" Offset="0"/>

     

     

    <GradientStop Color="Gainsboro" Offset="0.5"/>

     

     

    <GradientStop Color="#FFADADAD" Offset="0.5"/>

     

     

    <GradientStop Color="#FFD4D4D4" Offset="1"/>

     

     

    </LinearGradientBrush>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter Property="Foreground" Value="Black"/>

     

     

    <Setter Property="HorizontalContentAlignment" Value="Center"/>

     

     

    <Setter Property="VerticalContentAlignment" Value="Center"/>

     

     

    <Setter Property="Padding" Value="3"/>

     

     

    <Setter Property="CornerRadius" Value="1"/>

     

     

    <Setter Property="Template">

     

     

    <Setter.Value>

     

     

    <ControlTemplate TargetType="{x:Type telerik:RadButton}">

     

     

    <Grid SnapsToDevicePixels="True">

     

     

    <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">

     

     

    <Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>

     

     

    </Border>

     

     

    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

     

     

    <Border x:Name="CommonStatesWrapper">

     

     

    <Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="0" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0" Visibility="Collapsed">

     

     

    <Border x:Name="FocusInnerVisual" BorderBrush="Transparent" BorderThickness="1" CornerRadius="{TemplateBinding InnerCornerRadius}"/>

     

     

    </Border>

     

     

    </Border>

     

     

    </Grid>

     

     

    <ControlTemplate.Triggers>

     

     

    <Trigger Property="IsMouseOver" Value="True">

     

     

    <Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>

     

     

    <Setter Property="BorderBrush" TargetName="InnerBorder" Value="White"/>

     

     

    </Trigger>

     

     

    <Trigger Property="IsPressed" Value="True">

     

     

    <Setter Property="Opacity" TargetName="CommonStatesWrapper" Value="0"/>

     

     

    <Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>

     

     

    <Setter Property="BorderBrush" TargetName="InnerBorder">

     

     

    <Setter.Value>

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

    <GradientStop Color="#FFB69A78"/>

     

     

    <GradientStop Color="#FFFFE17A" Offset="0.126"/>

     

     

    </LinearGradientBrush>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    </Trigger>

     

     

    <MultiTrigger>

     

     

    <MultiTrigger.Conditions>

     

     

    <Condition Property="IsBackgroundVisible" Value="False"/>

     

     

    <Condition Property="IsMouseOver" Value="False"/>

     

     

    </MultiTrigger.Conditions>

     

     

    <Setter Property="Opacity" TargetName="OuterBorder" Value="1"/>

     

     

    </MultiTrigger>

     

     

    <Trigger Property="IsEnabled" Value="False">

     

     

    <Setter Property="Opacity" TargetName="Content" Value="1"/>

     

     

    <Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>

     

     

    <Setter Property="Background" TargetName="InnerBorder" Value="Transparent"/>

     

     

    <Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>

     

     

    </Trigger>

     

     

    <Trigger Property="IsFocused" Value="True">

     

     

    <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>

     

     

    <Setter Property="Opacity" TargetName="FocusVisual" Value="0"/>

     

     

    </Trigger>

     

     

    </ControlTemplate.Triggers>

     

     

    </ControlTemplate>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    </Style>

     

     

    </Window.Resources>

     

     

    <Grid Height="672" telerik:StyleManager.Theme="Office_Black" VerticalAlignment="Bottom" HorizontalAlignment="Center">

     

     

    <Frame HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1350" NavigationUIVisibility="Hidden" Template="{StaticResource FrameTemplate}" Margin="0,0,0,58" HorizontalContentAlignment="Center" VerticalContentAlignment="Stretch" Height="614" SnapsToDevicePixels="False" Focusable="False" IsHitTestVisible="True" IsTabStop="False" />

     

     

    <telerik:RadButton Height="48" HorizontalAlignment="Right" Margin="0,620,1192,0" Name="backfromTest" Tag="Bench" VerticalAlignment="Top" Width="48" Click="backfromTest_Click" BorderThickness="0" Style="{DynamicResource RadButtonStyle1}">

     

     

    <telerik:RadButton.Background>

     

     

    <ImageBrush ImageSource="/Kribi3D_BenchMark;component/images/Kribi_Bench_tasto_back.png" />

     

     

    </telerik:RadButton.Background>

     

     

    </telerik:RadButton>

     

     

    <Image Height="65" HorizontalAlignment="Left" Margin="12,-68,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="533" Source="/Kribi3D_BenchMark;component/images/Kribi_Bench_logo.png" />

     

     

    <Image Height="65" HorizontalAlignment="Left" Margin="1128,-68,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Kribi3D_BenchMark;component/images/Kribi_Bench_Inartis.png" />

     

     

    <telerik:RadButton Height="48" HorizontalAlignment="Right" Margin="0,620,1260,0" Name="radButton1" VerticalAlignment="Top" Width="48" BorderBrush="#00000000" BorderThickness="0" Click="radButton1_Click" Style="{DynamicResource RadButtonStyle1}" >

     

     

    <telerik:RadButton.Background>

     

     

    <ImageBrush ImageSource="images/Kribi_Bench_tasto_close.png"/>

     

     

    </telerik:RadButton.Background>

     

     

    </telerik:RadButton>

     

     

    </Grid>

    </

     

     

    Window>


  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Apr 2012 Link to this post

    Hello Jean-Marc,

    I would suggest to check the following link:
    http://www.telerik.com/help/wpf/radtransition-how-to-transition-selection.html

    where it is explained how you could change the transition at run time.

    Kind regards,
    Yana
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top