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

需求描述
•在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);
         }
       }
     }
   }

(0)

相关推荐

  • WPF实现渐变淡入淡出的登陆窗口效果

    本文实例讲述了WPF实现渐变淡入淡出的登陆窗口效果的方法.分享给大家供大家参考.具体实现方法如下: 1.实现原理 ① 利用UIElement.OpacityMask属性,用于改变对象区域的不透明度的画笔.可以使元素的特定区域透明或部分透明,从而实现比较新颖的效果. ② OpacityMask属性接受任何画刷,可利用LinearGradientBrush线性渐变画刷,通过对渐变画刷中各颜色点加以动画处理即可. 2.渐变淡入实现 渐变淡入效果,可通过事件触发器触发Loaded事件实现,所以可以仅用前

  • 关于.NET/C#/WCF/WPF 打造IP网络智能视频监控系统的介绍

    OptimalVision网络视频监控系统 OptimalVision(OV)网络视频监控系统(Video Surveillance System),是一套基于.NET.C#.WCF.WPF等技术构建的IP网络视频监控系统.设计与实现该系统的初衷是希望在家用电脑中部署该系统,连接本地或局域网设备,通过浏览器或手机客户端浏览宝宝实时视频,也就是俗称的"宝宝在线"或"家庭看护". 但由于业余时间总是有限,完成系统中的服务.配置.采集.传输和桌面GUI部分后,继续完成后续

  • WPF制作一个简单的倒计时器实例附源码

    实例一: 早上起来后闲的无事,于是想到前些日子学院的某个老师让大家给他找个什么倒计时的小软件,当时大家忙于复习所以也懒得搭理这件事,囧~.既然早上没事干,何不写个玩玩~既然要写,就用以前没怎么捣鼓过的WPF写一个吧,也算是一次学习WPF的初探吧(感觉自己很落后了)! 在Vs2008和Vs2010之间徘徊了许久之后,最终还是选择了Vs2008做开发IDE.在Vs2008中建了个WPF工程后,浏览了下默认生成的工程文件结构,一个App.xaml(当然还有App.xaml.cs)和一个Windows1

  • 在WinForm和WPF中使用GMap.Net地图插件简单教程

    如何在WinForm中使用GMap.Net 项目主页:https://greatmaps.codeplex.com/ 下载GMap.Net,我下载的版本:greatmaps_81b71bf30091,编译三个核心项目: GMap.Net.Core:核心DLL GMap.Net.WindowsForms:WinForm中使用的DLL GMap.NET.WindowsPresentation:WPF中使用的DLL 在WinForm项目中使用GMap: 1.新建一个Visual C# 的Windows

  • wpf将表中数据显示到datagrid示例

    a.在.xaml文件中拖入一个datagrid,然后添加列名,使用Binding="{Binding 数据库中的列名称}",如下:  复制代码 代码如下: <DataGrid AutoGenerateColumns="False" Height="438"HorizontalAlignment="Left" Margin="23,278,0,0" Name="dataGrid1" 

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

    快捷键辅助类 复制代码 代码如下: class HotKey { /// <summary> /// 如果函数执行成功,返回值不为0. /// 如果函数执行失败,返回值为0.要得到扩展错误信息,调用GetLastError..NET方法:Marshal.GetLastWin32Error() /// </summary> /// <param name="hWnd">要定义热键的窗口的句柄</param> /// <param na

  • WPF字体或内容模糊的解决方法

    本文会给大家介绍尝试过的一些方法,大家可以一起看看. 1.用WPF4.0中的新字体渲染方法,没有改善 <Setter Property="TextOptions.TextFormattingMode" Value="Display" /> <Setter Property="TextOptions.TextRenderingMode" Value="ClearType" /> 2.给控件加上SnapsT

  • 仿vs实现WPF好看的进度条

    为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了ModernUI(开源的),地址:https://github.com/firstfloorsoftware/mui. 后来,做了尝试写了个Demo,效果不错.另外,专门录制了tif文件,方便大家看到效果.废话不多说,先展示效果: 一.效果展示 A.VS2012安装界面图: B.个人尝试Demo效果图: 二

  • WPF的数据绑定详细介绍

    一.WPF数据绑定的概要 数据绑定:是应用程序 UI 与业务逻辑之间建立连接的过程. 如果绑定正确设置并且数据提供正确通知,则当数据的值发生更改时,绑定到数据的视觉元素会自动反映更改. 数据绑定可能还意味着如果视觉元素中数据的外部表现形式发生更改,则基础数据可以自动更新以反映更改. 例如:如果用户编辑 TextBox 元素中的值,则基础数据值会自动更新以反映该更改. 1. 数据绑定涉及到两个方面: 一个是绑定源,一个是绑定目标.绑定源即控件绑定所使用的源数据,绑定目标即数据显示的控件. 2. 对

  • WPF绑定实例详解

    本文详细讲述了WPF绑定的用法,分享给大家供大家参考.具体用法分析如下: 1.WPF绑定使用的源属性必须是依赖项属性,这是因为依赖项属性具有内置的更改通知支持,元素绑定表达式使用了Xaml扩展标记,WPF绑定一个控件是使用Binding.ElementName,绑定非控件对象时使用Source,RelativeSource,DataContext属性(WPF特有,而非XAML),只能绑定对象的共有字段. 下边是部分Binding 属性名,完整列表参考 :http://msdn.microsoft

随机推荐