ToolkitExpander must expand slowly in windows phone8 - windows-phone-7

Question

I have a toolkit expander control in windows phone 8 it is working fine .I have to expand the items slowly.and collapse them slowly.What additionally i have to add to expand and collapse slowly
<toolkit:ExpanderView x:Name="Header1" FontSize="22" Foreground="Black" Expanded="Header1_Expanded">
<toolkit:ExpanderView.Header>
<Grid x:Name="GettinghereGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" >
<Image Source="/Assets/Menu/getting-here.png" Margin="8,0,0,0" HorizontalAlignment="Left" Stretch="None"/>
<TextBlock Text="Getting here & around" VerticalAlignment="Center" Margin="10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
<Rectangle Height="2" Grid.Row="1" Fill="#D6D6D6D6" Width="500" />
</Grid>
</toolkit:ExpanderView.Header>
<toolkit:ExpanderView.Items>
<HyperlinkButton Name="Gettingherebutton" Margin="-230,1,0,0" Background="#EBEBEB" Click="Gettingherebutton_Click" >
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting here" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Gettingaroundbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Gettingaroundbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting around" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Factsbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Factsbutton_Click_1">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Facts & essenial info" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Adayoutbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Adayoutbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="A day out" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<UserControl.Resources>
<Style TargetType="toolkit:ExpanderView">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ExpanderView">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/>
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable"/>
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Line">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListBoxItem x:Name="ExpandableContent" Grid.ColumnSpan="2" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/>
<ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="11,0,0,0" Grid.Row="1"/>
<Grid x:Name="ExpanderPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
</Grid>
</ListBoxItem>
<!--<Line x:Name="Line" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="2" Stretch="Fill" Stroke="White" StrokeThickness="3" X1="0" X2="0" Y1="0" Y2="1"/>-->
<ContentControl x:Name="NonExpandableContent" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/>
<Canvas x:Name="ItemsCanvas" Grid.Column="1" Margin="11,0,0,0" Opacity="0.0" Grid.Row="2">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0"/>
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Thnx in advance

Answer 1

After lot of trial and error i got this
By changing the keytime of easout function we are going to expand it # what we need similarly in easin function if we change it collapses slowly
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.95" Value="1"/>