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

原文:【全面解禁!真正的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绑定。

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

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