In this tutorial, I’m going to show you how to make your UI
look more realistic by doing some animation to your controls like text block,
buttons and other kind of controls. In this tutorial, I’m not dig deeply into
animation part because it is a vast topic. Anyone who have interested and want
to learn more, he will refer to MSDN link given below.
There are three type of animation
- Color Animation
- Point Animation
- Double Animation
I'm going to focus on color animation. We can animate text
block foreground property on button click event handler. One can do this from
xaml as well as programmatically on run time. I will discuss both these methods.
Create Empty Project:
Go to visual studio 2012 and create a blank window store project
and name it AnimateUI.
First Method
Change the MainPage.xaml code as shown below.
<Page
x:Class="StoryBoradAnimation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StoryBoradAnimation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Name="myStoryboard">
<ColorAnimation
Storyboard.TargetName="nameText" From="Red" To="Green" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="nameText"
HorizontalAlignment="Left" Margin="523,171,0,0" TextWrapping="Wrap" Text="Hello World" VerticalAlignment="Top" Height="43" Width="226" FontSize="30" Foreground="Red"/>
<Button Content="Start"
HorizontalAlignment="Left" Height="43" Margin="830,140,0,0" VerticalAlignment="Top" Width="140" Click="StartButton_Click"/>
<Button Content="Stop
" HorizontalAlignment="Left" Height="41" Margin="830,214,0,0" VerticalAlignment="Top" Width="140" Click="StopButton_Click"/>
</Grid>
</Page>
Write following code on button click event handler.
private void StartButton_Click(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
You will see that as button click event file, foreground
color of text block changes from red to green.
If you want repeat behavior of animation means it
contiously animate then add RepeatBehaviour property as shown.
<Storyboard x:Name="myStoryboard"
RepeatBehavior="Forever">
Now when you click start button again, you will see that
text block animating continually.
To stop animation do this in stop button click event.
private void StopButton_Click(object sender, RoutedEventArgs e)
{
myStoryboard.Stop();
}
Second Method
In above, we will create storyboard through our xaml file and now
I will show how to achieve same behvious programatically on run time. See given
below code.
private void StartButton_Click(object sender, RoutedEventArgs e)
{
Storyboard borad = new Storyboard();
borad.RepeatBehavior = RepeatBehavior.Forever;
ColorAnimation animation = new ColorAnimation();
animation.From = Colors.Red;
animation.To = Colors.Green;
Storyboard.SetTarget(animation, nameText);
Storyboard.SetTargetProperty(animation, "(TextBlock.Foreground).(SolidColorBrush.Color)");
borad.Children.Add(animation);
borad.Begin();
}
This is it. Hope you will find this tutorial helpful in
your daily life project. Note this is only a small portion of animation. For
further information related to animation, use MSDN link that I have provided.
