Part 6 of the Silverlight Tutorial: Use user controls to implement Master/Slave tables

This is the sixth part of the eight series of tutorials. This series demonstrates how to use beta1 of Silverlight 2 to build a simple Digg client application. These tutorials are intended to read in order and help explain some of the core programming concepts of Silverlight.

Understanding User Controls

A fundamental design goal of Silverlight and WPF is to allow developers to easily encapsulate UI functions into reusable controls. Developers can inherit from an existing control class (or control base class or a control like textbox or button) to implement new custom controls. Alternatively, they can create reusable user controls. This facilitates the use of a XAML Identity file to form the UI of a control and is easy to implement.

For our Digg application, we want to implement a master-slave table scenario where the application allows end users to search for a topic and fill in a list of stories related to the topic, then they can select a story to call up details. For example, select the following story from the list:

The detailed view of this story will be called up:

We will construct a storydetailsview user control to implement this detailed view. This view will be displayed when a story is selected from ListBox.

Create a storydetailsview User Control

Right-click the diggsample project in Visual Studio and select "Add new project". This will bring up a new project dialog box. We will select the usercontrol template, name the new control we want to create as "storydetailsview ":

This will add a new usercontrol in this name to our diggsample project:

Create a basic mode dialog box using user controls

We will use our storydetailsview control to effectively display a dialog box containing story details. When our story details user control is displayed, we will show it above other content on the webpage to ensure that end users cannot operate on other things on the page before closing the Detail View.

There are several different ways to implement this mode dialog box-like behavior. For this specific scenario, we will first start by opening the storydetailsview. XAML user control and add the following XAML content to it:

The first control <rectangle> above is configured as stretch to occupy the remaining space on the screen. Its background fill color is a bit transparent gray (because its opactity is. 765, you can also see something behind it ). The second control <Border> overlaps the rectangle control and occupies a fixed width on the screen. It has a blue background color and contains a close button.

At the time of display, our storydetailsview user control will currently display a UI like the following:

We can go to the background of the User ControlCodeThe file implements the "closebtn_click" event processing method. When you press the button, the event processing function that closes the button sets the visibility attribute of the user control to "Collapsed ", this will cause it to disappear from the screen and the user will return the following content:

 

Display our storydetailsview Control

A simple way to make our storydetailsview user control appear on the screen is to add it to the page. at the bottom of the XAML file, set its default visibility attribute to collapsed (which means it is invisible during application loading ):

Then, we can process the selectionchanged event of The ListBox control in the back-end code class of page. XAML:

When you select a specific story in the list, you can use the selectionchanged event of ListBox to set the visibility attribute of the showdetailsview user control to "visibility ":

This will cause the dialog box of our mode user control to appear. When the user clicks its "close (close)" button, it will disappear and the user can select another story at will, repeat this process.

Pass story data to our storydetailsview User Control

In the end, we want our storydetailsview user control to display detailed information related to the story selected by end users in the story ListBox.

In the selectionchanged event processing function of our ListBox (in the background code class of our page ), we can use the selecteditem attribute of ListBox to obtain the digstory data object corresponding to the row of entries in the selected ListBox.

One way we can use to pass this digstory object into our storydetailsview user control is that before the user control is displayed, set the datacontext attribute on the user control to the selected Diggory story object:

Then we write code in our user control and use datacontext to display the result, or we can use a data binding expression to bind its value.

For example, we can update the XAML of storydetailsview as follows and use a data binding expression to display the title of the selected story:

Now, when a user clicks a story in the list:

The ListBox event processing function processes the selection, sets the datacontext of the user control to the selected Diggory object, and displays the user control:

Note how the title of Diggory appears in the user control due to the data binding expression we added above.

Complete the layout of our User Controls

The example above demonstrates the basic knowledge of how to compile a simple master-slave table dialog box workflow. We can add more controls to the user control and bind the expression to the data to display the storydetailsview:

You can update the <Border> Control of storydetailsview to display the following content:

Then, no code changes are required. Because we use data binding to obtain values from datacontext, we do not need to write any additional code.

Next step

So far, we have implemented all the core functions and interactive workflow of our Digg application.

The last step is to further refine the UI of the application. In particular, we want to add more nice-looking and custom appearances to the ListBox and button buttons.

To do this, let's go to the next Tutorial: using a control template to customize the control's view.

[Original address] Silverlight tutorial Part 6: using user controls to implement master/detail scenarios
[Original article] Friday, February 22,200 AM