【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮

  博客更新较慢,先向各位读者说声抱歉。这一节讲解的依然是开发中经常遇到的一种需求,在DataGrid行末添加按钮。请看下图。

      

  上图中"功能"这一列里显示的并不是数据,而是一个TextButton。当点击它时,对应的进行删除操作。这里为了大家看的明显果,我在点击按钮后,弹出当前选中行的"Name"属性。当然你也可以对行内数据进行增删改查等各种操作。除此之外,他还可以充分适应分辨率及IE大小。

    

  上图中,当IE缩小到一定程度后,DataGrid会自动产生水平滚动条,只要向右边拖,就可以看到我们的删除按钮。看起来本来就应该是这样不是么?但实际的情况中,我见过的一些项目的做法往往都是错误的,他们不能自适应IE大小,当IE宽度缩短时,删除按钮就消失了。错误的效果,如下图所示.

      

  上图中是错误的做法,当IE窗口缩小后,即使滚动条拖到最右边,依然看不到删除按钮。并且,删除这一列不能显示列名。

  这次的课程可能稍微复杂,涉及到后台代码,及一些MVVM的手法。但请相信我,熟练掌握后,实现这样的DataGrid,3分钟足够了。好了,不废话了,请大家打开Blend,一起跟我做。首先新建一个项目,拖拽一个DataGrid到你的LayoutRoot中。然后新建一个示例数据源,如下图所示:(关于如何新建示例数据源,请参考: 第六章 认识ListBox

    

  

  上图中我们的示例数据源只有两个属性,number型的Age和String型的Name。接下来,请直接拖拽Collection节点到DataGrid上。如果你操作完全正确,会得到下图中的效果。

    

  

  接下来,在Object an TimeLine面板中,展开DataGrid节点,可以看到两个DataGridTextColumn,如果你把Name拖到Age上面,DataGrid的列就是按"Name"->"Age"的顺序显示。

    

    

  你还可以通过修改它们的Header属性,将英文"Age","Name"变成"年龄","姓名",

    

  接下来,请点击属性面板左侧的 按钮,切换到代码和设计视图。

    

  随后你可以看到DataGrid的代码是这样的.

    

  接下来需要手写一段代码。

    

<sdk:DataGridTemplateColumn Header="功能"/>

  

  将这段代码写在两个DataGridTextColumn后面。

      

  

  然后,先不要急着运行程序,此时运行会提示一个错误,"DataGridTemplateColumn必须指定一个Template"。所以,我们还需要为它定义一个模板。

  在Object and Timeline面板中,右击我们新建的列,在弹出菜单中选择Edit Column Templates->Edit CellTemplate->Create Empty

    

  在弹出面板中为模板取一个名字,然后点击OK按钮会进入模板编辑视图,如下图所示。

    

  接下来,只需要在这个Grid中添加一个按钮即可,在Demo中我使用的是TextButton。(关于TextButton的做法,请参考: 第三章 从最常用ButtonStyle开始 - TextButton),然后结束编辑,退出模板编辑视图。我们可以看到一个TextButton已经被正确的植入DataGrid。

    

  

  看起来很不错不是么?不过现在这个删除按钮还不能响应任何事件,接下来来我们需要一些真正的Coding工作。使用MVVM的手法彻底分离UI和Code,并调用按钮的点击事件,弹出当前选中行的信息。

  首先请在Project菜单中右击解决方案节点,在弹出菜单中选择Edit in Visual Studio。下面的coding工作会在VS2010中进行。讲到这里有人可能会问,“Blend不是也可以写代码么?为什么还要打开VS?” 这里我多说一嘴,Blend在设计方面的能力是毋庸置疑的,但coding还是要用VS,相信我不要用Blend写任何C#或VB编码,Blend弱智且低能的语法提示会恶心死你。

    

  

  在VS中,新建一个Class,名为MyCommand。

    

  MyCommand中的代码如下,大家可以直接拷贝。

public class MyCommand
{
public ICommand ShowInfoCommand
{
get;
private set;
}


public MyCommand()
{
this.ShowInfoCommand = new ActionCommand(this.ShowInfo);
}

private void ShowInfo(object selectedItem)
{
Expression.Blend.SampleData.SampleDataSource.Item item
= selectedItem as Expression.Blend.SampleData.SampleDataSource.Item;
MessageBox.Show(item.Name.ToString());
}
}

  如果你在为ActionCommand添加引用的时候,提示找不到这个类型。请引用后再试。接下来,F6编译一下工程,编译通过后用Vs打开我们刚才编辑的Xaml,在UserControl标签中输入下面代码。(注意此处的Lession7是我自己项目的命名空间名,此处你需要将它替换为你自己的项目命名空间名。)

  

xmlns:local="clr-namespace:Lession7"。

  

  接着在UserControl.Resources标签中输入下面代码。

<local:MyCommand x:Key="MyCommand" d:IsDataSource="false"/>

  输入后的效果如下图所示。

    

  然后再VS中按Ctrl+F,弹出搜索菜单,搜索关键字“删除”。注意,搜索范围是CurrentDocument,而不是整个解决方案。然后你可以定位到刚才我们在DataGrid中添加的哪个删除按钮。

    

  把下面代码添加到“删除”按钮中。

Command="{Binding ShowInfoCommand, Mode=OneWay,
  Source={StaticResource MyCommand}}" CommandParameter="{Binding Mode=OneWay}"

  添加后的效果如下图所示

    

  点击F5运行程序,恭喜各位,大功告成!

    

  背后的故事:

   本章中涉及的知识较多,如果你是一个美工或者设计人员。可能会感觉只是照着做出来了,但很多原理都不懂。下面我简单对一些关键点做讲解。

  在MyCommand类中,我们定义了一个名为ShowInfoCommand。因为他是一个“指令”,所以我们可以将它与任何控件的点击事件进行捆绑。本章中就将它捆绑到了“删除”按钮上。在ShowInfo(object selectedItem)方法中,我们通过强制转换selectedItem,得到了当前选中行的内容。本例中因为使用的示例数据源,所以用的是Expression.Blend.SampleData.SampleDataSource.Item类型。在实际项目中,你需要将它换位DataGrid数据源的实际类型。

  如何将MyCommand与Xaml中的Button绑定?

  第一步在Xaml中定义关于MyCommand的引用。代码是:xmlns:local="clr-namespace:Lession7"  ,注意"Lession7"是项目命名空间名。

  第二步在UserControl.Resource标签中声明一个xaml可以引用的对象。代码是<local:MyCommand x:Key="MyCommand" d:IsDataSource="false"/>

  “d:IsDataSource="false"“标识我们声明的不是一个数据源。这个信息主要是给Blend用的,不是必须的。

  第三步就是在“删除”按钮中写的那段代码了,将Button的Command属性与我们声明的MyCommadn绑定。

  项目源码下载地址https://files.cnblogs.com/kaodigua/Lession7.rar

  博客我会坚持写,只是更新时间不一定。有空了我一定会连续更新。希望大家一直支持我。如果你喜欢我的文章,请点一下文章右下角的“推荐”,谢谢。

posted on 2011-03-01 22:05  烤地瓜  阅读(8561)  评论(20编辑  收藏  举报

我要啦免费统计