Currently working with Windows 8.1 and XAML Transitions.
I have a grid that translates across my page. Inside the grid I have an image which I want to scale.
When I set up the animations using Blend all is well but once deployed the scale animation on the image is never acted upon, it's as if the grid stops forces its children to ignore their transitions.
The same XAML code works as expected on Windows Phone, but not on Windows 8.1.
Here's some example code to illustrate:
<Page.Resources>
<ResourceDictionary>
<Storyboard x:Name="MainStoryboard">
<DoubleAnimationUsingKeyFrames x:Name="PanelOut" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Panel1">
<EasingDoubleKeyFrame x:Name="PanelOutInitial" KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame x:Name="PanelOutKeyFrame" KeyTime="0:0:3" Value="-648">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="PanelIn" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Panel2">
<EasingDoubleKeyFrame x:Name="PanelInInitial" KeyTime="0" Value="648"/>
<EasingDoubleKeyFrame x:Name="PanelInKeyFrame" KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Image2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Image2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot" Tapped="LayoutRoot_Tapped" Background="DarkGray">
<Grid
x:Name="Panel1"
Background="{StaticResource StoryBackgroundBrush}"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Grid.CacheMode>
<BitmapCache></BitmapCache>
</Grid.CacheMode>
<Grid>
<Image x:Name="Image1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="/uicontent/images/AttractLoop/imaging3.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Share photos easily." VerticalAlignment="Top" Margin="48,48,0,0" FontSize="68" FontFamily="Segoe UI" Foreground="#FFDA3B01"/>
</Grid>
</Grid>
<Grid
x:Name="Panel2"
Background="{StaticResource OneDriveBackgroundBrush}"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform x:Name="Trans" TranslateY="800"/>
</Grid.RenderTransform>
<Grid.CacheMode>
<BitmapCache></BitmapCache>
</Grid.CacheMode>
<Grid>
<Image x:Name="Image2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="/uicontent/images/AttractLoop/imaging1.jpg" Stretch="UniformToFill">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Tap to begin." VerticalAlignment="Top" Margin="48,48,0,0" FontSize="68" FontFamily="Segoe UI" Foreground="#FFDA3B01"/>
</Grid>
</Grid>
</Grid>
Interestingly, when I try to edit the transition in Blend the scale animation slider always snaps back to 0 as if there is a bug.
Any ideas as to why this is happening?
XAML for WinRT may be very similar to Silverlight, but since Windows Store applications can run in low-end devices, some restrictions have been introduced. In your case, you are trying to animate a child object, and that is considered a dependent animation. By default, WinRT doesn't execute dependent animations, unless you specify EnableDependentAnimation="True" when declaring the animation object.
Related
I'm having issues as I'm trying to start storyboard animation when application starts. I have fast storyboard animation (0.5 seconds), attached to main page's Loaded event via EventTriggerBehavior in Blend which starts storyboard animation. But almost every time application (after hiding splash screen) animation is already done.
Here is my XAML (for WP8.1; but same applies for 8.1 store application):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:OnloadAnimation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
x:Class="OnloadAnimation.MainPage"
mc:Ignorable="d">
<Page.Resources>
<Storyboard x:Name="OnloadStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseInOut" Exponent="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="367.164">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseInOut" Exponent="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseInOut" Exponent="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="400">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseInOut" Exponent="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Loaded">
<Media:ControlStoryboardAction Storyboard="{StaticResource OnloadStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Grid Background="#FF1D1D1D">
<Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="205" Stroke="Black" VerticalAlignment="Top" Width="200" RenderTransformOrigin="0.5,0.5">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerPressed">
<Media:ControlStoryboardAction Storyboard="{StaticResource OnloadStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Page>
Also here is full solution.
I don't know how to make animation occurrence and damping in a few seconds.
I know about FadeOutThemeAnimation and FadeInThemeAnimation, but I need to combine them in one animation. Maybe someone know.
UPD: This is done through DoubleAnimation msdn description
It's hard to be sure exactly the animation you want. So I put together a few that will likely give you what you want. Just paste this into a page and run it.
<Page.Resources>
<Storyboard x:Name="RevealImages">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="-300"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-300"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-250"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="250"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="Filling"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="Waiting"/>
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="Hiding"/>
<DiscreteObjectKeyFrame KeyTime="0:0:3" Value=""/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<FontFamily>Global User Interface</FontFamily>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<FontFamily>Global User Interface</FontFamily>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Show" HorizontalAlignment="Left" Height="75" Margin="7,7,0,0" VerticalAlignment="Top" Width="92" FontFamily="Global User Interface">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Media:ControlStoryboardAction Storyboard="{StaticResource RevealImages}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
<Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="250" Margin="10,117,0,0" VerticalAlignment="Top" Width="250" RenderTransformOrigin="0.5,0.5" Fill="White">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="-250"/>
</Rectangle.RenderTransform>
</Rectangle>
<Grid HorizontalAlignment="Left" Height="250" Margin="265,117,0,0" VerticalAlignment="Top" Width="250">
<Grid.Clip>
<RectangleGeometry Rect="0,0,250,250" />
</Grid.Clip>
<Rectangle x:Name="rectangle1" Fill="White" RenderTransformOrigin="0.5,0.5" >
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="-250" TranslateY="250"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Rectangle x:Name="rectangle2" HorizontalAlignment="Left" Height="250" Margin="520,117,0,0" VerticalAlignment="Top" Width="250" Opacity="0" Fill="White"/>
<TextBlock HorizontalAlignment="Left" Height="28" Margin="10,84,0,0" TextWrapping="Wrap" Text="Slide In" VerticalAlignment="Top" Width="250" FontSize="20"/>
<TextBlock HorizontalAlignment="Left" Height="28" Margin="265,84,0,0" TextWrapping="Wrap" Text="Slip In" VerticalAlignment="Top" Width="250" FontSize="20"/>
<TextBlock HorizontalAlignment="Left" Height="28" Margin="520,84,0,0" TextWrapping="Wrap" Text="Fade In" VerticalAlignment="Top" Width="250" FontSize="20"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="137" Margin="113,10,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="238" FontSize="66.667"/>
</Grid>
Best of luck!
This is how my LongListMultiSelector looks on WP8 app when i set IsSelectionEnabled = true
By default, the checkbox is shown on left. How do i change it to show on right handside ?
XAML Code:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="GHATIKA" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="cities" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:LongListMultiSelector x:Name="AddrBook"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
</Grid>
</Grid>
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel VerticalAlignment="Top">
<TextBlock FontWeight="Bold" Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" />
<TextBlock Text="{Binding Address}" />
<TextBlock Text="{Binding Phone}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
<Border Background="Transparent" Margin="12,8,0,8">
<Border Background="{StaticResource PhoneAccentBrush}"
Padding="8,0,0,0" Width="62" Height="62"
HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="113,113"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="Auto" Height="Auto" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Margin="8,0,0,0" Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
So the bad news is that the Phone Toolkit dev team has decided to make the style for the LongListMultiSelectorItem an INTERNAL property only so that it always looks like how you find it in the mail apps. This means you cannot override the style using the pre-built DLL's...
The Good news is that it's open source. So you can go and change this, the down side is that you will have to keep a copy of the whole toolkit in your source and if you ever wanted to update with a later copy of the toolkit you will have to manually merge this. We can always raise a change request with them and see if they would be kind enough to change this for us, but in the mean time, if you still want to do it you will have to try one of these options:
If you would like ALL your instances of the LongListMultiSelector to have right aligned check boxes then all you need to do is edit the style named "LongListMultiSelectorItemListStyle" in the Themes/Generic.xaml file (Best to use blend as you can move things around easier and see the visual states of the control - But I noticed while trying this myself that blend will rename the Visual States and add a 1 in front, you will want to remove those, and be aware of the animations changing between the states).
If you would like a better solution that would allow you to create your own template for just a single instance of the control, I suggest just going to the LongListMultiSelector and changing the DefaultListItemContainerStyleProperty and DefaultGridItemContainerStyleProperty (plus their backing fields) to public and then you can do something like the following in your code (This is just a reverse of the left to right style, it may not suit what you want as when the checkbox fly's out, the content moves to the right as well):
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit">
<!-- Resource dictionary entries should be defined here. -->
<Style TargetType="controls:LongListMultiSelector">
<Setter Property="DefaultListItemContainerStyle" Value="{StaticResource RightLongListMultiSelectorItemListStyle}"/>
</Style>
<Style x:Key="RightLongListMultiSelectorItemListStyle" TargetType="controls:LongListMultiSelectorItem">
<Style.Setters>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:LongListMultiSelectorItem">
<Grid MinHeight="52">
<Grid.Resources>
<ExponentialEase EasingMode="EaseIn" Exponent="8" x:Key="ExponentialEaseIn"/>
<QuadraticEase EasingMode="EaseOut" x:Key="QuadraticEaseOut"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionEnabledStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ClosedToExposed"
From="Closed" To="Exposed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToClosed"
From="Exposed" To="Closed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToOpened"
From="Exposed" To="Opened"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ClosedToOpened"
From="Closed" To="Opened"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-68" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OpenedToClosed"
From="Opened" To="Closed"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-68" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Closed"/>
<VisualState x:Name="Exposed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="1.0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox"
Duration="0" To="-68"/>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter"
Duration="0" To="-86"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="0.0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="InfoPresenter"
VerticalAlignment="Top"
Content="{TemplateBinding ContentInfo}"
ContentTemplate="{TemplateBinding ContentInfoTemplate}"/>
<Grid Grid.Column="1" HorizontalAlignment="Stretch" primitives:ClipToBounds.IsEnabled="True">
<ContentPresenter x:Name="Presenter">
<ContentPresenter.RenderTransform>
<CompositeTransform TranslateX="-24"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<Rectangle x:Name="InnerHintPanel" Grid.Column="1" Width="24"
Height="{TemplateBinding HintPanelHeight}"
HorizontalAlignment="Right"
Fill="Transparent"
StrokeThickness="0">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="-24"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Rectangle x:Name="OuterHintPanel" Width="24"
HorizontalAlignment="Right"
Height="{TemplateBinding HintPanelHeight}"
Fill="{TemplateBinding Background}"
StrokeThickness="0" Opacity="0.0"/>
<Grid x:Name="OuterCover" IsHitTestVisible="True"
Visibility="Collapsed" Background="Transparent"/>
<Canvas HorizontalAlignment="Right">
<CheckBox x:Name="SelectBox" VerticalAlignment="Top" Margin="12,-20,5,0"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" Visibility="Collapsed">
<CheckBox.RenderTransform>
<CompositeTransform TranslateX="0"/>
</CheckBox.RenderTransform>
</CheckBox>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
I'm a bit a of XAML noob so this is probably something very simple I'm missing...
In a Windows Phone 8 app I have a map Pushpin I'm trying to animate with an effect very much like ripples in a pond. I have a large container eclipse and a child eclipse that will expand from 0 width/height to 30 width/height (the same size as the parent eclipse).
I'm doing this to visually indicate to the user that their location is actively being tracked, or just been picked up.
Unfortunately I've not managed to get my animation working.
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Width"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Height"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="Parent" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="Animated" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
Just in case it's relevant - this ControlTemplate is within a UserControl housing my Windows Phone 7 / Bing map control (the Windows Phone 8 map control is lacking some functionality I require).
Any help would be greatly appreciated. Thank you.
Update
I can add an animation, but am not sure how to apply the Storyboard via code. Ideally I'd like to apply the Storyboard by code as I'd like to define a couple for different circumstances.
Here's the updated XAML:
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="LocateStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="ParentEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="AnimatedEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
As a side note: I had issues creating the animation before as I was unaware that Blend does not record changes if you're tweaking the XAML code directly. You need to seek out the various property controls and set everything there.
This is the code I was trying to use to start the animation:
Pushpin pushpin = new Pushpin();
pushpin.Tag = PIN_TAG;
pushpin.Location = ViewModel.Location;
pushpin.Template = (ControlTemplate)Resources["UserLocationPushpinControlTemplate"];
pushpin.PositionOrigin = PositionOrigin.Center;
MapBase.Children.Add(pushpin);
Storyboard animation = (Storyboard)pushpin.Resources["LocateStoryboard"];
animation.Begin();
The storyboard variable is null. It seems I need to delve in to the ControlTemplate structure to dig down to the "LocateStoryboard" resource. Any ideas how to do this?
Not sure if it can help, but take a look at the article by Igor Ralic here... He has a detailed example on how to add a fade in animation on pushpins.
I have an question about Expression Blend 4.
I want to create a simple component appearing animation, when height of component changes from 0 to 100% and components below it are moving down to allocate required space.
My problem is that only static values in pixels allowed to create such type of animation. But I did not know height of my control (actually, it is textBox in which content and content length may vary), and I cannot set Height value of last keyframe to Auto.
What should I do to implement this task?
Thanks in advance.
I guess the easist way would be using the Fluid Layout.
In the below example I created a TextBlock and set its Visibility to Collpased. Then when the Show visual state is triggered, I set its Visibility to Visible. Normally you can't animate the Visibility but if you enable the Fluid Layout behavior (also remember to define a TransitionEffect), it will animate it for you automatically.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
x:Class="transformanimation.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.7" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:FadeTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Hide"/>
<VisualState x:Name="Show">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Grid Margin="205,96,275,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock" FontSize="26.667" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Fill="#FF767689" Stroke="Black" Grid.Row="1"/>
</Grid>
<Button Content="hide" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="63,19,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Hide"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="show" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="183,20,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Show"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
Of course if you don't want to use this magicial animation you can try animating its ScaleY. Something like this,
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
Hope this helps! :)