第六部分：使用用户控件实现主从表场景 (2)

创建StoryDetailsView 用户控件

我们开始在Visual Studio中的DiggSample项目上右击，选择“添加新项”，这会调出一个新项的对话框，我们将选择UserControl模板，将我们要建的新控件命名为“StoryDetailsView”：

这会往我们的DiggSample项目中添加一个以此为名的新UserControl：

使用用户控件建造一个基本模式对话框

我们将使用我们的StoryDetailsView控件有效地显示一个包含故事细节的对话框。当我们的故事细节用户控件显示时，我们将要它出现在网页的其他内容的上方，确保终端用户在关闭细节视图之前无法操作页面上的其他东西。

有几种不同的方式我们可以实现这个模式对话框似的行为。对这个特定的场景，我们将先从打开StoryDetailsView.xaml用户控件着手，往其中加入如下XAML内容：

上面第一个控件<Rectangle>是配置成Stretch以占据屏幕上剩下的空间，它的背景填充颜色是有点透明的灰色（因为它的Opactity 是 .765，你还可以看到一点它后面的东西 ）。第二个控件<Border>然后将重叠在这个Rectangle控件之上，在屏幕上占据一个固定的宽度。它具有一个蓝色的背景色，内含一个Close（关闭）按钮。

在显示时，我们的StoryDetailsView用户控件目前将显示象下面这样的UI：

我们可以在该用户控件的后台代码文件中实现“CloseBtn_Click”事件处理方法，在按下按钮时，关闭按钮的事件处理函数将把用户控件的Visibility属性设成为“Collapsed”，这会导致它从屏幕上消失，用户将返回到下面的内容：