您的位置：首页 > 编程技术 > csharp  >  关于WPF异步MVVM等待窗体的介绍

关于WPF异步MVVM等待窗体的介绍

 更新时间：2020年6月25日 11:42  点击：1936

需求描述
•在ViewModel中处理Model中的数据需要一定时间的等待
•ViewModel或Model在获取数据或访问同步服务时有一定延迟需要等待
•ViewModel操作View加载数据需要一段时间
解决办法
•显示一个等待UI，当数据处理完毕或服务接口返回后等待UI消失
转动齿轮控件
•参考开源实现SprocketControl ：http://wpfspark.codeplex.com/
等待控件

复制代码 代码如下:

<Grid>
     <local:SprocketControl Grid.Row="0"
                            Grid.Column="0"
                            Width="100"
                            Height="100"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Background="Transparent"
                            Interval="60"
                            IsIndeterminate="True"
                            StartAngle="-90"
                            TickColor="{DynamicResource MaskForegroundColor}"
                            TickCount="16"
                            TickWidth="5" />
   </Grid>

等待效果

定义MVVM中的ViewModel的状态

复制代码 代码如下:

/// <summary>
  /// 在MVVM模式中ViewModel的状态
  /// </summary>
  [Flags]
  public enum ViewModelStatus
  {
    /// <summary>
    /// ViewModel无状态
    /// </summary>
    None = 0x0,
    /// <summary>
    /// ViewModel正在初始化
    /// </summary>
    Initializing = 0x1,
    /// <summary>
    /// ViewModel初始化完毕
    /// </summary>
    Initialized = 0x2,
    /// <summary>
    /// ViewModel正在加载
    /// </summary>
    Loading = 0x4,
    /// <summary>
    /// ViewModel加载完毕
    /// </summary>
    Loaded = 0x8,
    /// <summary>
    /// ViewModel正在保存
    /// </summary>
    Saving = 0x16,
    /// <summary>
    /// ViewModel保存完毕
    /// </summary>
    Saved = 0x32
  }

ViewModel状态转变为控件状态
复制代码 代码如下:

public class StatusToAnimationVisibilityConverter : IValueConverter
   {
     #region IValueConverter Members

     public object Convert(
       object value, Type targetType, object parameter, CultureInfo culture)
     {
       try
       {
         string status = value.ToString();

         switch (status)
         {
           case "Initializing":
           case "Loading":
           case "Saving":
             return Visibility.Visible;
           case "Loaded":
           case "Saved":
           default:
             return Visibility.Collapsed;
         }
       }
       catch (Exception)
       {
         return Visibility.Collapsed;
       }
     }

     public object ConvertBack(
       object value, Type targetType, object parameter, CultureInfo culture)
     {
       return DependencyProperty.UnsetValue;
     }

     #endregion
   }

使UserControl支持异步显示
复制代码 代码如下:

<coverters:StatusToAnimationVisibilityConverter x:Key="StatusToAnimationVisibilityConverter" />

   <Style x:Key="AsyncWorkUserControlStyle" TargetType="{x:Type UserControl}">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type UserControl}">
           <Grid>
             <ContentPresenter Panel.ZIndex="0" />
             <Grid x:Name="animationGrid"
                   Width="Auto"
                   Height="Auto"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
                   Panel.ZIndex="2000"
                   Visibility="{Binding Path=Status,
                                Converter={StaticResource StatusToAnimationVisibilityConverter}}">
               <Grid Width="Auto"
                     Height="Auto"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Panel.ZIndex="0"
                     Background="{DynamicResource MaskGridBackgroundBrush}"
                     Opacity="0.2" />
               <ctrl:WaitingControl x:Name="animation" Panel.ZIndex="1" />
             </Grid>
           </Grid>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>

应用Style至UserControl
复制代码 代码如下:

<UserControl x:Class="DeviceConfiguration.Views.CameraManagementView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              d:DesignHeight="318"
              d:DesignWidth="632"
              Style="{DynamicResource AsyncWorkUserControlStyle}"
              mc:Ignorable="d">
 </UserControl>

定义基础ViewModel
复制代码 代码如下:

/// <summary>
   /// 响应式的ViewModel模型
   /// </summary>
   public abstract class ViewModelResponsive : ViewModelBase, IViewModelResponsive
   {
     #region Fields

     private ViewModelStatus _status = ViewModelStatus.None;

     #endregion

     #region ViewModel Status

     /// <summary>
     /// 刷新UI数据
     /// </summary>
     public virtual void Refresh()
     {

     }

     /// <summary>
     /// ViewModel状态
     /// </summary>
     public ViewModelStatus Status
     {
       get
       {
         return _status;
       }
       protected set
       {
         if (_status != value)
         {
           _status = value;
           RaisePropertyChanged(@"Status");
         }
       }
     }

     #endregion
   }

ViewModel应用
复制代码 代码如下:

public class CameraManagementViewModel : ViewModelResponsive
   {
     protected override void BindCommands()
     {
       RefreshCommand = new RelayCommand(() =>
       {
         Refresh();
       });
     }

     public override void Refresh()
     {
       base.Refresh();

       Status = ViewModelStatus.Initializing;
       CameraCollection.Clear();
       Model.GetCameras(GetCamerasCallback);
     }

     private void GetCamerasCallback(object sender, AsyncWorkerCallbackEventArgs<IList<Camera>> args)
     {
       CameraCollection.Clear();
       Status = ViewModelStatus.Loaded;

       if (result)
       {
         foreach (var item in (args.Data as IList<Camera>))
         {
           CameraCollection.Add(item);
         }
       }
     }
   }

[!--infotagslink--]

相关文章

  • c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)

    这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)，帮助大家更好的理解和学习使用c#，感兴趣的朋友可以了解下...2021-03-03

  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25

  • WPF仿三星手机充电界面实现代码

    这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • C# WPF 通过委托实现多窗口间的传值的方法

    这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • C#中WPF使用多线程调用窗体组件的方法

    这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • WPF TextBox实现按字节长度限制输入功能

    这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • WPF InkCanvas绘制矩形和椭圆

    这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

    这篇文章主要介绍了web面试中常问问题，MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-09-24

  • WPF基础教程之形状画刷与变换详解

    这篇文章主要给大家介绍了关于WPF基础教程之形状画刷与变换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • WPF如何自定义TabControl控件样式示例详解

    这篇文章主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25

  • 浅谈JavaScript前端开发的MVC结构与MVVM结构

    以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构...2016-06-12

  • 解析WPF实现音频文件循环顺序播放的解决方法

    本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍，需要的朋友参考下...2021-09-22

  • WPF水珠效果按钮组的实现教程

    下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22

  • WPF实现转圈进度条效果

    这篇文章主要为大家详细介绍了WPF实现转圈进度条效果，如何设计自定义的绕圈进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22

  • 在Winform和WPF中注册全局快捷键实现思路及代码

    如果注册快捷键，RegisterHotKey中的fsModifiers参数为0，即None选项，一些安全软件会警报，可能因为这样就可以全局监听键盘而造成安全问题,感兴趣的你可以参考下本文...2020-06-25

  • WPF中自定义GridLengthAnimation

    这篇文章主要为大家详细介绍了WPF中自定义GridLengthAnimation的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22

  • WPF/Silverlight实现图片局部放大的方法分析

    这篇文章主要介绍了WPF/Silverlight实现图片局部放大的方法,结合实例形式分析了WPF/Silverlight针对图片属性操作相关实现技巧,需要的朋友可以参考下...2020-06-25

  • WPF MVVM制作发送短信小按钮

    这篇文章主要为大家详细介绍了WPF MVVM发送短信小按钮的制作方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • WPF中窗体最大化问题的解决方法

    这篇文章主要给大家介绍了关于WPF中窗体最大化问题的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用wpf具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • C# WPF 父控件通过使用可视化树找到子控件的示例代码

    这篇文章主要介绍了C# WPF 父控件通过使用可视化树找到子控件的示例代码,需要的朋友可以参考下...2020-06-25