Banner in Windows Store App

Introduction

Today we will discuss animated banners in Metro Style Applications. To create animation in an application we will use a Double Animation control. There are two ways to apply animation; the first one we can do from a code behind file and the second one directly from design XAML page. Here we will use second one, animation through design page coding in XAML.

In this article we will make animations on TextBlock content. There are two animations on TextBlock Text that will be shown in this article; Color animation on text and text rotation animation. In text color animation the color of text will be changed automatically and the second in rotation animation text will be rotated 360 degrees from a fixed origin.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

Open Visual Studio 2011
File -> New -> Project
Choose Template -> Visual C# ->Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the BlankPage.xaml and BlankPage.xaml.cs files.

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page

x:Class="Application3.BlankPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Application3"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="TB"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontFamily="Cambria" FontSize="30"
Text="Mind Cracker Network Solution "/></TextBlock>

<TextBlock.Triggers>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB4"

Margin="75,120,161,0" FontSize="36" FontWeight="Bold" VerticalAlignment="Top"

Height="100" Text="C# Corner- A complete solution for .Net technolgy"
TextWrapping="Wrap" TextAlignment="Center">

<TextBlock.Foreground>

</TextBlock.Foreground>

<TextBlock.Triggers>

<ColorAnimation

Storyboard.TargetName="SB"

Storyboard.TargetProperty="Color"

From="Pink" To="SteelBlue" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB5"

Margin="300,300,183,41"

FontSize="30" FontWeight="Bold" Foreground="Green" VerticalAlignment="Center" Height="60">
<TextBlock.RenderTransform>

</TextBlock.RenderTransform><TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="MyRT"

Storyboard.TargetProperty="(RotateTransform.Angle)"

From="0.0" To="360" Duration="0:0:10"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontSize="48" Text="Breaking News"/></TextBlock>

</Grid>

</Page>

Code 4 : After running this code the output looks like this: