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.