最近学习MVVM,至于什么是MVVM我也在这儿不多说了,一是关于它的解释解释网上非常多,二是我怕自己讲不清,误导自己没关系,误导别人就不好了。。

好了,废话结束,看是实战......

这个必应壁纸的demo非常简单,只有一个页面,上面有一个Image,一个TextBox和两个Button控件。

如下图所示

那么下面吧XAML代码贴上来

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding ImageSource}"></Image>
<TextBox Grid.Row="1" Text="{Binding Copyright}" IsReadOnly="True"></TextBox>
<Grid HorizontalAlignment="Stretch" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="上一张" Command="{Binding ButtonCommand}" CommandParameter="上一张" HorizontalAlignment="Center" Grid.Column="0"></Button>
<Button Content="下一张" Command="{Binding ButtonCommand}" CommandParameter="下一张" HorizontalAlignment="Center" Grid.Column="1"></Button>
</Grid>
</Grid>
</Grid>

在设计的时候,我是先设计的ViewModel,但是由于设计ViewModel的时候我已经知道必应壁纸的请求参数。

http://cn.bing.com/HPImageArchive.aspx?format=js&idx=idx=0&n=1

有三个查询参数

  format:这个应该是指定返回数据类型,默认设成js不变

  idx:如果你想获取昨天的壁纸,那么这个参数就是1,如果是获取前天的壁纸,那么这个就是2,经过我测试,他的取值范围是[-1,15],比较有意思的是,-1应该就是明天的壁纸吧,嘿嘿

  n:表示返回数据中包含几组图片信息,我设为1

由于我设置的返回格式是json,json的解析我就不贴了,放在demo中,咋们的重点也不是这个。

为了在下面的ViewModel中不出现混乱,我先给出Model的定义。

namespace 必应壁纸实战.Model
{
public class BingImageModel
{public string copyright { get; set; }//返回图片的copyright
public Uri uri { get; set; } //返回具体图片的uri
public int idx { get; set; } = ;
public int n { get; set; } = ;
}
}

ViewModel的设计是我结合了View中的需求设计的。

namespace 必应壁纸实战.ViewModle
{
public class BingImageViewModel: ViewModelBase
{
private string _copyright;
public string Copyright
{
get
{
return _copyright;
} set
{
_copyright = value;
OnPropertyChanged();
}
} private BitmapImage _imageSource;
public BitmapImage ImageSource
{
get
{
return _imageSource;
} set
{
_imageSource = value;
OnPropertyChanged();
}
} private int index;
public int Index
{
get
{
return index;
} set
{
if (value <= )
value = ;
index = value;
IndexChanged();
}
} public RelayCommand ButtonCommand { get; set; } public BingImageModel Model { get; set; } private void ButtonDown(object param)
{
string tag = param as string;
if (tag != null)
{
if (tag == "上一张")
{
Index++;
}
else
{
Index--;
}
}
} public BingImageViewModel()
{
Model = new BingImageModel(); ButtonCommand = new RelayCommand();
ButtonCommand.ExcuteParam = ButtonDown; Index = ;
Copyright = "";
} private async void IndexChanged()
{
Model = await HttpService.GetBingImageModel(Index);
if (Model != null)
{
ImageSource = await HttpService.GetBingImage(Model);
Copyright = Model.copyright;
}
}
}
}

ViewModel

我对ViewModel做一个简单说明

ImageSource和Image空间的Source属性绑定

Copyright和TextBox的Text属性绑定

ButtonCommand和两个Button的Command属性绑定,并且通过CommandParameter来区别执行的命令

Index对应请求参数idx,在它的值改变后执行IndexChanged来获取必应壁纸

ButtonDown方法对应ButtonCommand来实现对Index的修改,自增代表前一天,自减代表后一天

Model封装了获取壁纸的一些必要信息,结合Service中定义的HttpClinet的helper来实现具体的网络数据请求。

此外,作为WVVM的必备模式,ViewModel是继承自ViewModelBase的,用以实现绑定机制。

完成View,ViewModel,和Model后,一定不要忘记在View中对ViewModel的绑定,最简单就是类似于“this.DataContext=new ViewModel();”了。

到这儿就基本完成了,但感觉写的有些混乱,我把整个过程中的几个坑在这儿说说

1.就是关于WVVM,一直没有弄明白在ViewModel中写大量的代码究竟好不好,我还有待研究;

2.用Windows.Web.Http命名空间定义的HttpClient请求图片数据后,用如下方式实现对一个BitmapImage对象的设置

  

            BitmapImage bitMap = new BitmapImage(); ;
var response=await HttpClient.GetAsync(model.uri);
var buffer = await response.Content.ReadAsBufferAsync(); byte[] bytes = new byte[buffer.Length];
buffer.CopyTo(bytes); //CopyTo是一个定义在System.Runtime.InteropServices.WindowsRuntime;的对IBuffer的拓展方法,这个一定注意
using (MemoryStream memoryStream = new MemoryStream(bytes))
{
var randomstream = memoryStream.AsRandomAccessStream();
await bitMap.SetSourceAsync(randomstream);
}

好了,上demo代码,点击“我是代码”下载

[uwp]MVVM模式实战之必应壁纸查看器的更多相关文章

  1. angular 实战系列 之 mvvm模式

    什么是MVVM模式 mvvm模式是mvc模式的一种变体,其中第一个m表示model,可以认为是数据对象的抽象,v代表view,vm代表view model ,是对view中的数据抽象(注1).mvvm ...

  2. WPF实战案例-MVVM模式下在Xaml中弹出窗体

    相信很多学习和开发wpf项目的同学都了解过mvvm模式,同样,在mvvm模式下会有一个不可忽视的问题,就是怎么在xaml中弹出窗体,而不破坏MVVM本身的结构. 关于弹出窗体的方式还是很多的,本文先讲 ...

  3. mvc和mvvm模式

    一. Mvvm定义 MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型]mvvm模式的核心,它是连接 ...

  4. 使用Qt实现一个必应壁纸客户端

    概要 必应的每日壁纸很好看,但是看不到一周以前的壁纸图片,日前使用python开发了必应壁纸收集站,可惜这样的收集站只能在线浏览,我在想要是有一款软件能够下载每日必应壁纸,并应用到windows的桌面 ...

  5. MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  6. [转载]MVVM模式原理分析及实践

    没有找到很好的MVVM模式介绍文章,简单找了一篇,分享一下.MVVM实现了UI\UE设计师(Expression Blend 4设计界面)和软件工程师的合理分工,在SilverLight.WPF.Wi ...

  7. silverlighter下MVVM模式中利用Behavior和TargetedTriggerAction实现文本框的一些特效

    在silverlight一般开发模式中,给文本框添加一些事件是轻而易举的,然而MVVM开发模式中,想要给文本框添加一些事件并非那么容易,因为MVVM模式中,只有ICommand接口,而且也只有Butt ...

  8. win10 uwp MVVM 轻量框架

    如果在开发过程,遇到多个页面之间,需要传输信息,那么可能遇到设计的问题.如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法,那么请看本文.如果因为ViewModel代码越 ...

  9. MVVM模式用依赖注入的方式配置ViewModel并注册消息

    最初的想法 这次主要讨论下给View指定ViewModel的事情.一般来说给View指定ViewModel常用的方式有两种,一种是在View的后台代码中写DataContext = new ViewM ...

随机推荐

  1. django-引用静态文件

    1.需要配置settings # 静态文件目录 STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') 2.页面加载静态文件 {% load sta ...

  2. MPI 计时器函数 MPI_Wtime()

    ▶ 计时器函数 MPI_Wtime() 以及头文件 timer.h 中的宏函数 GET_TIME(),类似 time.h 中函数 clock() 的用法.注意 函数 clock() 记录的是CPU时间 ...

  3. spring data jpa、 hibernate、 jpa 三者之间的关系

    http://www.cnblogs.com/xiaoheike/p/5150553.html JPA规范与ORM框架之间的关系是怎样的呢? JPA规范本质上就是一种ORM规范,注意不是ORM框架-- ...

  4. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  5. 【316】python.requests 读取网页信息

    参考:Python:在网页中查找字符串的一般方法--in 参考:python怎么安装requests 参考:Requests 快速上手 操作步骤如下: 添加环境变量,将 python 所在文件夹添加至 ...

  6. 《集体智慧编程》第7章代码 Python3执行出错

    电子工业出版社,2015年第3版 P153,增加了buildtree函数后执行出错,报错为: ----------------------------------------------------- ...

  7. 【bzoj3437】小P的牧场

    3437: 小P的牧场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 947  Solved: 542[Submit][Status][Discuss ...

  8. 寻找hash值——把int array看成是一个整数

    QUESTION: Write a class DominoChecker that has a method called addBox(int[]) that takes a box of fiv ...

  9. golang之包和锁的机制

    互斥锁 同一时刻只有一个携程在操作 package main import ( "fmt" "math/rand" "sync" " ...

  10. Pwdump v7.1

    提取windows系统密码  和 hash值