WPF:加载动画一例

1.最终效果
加载效果图
2.实现代码
 1 <Window x:Class="WPFTest.Window1"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     Title="Window1" Height="200" Width="300">
 5     <StackPanel>
 6     
 7             <Border CornerRadius="4" Background="#595959" Width="90" Height="40" BorderBrush="#595959" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="True" Margin="50">
 8                 <Grid>
 9                     <Grid.ColumnDefinitions>
10                         <ColumnDefinition Width="40"/>
11                         <ColumnDefinition Width="*"/>
12                     </Grid.ColumnDefinitions>
13                     <Grid Grid.Column="0" Width="30" Height="30"> 
14                         <Ellipse Width="28" Height="28" Fill="#595959"  Stroke="#666666" StrokeThickness="4" VerticalAlignment="Center" />
15                         <Ellipse Width="28" Height="28" Fill="#595959"  Stroke="#2cb6e7" StrokeThickness="4" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" >
16                             <Ellipse.Clip>
17                                 <RectangleGeometry Rect="0, 0, 12, 12"/>
18                             </Ellipse.Clip>
19                             <Ellipse.RenderTransform>
20                                 <RotateTransform x:Name="loading" Angle="0"/>
21                             </Ellipse.RenderTransform>
22                         <Ellipse.Triggers>
23                             <EventTrigger RoutedEvent="Ellipse.Loaded">
24                                 <BeginStoryboard HandoffBehavior="Compose">
25                                     <Storyboard>
26                                         <DoubleAnimation Storyboard.TargetName="loading" Storyboard.TargetProperty="Angle" By="108000" Duration="0:5:0" />
27                                     </Storyboard>
28                                 </BeginStoryboard>
29                             </EventTrigger>
30                         </Ellipse.Triggers>
31                     </Ellipse>
32                 </Grid>
33                     <TextBlock Grid.Column="1" Text="加载中" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" />
34                 </Grid>
35             </Border> 
36     </StackPanel>
37 </Window>
XAML代码
posted on 2013-08-28 11:20 南来北往阅读(274) 评论(0) 编辑收藏举报