How to Animate Controls in RadSlideView Items selection ?

6 posts, 0 answers
  1. Pardeep
    Pardeep avatar
    7 posts
    Member since:
    Jan 2016

    Posted 14 Mar Link to this post

    Hi,

    I am trying to animate controls that is defined under DataTemplate-> Grid as :

    <PhoneApplicationPage.Resources>
            <DataTemplate x:Key="PageOneTemplate">
                <Grid>
                    <Grid.Resources>
                        <Storyboard x:Name="PageOneAnimation">
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="imageElementA" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="imageElementA" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="imageElementB" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="imageElementB" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="imageElementC" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="imageElementC" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:1.0" To="50" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                        </Storyboard>
                    </Grid.Resources>

                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Loaded">
                            <em:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource PageOneAnimation}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock x:Name="textBlock" FontFamily="Segoe WP" Opacity="0.8" FontSize="29" Foreground="Black" TextAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,-50,0,50" Text="XYZ..">
                        <TextBlock.RenderTransform>
                            <CompositeTransform/>
                        </TextBlock.RenderTransform>                
                    </TextBlock>

                    <Image Grid.Row="1" Margin="0,50,0,0" Source="/Assets/Communities/BoardMainImage0.png" Stretch="Uniform"/>
                    <Image x:Name="imageElementA" Grid.Row="1" Source="/Assets/Communities/OnboardingSlide_element_a.png" Stretch="Uniform" Width="69" Height="68" HorizontalAlignment="Center" Margin="0,-300,0,0" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <CompositeTransform ScaleX="0" ScaleY="0"/>
                        </Image.RenderTransform>
                    </Image>
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="298"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Image x:Name="imageElementB" Margin="45,15,0,0" Source="/Assets/Communities/OnboardingSlide_element_b.png" Stretch="Uniform" Width="55" Height="55" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <CompositeTransform ScaleX="0" ScaleY="0"/>
                            </Image.RenderTransform>
                        </Image>
                        <Image x:Name="imageElementC" Margin="-28,100,0,0" Grid.Column="2" Source="/Assets/Communities/OnboardingSlide_element_c.png" Stretch="Uniform" Width="69" Height="60" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <CompositeTransform ScaleX="0" ScaleY="0"/>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>

                </Grid>
            </DataTemplate>

    </PhoneApplicationPage.Resources>

     

    Similarly I have PageTwo and PageThree. And these Pages are bind using DataTemplate Selector , further DataTemplate Selector is bind to RadSlideView. Example : 

    <Selectors:CommunityBoardingPageTemplateSelector x:Key="BoardingPageSelector"
               PageOneTemplate="{StaticResource PageOneTemplate}"/>

    <DataTemplate x:Key="BoardingPagesDataTemplate">
                <Grid Margin="0,0,0,10">
                    <olxControls:LongListSelectorControl Content="{Binding}" TemplateSelector="{StaticResource BoardingPageSelector}"/>
                </Grid>
     </DataTemplate>

    Then Inside LayoutRoot I am using RadSlideView as :

     

    <telerikPrimitives:RadSlideView x:Name="slideView" ItemTemplate="{StaticResource BoardingPagesDataTemplate}" ItemsSource="{Binding BoardingPages}" CacheMode="BitmapCache">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged" >
                            <i:InvokeCommandAction Command="{Binding SelectedBoardingPageCommand}" CommandParameter="{Binding ElementName=slideView, Path=SelectedItem}"/>                        
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </telerikPrimitives:RadSlideView>

     

    Now the Problem is :

    - I have to bind RadSlideView using ViewModel property so I can only able to get Model object on SelectionChanged. So it won't be possible to fetch an Item dynamically and animate it.

    - I tried animate controls using Triggers in Each Page Grid Loaded event. But RadSlideView does load all the DataTemplate at one-time. So I can't able to Animate each Page Items while selecting it.

    Any suggestion please. How Do I animate items of RadSlideView ?

    Thanks.

  2. Pardeep
    Pardeep avatar
    7 posts
    Member since:
    Jan 2016

    Posted 15 Mar in reply to Pardeep Link to this post

    Hi ,

    Can I expect a reply or suggestion in this forum? Since we are using Telerik controls in our product from a long time, we are expecting to have a product support.

    Thanks.

  3. DevCraft banner
  4. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 15 Mar Link to this post

    Hi Pardeep,

    Thank you for contacting us.

    The RadSlideView supports two item realization modes. If you set the ItemRealizationMode property to "ViewportItem", only the current item will be realized. In this mode you could use the SlideViewItem.LoadAnimation property to set a custom animation that will be played on the element when it appears. The whole content will be animated this way, but animating individual elements in the template is not supported. Here is how you can set the LoadAnimation:
    <telerikPrimitives:RadSlideView ItemRealizationMode="ViewportItem">
        <telerikPrimitives:RadSlideView.ItemContainerStyle>
            <Style TargetType="telerikSlideView:SlideViewItem">
                <Setter Property="LoadAnimation">
                    <Setter.Value>
                        <telerikCore:RadScaleAnimation StartScaleX="0" EndScaleX="1" Duration="0:0:1" />
                    </Setter.Value>
                </Setter>
            </Style>
        </telerikPrimitives:RadSlideView.ItemContainerStyle>
    </telerikPrimitives:RadSlideView>

    Where:
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"


    I hope this helps.

    Regards,
    Rosy Topchiyska
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Pardeep
    Pardeep avatar
    7 posts
    Member since:
    Jan 2016

    Posted 16 Mar in reply to Rosy Topchiyska Link to this post

    Hi Rosy,

    Thanks Alot. Your Suggestion really helped me and saved my Day.

    One more Quick question, Does Telerik support page control in IOS like :

    http://stackoverflow.com/questions/18215303/creating-a-tutorial-for-my-ios-app-with-page-control

    Or Any Suggestion how can I create it using existing telerik controls ?

     

    Thanks.

  6. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 16 Mar Link to this post

    Hi Pardeep,

    You can take a look at RadPagination that integrates nicely with the RadSlideView control.

    Regards,
    Rosy Topchiyska
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Pardeep
    Pardeep avatar
    7 posts
    Member since:
    Jan 2016

    Posted 19 Mar in reply to Rosy Topchiyska Link to this post

    Thanks Rosy. :)
Back to Top
DevCraft banner