I m doing some audio recording in my WP7 application. I want to show some basic animation to the user like one very small red button blinking or else three small buttons blinking one after the other till the recording is complete. Please let me know any idea on how to achieve this animation in WP7. I m not sure how to use the expression blend tools for animation.
Essentially this is the exact stuff you'll want Expression Blend for to create Storyboard animations because it makes it so much easier. However basically you just want to put some objects (in this case we'll use ellipses as an example) on your design surface, then set their opacities to the keyframes of a storyboard. I went ahead and made you a quick example of exactly what I think you're asking for you could customize to suit your needs. Hope it helps, otherwise you might want to read or watch a quick tutorial on Storyboard animations, and know what ControlStoryboardAction & EventTriggers do for ya. I wont say its perfect but it will serve as a good start. :)
<Style x:Key="QuickAnimatedDots" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource
PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource
PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource
PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource
PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource
PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Background="Transparent" Width="55" Height="25">
<Grid.Resources>
<Storyboard x:Name="QuickNDirtyAnimatedDots" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ellipse1">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ellipse2">
<DiscreteObjectKeyFrame KeyTime="0:0:0.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Horizontal">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded" SourceName="grid">
<eim:ControlStoryboardAction Storyboard="{StaticResource
QuickNDirtyAnimatedDots}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Width="15"
Height="15" Stroke="#FFF50606" Visibility="Collapsed">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF970404" Offset="0.809"/>
<GradientStop Color="#FFDE0707" Offset="0.568"/>
<GradientStop Color="#FFFDB4B4" Offset="0"/>
<GradientStop Color="#FFFF0808" Offset="0.436"/>
<GradientStop Color="#FF7A0303" Offset="0.988"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Width="15"
Height="15" Stroke="#FFF50606" Margin="5,0" Visibility="Collapsed">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF970404" Offset="0.809"/>
<GradientStop Color="#FFDE0707" Offset="0.568"/>
<GradientStop Color="#FFFDB4B4" Offset="0"/>
<GradientStop Color="#FFFF0808" Offset="0.436"/>
<GradientStop Color="#FF7A0303" Offset="0.988"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse2" HorizontalAlignment="Left" Width="15"
Height="15" Stroke="#FFF50606" Visibility="Collapsed">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF970404" Offset="0.809"/>
<GradientStop Color="#FFDE0707" Offset="0.568"/>
<GradientStop Color="#FFFDB4B4" Offset="0"/>
<GradientStop Color="#FFFF0808" Offset="0.436"/>
<GradientStop Color="#FF7A0303" Offset="0.988"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>