让背景图动起来－win8学习笔记1

创建一个空白工程，制作一个天气的动态背景图：）

 

1. 用下面的代码进行替换mainpage.xaml中的page根节点下的所有内容

<Page.Resources>
    <Storyboard x:Name="CloudAnimation">
        <DoubleAnimationUsingKeyFrames AutoReverse="True"
                                       RepeatBehavior="Forever"
                                       Storyboard.TargetName="image"
                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:3:0.9" Value="-2440" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>
<Grid >

    <Grid x:Name="grid" Width="Auto" >
        <Image x:Name="image"
                   Margin="0,0,-2426,0"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
                   RenderTransformOrigin="0.5,0.5"
                   Grid.Row="1"
                   Source="Assets/cloud_bg_1.jpg"
                   Stretch="UniformToFill">

            <Image.RenderTransform>
                <CompositeTransform />
            </Image.RenderTransform>
        </Image>
    </Grid>
</Grid>

在mainpage.xaml.cs文件中加入MainPage_Loaded事件，启动xaml文件中的CloudAnimationd动画效果

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    this.CloudAnimation.Begin();
}