This is a migrated thread and some comments may be shown as answers.

How to Animate Controls in RadSlideView Items selection ?

5 Answers 52 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Pardeep
Top achievements
Rank 1
Pardeep asked on 14 Mar 2016, 12:48 PM

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.

5 Answers, 1 is accepted

Sort by
0
Pardeep
Top achievements
Rank 1
answered on 15 Mar 2016, 05:00 AM

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.

0
Rosy Topchiyska
Telerik team
answered on 15 Mar 2016, 01:06 PM
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
0
Pardeep
Top achievements
Rank 1
answered on 16 Mar 2016, 06:24 AM

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.

0
Rosy Topchiyska
Telerik team
answered on 16 Mar 2016, 02:32 PM
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
0
Pardeep
Top achievements
Rank 1
answered on 19 Mar 2016, 08:11 AM
Thanks Rosy. :)
Tags
General Discussions
Asked by
Pardeep
Top achievements
Rank 1
Answers by
Pardeep
Top achievements
Rank 1
Rosy Topchiyska
Telerik team
Share this question
or