wpf中datagrid显示绑定的数据时加载的动画效果

1.创建动画加载用户空间

wpf页面代码

<UserControl x:Class="ManualMeterCheck.LoadingControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ManualMeterCheck"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" IsVisibleChanged="HandleVisibleChanged">
    <UserControl.Background>
        <SolidColorBrush Color="WhiteSmoke" Opacity="0.2"  />
    </UserControl.Background>
    <UserControl.Resources>
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
        <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->
    </UserControl.Resources>
    <Viewbox Width="100" Height="100"  
            HorizontalAlignment="Center"  
            VerticalAlignment="Center">
        <Grid x:Name="LayoutRoot"   
                Background="Transparent"  
                ToolTip="Please wait...."  
                HorizontalAlignment="Center"  
                VerticalAlignment="Center">
            <TextBlock Text="Loading..."  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />
            <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="{StaticResource CirclesColor}" Opacity="1.0"/>
                <Ellipse x:Name="C1" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
                <Ellipse x:Name="C2" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
                <Ellipse x:Name="C3" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
                <Ellipse x:Name="C4" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
                <Ellipse x:Name="C5" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
                <Ellipse x:Name="C6" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
                <Ellipse x:Name="C7" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
                <Ellipse x:Name="C8" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
                <Canvas.RenderTransform>
                    <RotateTransform x:Name="SpinnerRotate"  
                         Angle="0" />
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>
    </Viewbox>
</UserControl>

后端代码

public partial class LoadingControl : UserControl
    {
        private readonly DispatcherTimer animationTimer;
        public LoadingControl()
        {
            InitializeComponent();
            animationTimer = new DispatcherTimer(
                DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);
        }
        private void Start()
        {
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        private void Stop()
        {
            animationTimer.Stop();
            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();
        }
    }

2.调用控件

在grid中增加代码如下：

<local:LoadingControl x:Name="_loading"  Visibility="Collapsed"/>

后端代码：

private void btn_query_Click(object sender, RoutedEventArgs e)
 {
        //创建线程显示动画
            var thread = new Thread(new ThreadStart(LongRunningOperation));
            thread.Start();
            //datagrid数据绑定
        //......
        //创建线程关闭动画
            var thread1 = new Thread(new ThreadStart(LongRunningOperationEnd));
            thread1.Start();
}

private void LongRunningOperation()
        {
            this.Dispatcher.BeginInvoke(DispatcherPriority.Normal,
                (ThreadStart)delegate ()
                {
                    // 在这里执行你的操作
                    this._loading.Visibility = Visibility.Visible;
                }
            );
            
        }

private void LongRunningOperationEnd()
        {
            this.Dispatcher.BeginInvoke(DispatcherPriority.Background,
                (ThreadStart)delegate ()
                {
                    int row = dg_checkdataReport.Items.IndexOf(dg_checkdataReport.CurrentItem);
                    int col = dg_checkdataReport.Columns.IndexOf(dg_checkdataReport.CurrentColumn);
                    for(int i=0;i<10;i++)
                    {
                        if(dg_checkdataReport.Items.Count>0)
                        {
                            Thread.Sleep(200);
                            var cell1 = GetCell(dg_checkdataReport, 0, 0);
                            if (cell1 != null)
                            {
                                this._loading.Visibility = Visibility.Collapsed;
                                break;
                            }
                        }
                        
                    }
                    this._loading.Visibility = Visibility.Collapsed; 
                }
            );
        }