Silverlight实例秀——可切换视图的DataTemplate(做网站必备技术)

简介:
小序:
敏捷开发也是要有个度的。搞敏捷,最起码的限度是程序员要对手里使用的工具比较精通。
相信大家都见过这个场景:
问:“你在做什么?”
程序员:“我在敏捷开发。”
问:“这样设计不对吧……”
程序员:“没事儿,我可以重构!”
拜托,手里使用的工具都不了解,程序中到处都是诡异的方法……怎么重构?天生就是一恐龙,再怎么重构也变不成人呀!这时候,唯一能做的就是——重写。
 
正文:
 
今天的例子就是一个由错误程序重写而来的结果。至于那个错误程序,下周我将另写一文《WPF的典型误用》。
客户的需求是这样的:要求用Silverlight写一个留言板,打开界面后,可以看到一个留言列表,每条留言只显示标题、发言人和发言时间。每条留言有一个切换按钮,可以显示和隐藏留言的详细信息。
 
实现这个功能很简单。用一个ListBox加上一个DataTemplate就搞定了。 这里着重提示一句:DataTemplate就是“数据的外衣”,只有理解了DataTemplate才能明白WPF的精髓——数据驱动UI,也才能可能准确地使用MVVM模式。
 
下面让我们看代码。
 
页面的设计很简单——Title和ListBox。Load按钮用来加载模拟数据。模拟数据的类型是自定义类Message。
  1. <UserControl x:Class="SilverlightApplicationBBS.Page"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     Width="600" Height="366">
  5.     <StackPanel x:Name="LayoutRoot" Background="LightBlue">
  6.         <!--Title-->
  7.         <StackPanel Orientation="Horizontal">
  8.             <TextBlock Text="Silverlight Mini BBS" FontSize="24" Margin="5" VerticalAlignment="Bottom"/>
  9.             <TextBlock Text="Powered by: 水之真谛" Width="200"  VerticalAlignment="Bottom" Margin="10"/>
  10.             <Button Content="Load"  Height="23" Width="75" VerticalAlignment="Bottom" Margin="10" Click="LoadButton_Click" />
  11.         </StackPanel>
  12.         <!--Content-->
  13.         <ListBox x:Name="listBox" Margin="10" Height="300" />
  14.     </StackPanel>
  15. </UserControl>
自定义Message类:
  1.     public class Message
  2.     {
  3.         public string Title { getset; }
  4.         public string OpenedBy { getset; }
  5.         public string OpenTime { getset; }
  6.         public string Content { getset; }
  7.     }
运行起来是这样:
 
 
 
让我们看看Load按钮的Click事件处理器:
 
  1.         private void LoadButton_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             // 造些假数据。项目中数据来自数据库
  4.             List<Message> msgList = new List<Message>();
  5.             for (int i = 0; i < 30; i++)
  6.             {
  7.                 Message msg = new Message()
  8.                 {
  9.                     Title = "Message Title " + i.ToString(),
  10.                     OpenedBy = (i % 2 == 0) ? "Tom" : "Tim",
  11.                     OpenTime = DateTime.Now.ToShortDateString(),
  12.                     Content = (i % 2 == 0) ? "水之真谛" : @"http://blog.csdn.net/FantasiaX"
  13.                 };
  14.                 msgList.Add(msg);
  15.             }
  16.             this.listBox.ItemsSource = msgList;
  17.         }
点击Load后,效果是这样的:
 
 
咦?怎么显示的是数据类型呢?
是啊!你不给数据穿好“衣服”,人家怎么知道如何show给你呢?
让我们给Message数据穿上一身合适的衣服!也就是给ListBox配上合适的ItemTemplate。注意: ListBox的Item是Message,而不是ListBoxItem控件。当你把一列Message设置为ListBox的ItemsSource时,ListBox会自动为每个Message生成一个容器(ListBoxItem)——WPF中所有ItemsControl都有自己对应的Item容器,比如ListView的Item容器是ListViewItem。特别提醒一点:一个好的数据驱动UI的程序,你完全用不着显式地为ItemsControl添加Item容器,如果你发现有这样的代码,那八成是没理解“数据驱动UI”,或者说又拿WPF当WinForm使了
 
这是添加好DataTemplate后的XAML代码:
  1. <UserControl x:Class="SilverlightApplicationBBS.Page"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     Width="600" Height="366">
  5.     <UserControl.Resources>
  6.         <!--DataTemplate-->
  7.         <DataTemplate x:Key="messageTemplate">
  8.             <StackPanel>
  9.                 <StackPanel Orientation="Horizontal" Height="23">
  10.                     <TextBlock Text="Title:" Width="40" VerticalAlignment="Center" />
  11.                     <TextBox Text="{Binding Path=Title}" Width="180"/>
  12.                     <TextBlock Text="By:" Width="30" VerticalAlignment="Center" />
  13.                     <TextBox Text="{Binding Path=OpenedBy}" Width="80"/>
  14.                     <TextBlock Text="At:" Width="30" VerticalAlignment="Center" />
  15.                     <TextBox Text="{Binding Path=OpenTime}" Width="80"/>
  16.                     <Button Content="Switch" Width="75" Margin="20, 0,0 0" Click="Button_Click"/>
  17.                 </StackPanel>
  18.                 <StackPanel x:Name="detailPanel" Orientation="Horizontal" Height="60" Visibility="Collapsed">
  19.                     <TextBox Margin="40,5,10,5" Text="{Binding Path=Content}" Width="400"/>
  20.                 </StackPanel>
  21.             </StackPanel>
  22.         </DataTemplate>
  23.     </UserControl.Resources>
  24.     <StackPanel x:Name="LayoutRoot" Background="LightBlue">
  25.         <!--Title-->
  26.         <StackPanel Orientation="Horizontal">
  27.             <TextBlock Text="Silverlight Mini BBS" FontSize="24" Margin="5" VerticalAlignment="Bottom"/>
  28.             <TextBlock Text="Powered by: 水之真谛" Width="200"  VerticalAlignment="Bottom" Margin="10"/>
  29.             <Button Content="Load"  Height="23" Width="75" VerticalAlignment="Bottom" Margin="10" Click="LoadButton_Click" />
  30.         </StackPanel>
  31.         <!--Content-->
  32.         <ListBox x:Name="listBox" Margin="10" Height="300" ItemTemplate="{StaticResource messageTemplate}"/>
  33.     </StackPanel>
  34. </UserControl>
点击Load,这回看到的界面就对了!
 
 
然后尝试点击每个Switch按钮——视图能够切换:
 
 
这一点是怎么做到的呢?
原来,秘密是在DataTemplate里Switch按钮的处理函数中:
 
  1.         // 切换视图
  2.         private void Button_Click(object sender, RoutedEventArgs e)
  3.         {
  4.             // Silverlight里的VisualTreeHelper功能受限,所以只能这样做。WPF里的就方便多了。
  5.             Button b = sender as Button;
  6.             StackPanel p = VisualTreeHelper.GetParent(b) as StackPanel;
  7.             p = VisualTreeHelper.GetParent(p) as StackPanel;
  8.             p = p.FindName("detailPanel"as StackPanel;
  9.             if (p.Visibility == Visibility.Collapsed)
  10.             {
  11.                 p.Visibility = Visibility.Visible;
  12.             }
  13.             else
  14.             {
  15.                 p.Visibility = Visibility.Collapsed;
  16.             }
  17.         }
只是Silverlight为了“减肥”,把很多VisualTreeHelper的功能都给砍了,这样我们就只能手动地去找到需要显示/隐藏的UI元素了。
 
你可能会问:那么多记录,每条上都有一个Switch按钮,是不是需要写一个循环,把它们的Click事件与Button_Click函数关联起来呀?
答案是:No!当你把一列数据赋值给ListBox.ItemsSource时,ListBox会按照自己的ItemTemplate(即我们设计的DataTemplate)逐个处理自己的Item。
 
到此,功能就已经实现了。如果觉得UI不是很漂亮,那就交给我们的designer,他们会给整个程序穿上漂亮的外衣。
下面的图是我请 团队主力设计师之一Owen进行美化后的结果,请大家欣赏!
 




本文转自 水之真谛 51CTO博客,原文链接:http://blog.51cto.com/liutiemeng/121346,如需转载请自行联系原作者
目录
相关文章
|
C# Windows
2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
79 0
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
332 0
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
本文介绍了在C# WPF应用程序中引入外部iconfont图标时可能遇到的显示问题及其解决方法:1) 检查资源路径和引入格式是否正确,确保字体文件引用格式为“#xxxx”,并正确指向字体文件位置;2) 确保图标资源被包含在程序集中,通过设置字体文件的生成操作为Resource(资源)来实现。
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
|
3月前
|
设计模式 开发框架 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(6) -- 窗口控件脏数据状态IsDirty的跟踪处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(6) -- 窗口控件脏数据状态IsDirty的跟踪处理
|
Web App开发 前端开发 JavaScript
SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析试读版
SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析试读版
|
数据可视化
使用 SAP UI5 3D Viewer 控件显示 3D 模型效果试读版
使用 SAP UI5 3D Viewer 控件显示 3D 模型效果试读版
|
Web App开发 前端开发 JavaScript
SAP UI5 图片显示控件 Avatar 的使用方式介绍试读版
SAP UI5 图片显示控件 Avatar 的使用方式介绍试读版
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1241 0
|
C#
WPF 自定义模板 Button闪亮效果
原文:WPF 自定义模板 Button闪亮效果 Button的选中Effect,我们看下下面的效果:   让我们再放大一点: 怎么设置上面样式呢?直接设置Button的Effect,有点问题,因为Effect不是四周环绕的。
592 0