Written by Pham Nguyen

Amination Sample in Silverlight–Windows Phone

I.Introduction

-Animation luôn góp phần làm cho ứng dụng trở nên thú vị và thu hút người dùng, trong bài này mình xin chia sẻ cách tạo một Aimation đơn giản trong Silverlight – Windows Phone .

II.Creating Project And Coding

-Tạo Windows Phone Application Project

image

– Tiếp theo chúng ta dùng một Rectangle và chèn hình vào đó, sau đó dùng Storyboard để tạo hiệu ứng động cho Rectangle này xoay tròng 360 độ, như đoạn code sau :

   1: <phone:PhoneApplicationPage 

   2:     x:Class="AinationSample.MainPage"

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

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

   5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

   6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

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

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

   9:     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

  10:     FontFamily="{StaticResource PhoneFontFamilyNormal}"

  11:     FontSize="{StaticResource PhoneFontSizeNormal}"

  12:     Foreground="{StaticResource PhoneForegroundBrush}"

  13:     SupportedOrientations="Portrait" Orientation="Portrait"

  14:     shell:SystemTray.IsVisible="True">

  15:  

  16:     <!--LayoutRoot is the root grid where all page content is placed-->

  17:     <Grid x:Name="LayoutRoot" Background="Transparent">

  18:         <Grid.RowDefinitions>

  19:             <RowDefinition Height="Auto"/>

  20:             <RowDefinition Height="*"/>

  21:         </Grid.RowDefinitions>

  22:  

  23:         <!--TitlePanel contains the name of the application and page title-->

  24:         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

  25:             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

  26:             <TextBlock x:Name="PageTitle" Text="Animation" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

  27:         </StackPanel>

  28:  

  29:         <!--ContentPanel - place additional content here-->

  30:         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

  31:             <Grid.Resources>

  32:                 <Storyboard x:Name="mySb">

  33:                     <DoubleAnimation 

  34:                         Storyboard.TargetName="mytf"

  35:                         Storyboard.TargetProperty="Angle"

  36:                         From="0" To="360"

  37:                         Duration="0:0:1"

  38:                         RepeatBehavior="Forever"/>

  39:                 </Storyboard>

  40:             </Grid.Resources>

  41:             <Rectangle Width="300" Height="300">

  42:                 <Rectangle.Fill>

  43:                     <ImageBrush ImageSource="/AinationSample;component/BanhXe.jpg"></ImageBrush>

  44:                 </Rectangle.Fill>

  45:                 <Rectangle.RenderTransform>

  46:                     <RotateTransform x:Name="mytf" Angle="50" CenterX="150" CenterY="150" />

  47:                 </Rectangle.RenderTransform>

  48:             </Rectangle>

  49:         </Grid>

  50:     </Grid>

  51:  

  52:     <!--Sample code showing usage of ApplicationBar-->

  53:     <!--<phone:PhoneApplicationPage.ApplicationBar>

  54:         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

  55:             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>

  56:             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>

  57:             <shell:ApplicationBar.MenuItems>

  58:                 <shell:ApplicationBarMenuItem Text="MenuItem 1"/>

  59:                 <shell:ApplicationBarMenuItem Text="MenuItem 2"/>

  60:             </shell:ApplicationBar.MenuItems>

  61:         </shell:ApplicationBar>

  62:     </phone:PhoneApplicationPage.ApplicationBar>-->

  63:  

  64: </phone:PhoneApplicationPage>

và đửng quên vào Mainpage.xaml.cs thêm vào dòng code :

Khởi động Storyboard

mySb.Begin();

Bây giờ chúng ta có thể Run ứng dụng để xem kết quả:

image

image

/*Life run on code*/

One thought on “Amination Sample in Silverlight–Windows Phone”

Leave a reply to Thuan Cancel reply