理解用户控件
Silverlight和WPF的基本设计目标是开发人员能够轻松地对封装成可重用的UI功能的控制。开发人员可以执行源于现有的控制类(无论是控制新的基类或自定义控件这样的文本框,按钮,控制等)。另外,他们可以创建可重用的用户控件-它可以很容易地使用XAML标记文件组成一个控件的用户界面,并且很容易实现。
对于我们的Digg应用,我们希望实现主/从场景,即应用程序允许最终用户对某个主题搜索,填充了该主题相关的新闻列表,然后让他们选择了一个故事,弹出跟主题相关的明细。例如,选择下面的列表中的故事:
会带出的这项有关的故事的详细内容:
我们将执行这一细节鉴于建立“StoryDetailsView”UserControl的,我们会显示一个故事时,是从我们的ListBox中选择的。
创建StoryDetailsView用户控件
首先在我们的DiggSample节中点鼠标右键,单击,并选择“添加新项”。这将带来一个新项目对话框。我们将选择UserControl的项目模板和命名新的控件,我们要建立“StoryDetailsView”:
这将增加一个新的UserContro到我们DiggSample项目中:
建设基本模式对话框使用用户控件
我们将使用我们的StoryDetailsView控制,有效地显示一个对话框,包含故事细节。当我们的故事细节用户控件显示,我们想让它出现在页面上的其他内容的顶部,并确保最终用户不能做其他事情的网页,直到他们关闭详细信息视图。
有许多不同的方法,我们可以实现这个模式对话框等行为的情侣。对于这个特定的场景中,我们将开始通过开放StoryDetailsView.xaml用户控制和下面的XAML内容给它补充说:
第一<Rectangle>控制上述配置为延伸到占用屏幕上的所有可用空间。它的背景填充颜色是有点透明的灰色(因为它的Opactity是0.765你可以看到它的背后是什么) 。第二<Border>控制便会分层就这一矩形控制的顶部,并在屏幕上一个固定的宽度。它有一个蓝色的背景颜色,并包含一个关闭按钮。
当看到,我们的StoryDetailsView用户控件将当前显示象下面这样一个用户界面:
我们可以实现“CloseBtn_Click在代码”事件处理方法隐藏文件的用户控件。当按下时,关闭按钮的事件处理程序将设置UserControl的能见度“坍塌” -这将导致它从屏幕上消失并返回用户在它下面的内容:
显示我们的StoryDetailsView控制
一个简单的方法使我们的StoryDetailsView用户控件在屏幕显示的是索性将它添加到我们的Page.xaml文件的底部,并设置其默认能见度坍塌(这意味着它是不可见的应用程序时,第一次加载) :
然后,我们可以处理从我们的ListBox内Page.xaml的亨博斯隐藏类代码管理“的SelectionChanged”事件:
当用户选择列表中的一个特别的故事,我们可以用ListBox的SelectionChanged事件处理程序来为我们的ShowDetailsView用户控制可见性属性设置为“可见”:
这将导致我们的模式用户控制对话框显示。当用户点击了“关闭”按钮,它就会消失,用户可自由选择另一个故事,重复这个过程。
数据传递的故事对我们的StoryDetailsView用户控制
最终,我们希望我们的StoryDetailsView UserControl的显示有关的最终用户从ListBox中选定的故事,故事的详细资料。
在我们的ListBox的“的SelectionChanged”事件处理程序(这是我们内页的代码隐藏类),我们可以访问数据对象的DiggStory对应到选定的列表框行通过访问列表框的“的SelectedItem”属性。
一种方法,我们可以使用通过这项DiggStory反对我们StoryDetailsView UserControl的将是简单地设置“DataContext的”在用户控件属性选定DiggStory数据之前,用户控制对象立即可见:
然后我们可以写在我们的UserControl的代码程序上使用的DataContext来显示结果。或者,另外,我们可以使用暴力的价值观绑定表达式绑定。
例如,我们可以更新我们的StoryDetailsView XAML来显示所选择的故事标题使用诸如数据绑定表达式如下:
现在,当用户点击列表中的一个故事:
我们的ListBox的事件处理程序将处理的选择,集UserControl的DataContext的所选DiggStory对象,然后让用户控件的可见:
注意如何DiggStory现在看来,我们的标题添加到它的,因为用户控件绑定表达式。
整理我们的用户控件布局
我们的示例演示了如何上面我们可以一起简单的基本功/细节对话框中的工作流程。完成,我们可以增加更多的控制和数据绑定表达式用户控制StoryDetailsView显示。
我们可以更新StoryDetailsView用户控件看起来像上述通过更新其<Border>控制有以下内部内容:
这以后没有代码被改变。因为我们从DataContext中使用绑定的“拉”值,我们不需要编写任何额外代码。