Silverlight入门教程(六): 使用用户控制器Implement Master/Detail Scenarios

This is part six of eight tutorials that walk through how to build a simple Digg client application using the Beta1 release of Silverlight 2.  These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight.  Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content. 

<Download Code> Click here to download a completed version of this Digg client sample. </Download Code>

Understanding User Controls

A fundamental design goal of Silverlight and WPF is to enable developers to be able to easily encapsulate UI functionality into re-usable controls.  Developers can implement new custom controls by deriving a class from one of the existing Control classes (either a Control base class or from a control like TextBox, Button, etc).  Alternatively they can create re-usable User Controls - which make it easy to use a XAML markup file to compose a control's UI, and which are easy to implement.

For our Digg application, we want to implement a master/details scenario where the application allows an end-user to search on a topic, populate a list of stories related to that topic, and then enable them to select a story to bring up details about it.  For example, selecting the below story in the list:

would bring up this detailed view about the story:

We are going to implement this details view by building a "StoryDetailsView" UserControl that we'll display when a story is selected from our ListBox.

Creating a StoryDetailsView User Control

We'll start by right-clicking on our DiggSample project node in Visual Studio and by selecting "Add New Item".  This will bring up a new item dialog.  We'll select the UserControl item template and name the new control we want to build "StoryDetailsView":

This will add a new UserControl with this name to our DiggSample project:

Building a Basic Modal Dialog Using a User Control

We are going to use our StoryDetailsView control to effectively display a dialog containing story details.  When our story details user control displays we are going to want to have it appear on top of the other content on the page, and ensure that an end-user can't do other things with the page until they close the details view.

There are a couple of different ways we could implement this modal dialog-like behavior.  For this particular scenario we are going to start by opening up the StoryDetailsView.xaml user control and adding the below XAML content to it:

The first <Rectangle> control above is configured to stretch to take up all of the available space on the screen.  Its background fill color is a somewhat transparent gray (because its Opactity is .765 you can see a little of what is behind it).  The second <Border> control will then be layered on top of this Rectangle control, and take up a fixed width on the screen.  It has a blue background color, and contains a Close button.

When visible, our StoryDetailsView user control will currently display a UI like below: