WPF实现等待界面效果

前言

在使用一些应用的时候会发现等待界面做的用户体验很好，所以打算使用wpf实现一篇。

点击链接加入群聊

效果图预览

1. 第一步需要一张无缝背景图片（图片地址）。

2. 准备飞机图片。  

3. XAML代码。

    
   <Window.Resources>
           <ImageBrush x:Key="freeMachineImageBrush" ImageSource="/Images/飞机132x48.png"/>
       </Window.Resources>
   
   <Canvas Name="myCanvas" Focusable="True">
           <Rectangle Name="background" Height="400" Width="1262"/>
           <Rectangle Name="background2" Height="400" Width="1262" Canvas.Left="1262" />
           <Rectangle  Fill="{StaticResource freeMachineImageBrush}" 
                      Height="48" Width="128" Canvas.Left="336"/>
       </Canvas>
   

    

4. 后台代码。

   //创建定时器
   DispatcherTimer timer = new DispatcherTimer();
   //定义图像画刷
   ImageBrush backgroundBrush = new ImageBrush();
   
   //构造
   
   timer.Tick += Engine;
   timer.Interval = TimeSpan.FromMilliseconds(20);
   backgroundBrush.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/timg.jpg"));
   background.Fill = backgroundBrush;
   background2.Fill = backgroundBrush;
   Start();
   
   
   private void Engine(object sender, EventArgs e)
     {
         var backgroundLeft = Canvas.GetLeft(background) - 3;
         var background2Left = Canvas.GetLeft(background2) - 3;
               
         Canvas.SetLeft(background, backgroundLeft);
         Canvas.SetLeft(background2, background2Left);
         if (backgroundLeft <= -1262)
          {
             timer.Stop();
             Start();
          }
   
     }
    private void Start()
     {
       Canvas.SetLeft(background, 0); 
       Canvas.SetLeft(background2, 1262); 
       timer.Start();
     }