使用用户控件实现主/从场景

理解用户控件

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中使用绑定的“拉”值，我们不需要编写任何额外代码。