Silverlight实例可切换视图的DataTemplate

客户的需求是这样的：要求用Silverlight写一个留言板，打开界面后，可以看到一个留言列表，每条留言只显示标题、发言人和发言时间。每条留言有一个切换按钮，可以显示和隐藏留言的详细信息。
实现这个功能很简单。用一个ListBox加上一个DataTemplate就搞定了。这里着重提示一句：DataTemplate就是“数据的外衣”，只有理解了DataTemplate才能明白WPF的精髓——数据驱动UI，也才能可能准确地使用MVVM模式。

下面让我们看代码，页面的设计很简单——Title和ListBox。Load按钮用来加载模拟数据。模拟数据的类型是自定义类Message。

点击展开示例代码

自定义Message类：

public class Message  
    {  
        public string Title { get; set; }  
        public string OpenedBy { get; set; }  
        public string OpenTime { get; set; }  
        public string Content { get; set; }  
    }

 

运行起来是这样：

让我们看看Load按钮的Click事件处理器：

点击展开示例代码

这是添加好DataTemplate后的XAML代码：

点击展开示例代码

点击Load，这回看到的界面就对了！

然后尝试点击每个Switch按钮——视图能够切换：

这一点是怎么做到的呢？
原来，秘密是在DataTemplate里Switch按钮的处理函数中：

点击展开示例代码

 

只是Silverlight为了“减肥”，把很多VisualTreeHelper的功能都给砍了，这样我们就只能手动地去找到需要显示/隐藏的UI元素了。

你可能会问：那么多记录，每条上都有一个Switch按钮，是不是需要写一个循环，把它们的Click事件与Button_Click函数关联起来呀？

答案是：No！当你把一列数据赋值给ListBox.ItemsSource时，ListBox会按照自己的ItemTemplate（即我们设计的DataTemplate）逐个处理自己的Item。

到此，功能就已经实现了。如果觉得UI不是很漂亮，那就交给我们的designer，他们会给整个程序穿上漂亮的外衣。

下面的图是进行美化后的结果，请大家欣赏！