WPF 加載動畫

效果如圖:

關鍵代碼

實現動畫

<Grid x:Name="LayoutRoot" Background="Transparent"
        ToolTip="Searching...."
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
    <Canvas RenderTransformOrigin="0.5,0.5"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" Width="120"
            Height="120" Loaded="HandleLoaded"
            Unloaded="HandleUnloaded"  >
        <Ellipse x:Name="C0" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="1.0"/>
        <Ellipse x:Name="C1" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.9"/>
        <Ellipse x:Name="C2" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.8"/>
        <Ellipse x:Name="C3" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.7"/>
        <Ellipse x:Name="C4" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.6"/>
        <Ellipse x:Name="C5" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.5"/>
        <Ellipse x:Name="C6" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.4"/>
        <Ellipse x:Name="C7" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.3"/>
        <Ellipse x:Name="C8" Width="20" Height="20"
                    Canvas.Left="0"
                    Canvas.Top="0" Stretch="Fill"
                    Fill="#bbc3de" Opacity="0.2"/>
        <Canvas.RenderTransform>
            <RotateTransform x:Name="SpinnerRotate"
                    Angle="0" />
        </Canvas.RenderTransform>
    </Canvas>
</Grid>

#region Data
private readonly DispatcherTimer animationTimer;
#endregion
public LoadingMark()
{
    InitializeComponent();
    animationTimer = new DispatcherTimer(
        DispatcherPriority.ContextIdle, Dispatcher);
    animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 75);
    Start();
}

#region Private Methods
private void Start()
{
    Mouse.OverrideCursor = Cursors.Wait;
    animationTimer.Tick += HandleAnimationTick;
    animationTimer.Start();
}

private void Stop()
{
    animationTimer.Stop();
    Mouse.OverrideCursor = Cursors.Arrow;
    animationTimer.Tick -= HandleAnimationTick;
}

private void HandleAnimationTick(object sender, EventArgs e)
{
    SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
}

private void HandleLoaded(object sender, RoutedEventArgs e)
{
    const double offset = Math.PI;
    const double step = Math.PI * 2 / 10.0;

    SetPosition(C0, offset, 0.0, step);
    SetPosition(C1, offset, 1.0, step);
    SetPosition(C2, offset, 2.0, step);
    SetPosition(C3, offset, 3.0, step);
    SetPosition(C4, offset, 4.0, step);
    SetPosition(C5, offset, 5.0, step);
    SetPosition(C6, offset, 6.0, step);
    SetPosition(C7, offset, 7.0, step);
    SetPosition(C8, offset, 8.0, step);
}

private void SetPosition(Ellipse ellipse, double offset,
    double posOffSet, double step)
{
    ellipse.SetValue(Canvas.LeftProperty, 50.0
        + Math.Sin(offset + posOffSet * step) * 50.0);

    ellipse.SetValue(Canvas.TopProperty, 50
        + Math.Cos(offset + posOffSet * step) * 50.0);
}

private void HandleUnloaded(object sender, RoutedEventArgs e)
{
    Stop();
}

private void HandleVisibleChanged(object sender,
    DependencyPropertyChangedEventArgs e)
{
    bool isVisible = (bool)e.NewValue;

    if (isVisible)
        Start();
    else
        Stop();
}
#endregion

實現遮擋效果

使用Border撐滿容器，設置背景為灰色，並設置透明度
綁定Visibility

<Border Visibility="{Binding Path=Loading}"
    HorizontalAlignment="Stretch" Background="Gray" Opacity="0.3" IsEnabled="False"
    VerticalAlignment="Stretch">
    <local:LoadingMark Width="200" Height="200"/>
</Border>

示例代碼

LoadingMarks

參考資料

How to add a loading animation and finished check mark to a bound observable collection in MVVM?
Better WPF Circular Progress Bar