代码改变世界

定义加载动画

2012-04-09 10:05  Franz  阅读(251)  评论(0)  编辑  收藏  举报

mvvm中进行页面加载时为了为了不让页面看上去什么内容也没有要给个动画提示当前正在加载，当加载完毕后在将动画层隐藏。

代码部分如下（可以放到kaxmal中运行看效果）：

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.RenderTransform> 
        <ScaleTransform x:Name="SpinnerScale" ScaleX="0.5" ScaleY="0.5" /> 
    </Grid.RenderTransform> 
    <Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120"> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" 
            Stretch="Fill" Fill="#E6000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" 
            Stretch="Fill" Fill="#CD000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" 
            Stretch="Fill" Fill="#B3000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" 
            Stretch="Fill" Fill="#9A000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" 
            Stretch="Fill" Fill="#80000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" 
            Stretch="Fill" Fill="#67000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" 
            Stretch="Fill" Fill="#4D000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" 
            Stretch="Fill" Fill="#34000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" 
            Stretch="Fill" Fill="#1A000000"/> 
        <Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" 
            Stretch="Fill" Fill="#FF000000"/> 
        <Canvas.RenderTransform> 
            <RotateTransform x:Name="SpinnerRotate" Angle="0" /> 
        </Canvas.RenderTransform> 
        <Canvas.Triggers> 
            <EventTrigger RoutedEvent="ContentControl.Loaded"> 
                <BeginStoryboard> 
                    <Storyboard> 
                        <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 
                                 Storyboard.TargetProperty="(RotateTransform.Angle)" 
                                 From="0" To="360" Duration="0:0:01" 
                                 RepeatBehavior="Forever" /> 
                    </Storyboard> 
                </BeginStoryboard> 
            </EventTrigger> 
        </Canvas.Triggers> 
    </Canvas> 
</Grid>