windows phone开发学习--加载时的旋转动画

在进行windows phone开发时，有时候我们使用的是ProgressBar来表示程序正在进行载入操作，但其实也可以通过设计一个旋转的图片（类似于360杀毒软件）来表示正在进行加载。就像下面这样：



下面说说实现过程：

第一步：添加一个旋转png图片到工程中去


   


第二步：在MainPage,xaml中添加下面的动画效果

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="SpinningAnimation">
<DoubleAnimation AutoReverse="False"
Duration="0:0:3"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="SpinningRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>

第三步：把下面代码加入到MainPage.xaml中：
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
<Image
Margin="10,10"
Height="50"
Width="50"
Source="/Spinner.png"
Stretch="Uniform">
<Image.RenderTransform>
<RotateTransform x:Name="SpinningRotateTransform"
CenterX="25"
CenterY="25" />
</Image.RenderTransform>
</Image>
</StackPanel>

第四步：添加两个按钮来开始结束动画
<Button Content="Start Animation" Click="btnStart_Click"/>
<Button Content="Stop Animation" Click="btnStop_Click"/>

private void btnStart_Click(object sender, RoutedEventArgs e)
{
this.SpinningAnimation.Begin();
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
this.SpinningAnimation.Stop();
}

第五步：如果运行后看不到效果，一般情况下是旋转图片的颜色和页面的背景色一致，改变颜色以后就能看到了，这里可以使用一个不透明性的Mask，添加下面代码：
<Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">
<Ellipse.OpacityMask>
<ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>
</Ellipse.OpacityMask>
<Ellipse.RenderTransform>
<RotateTransform x:Name="SpinningRotateTransform"
CenterX="25"
CenterY="25" />
</Ellipse.RenderTransform>
</Ellipse>

最终全部代码如下：
MainPage.xaml:

<phone:PhoneApplicationPage
x:Class="SpinningProgressBar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="SpinningAnimation">
<DoubleAnimation AutoReverse="False"
Duration="0:0:3"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="SpinningRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<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 x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
<Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">
<Ellipse.OpacityMask>
<ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>
</Ellipse.OpacityMask>
<Ellipse.RenderTransform>
<RotateTransform x:Name="SpinningRotateTransform"
CenterX="25"
CenterY="25" />
</Ellipse.RenderTransform>
</Ellipse>

<Button Content="Start Animation" Click="btnStart_Click"/>
<Button Content="Stop Animation" Click="btnStop_Click"/>
</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using SpinningProgressBar.Resources;

namespace SpinningProgressBar
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}

private void btnStart_Click(object sender, RoutedEventArgs e) { this.SpinningAnimation.Begin(); } private void btnStop_Click(object sender, RoutedEventArgs e) { this.SpinningAnimation.Stop(); }
}
}

源代码可以在这里下载：http://www.windowsphonegeek.com/upload/articles/SpinningAnimation.zip