转自: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