AddThis Social Bookmark Button

Listen Print Discuss

What Are Web Parts?
Pages: 1, 2, 3, 4

Catalogs

One of the coolest features of Web Parts is that you can allow your users to pick and choose which controls they would like on their page, and where they'd like to put them. To see this at work, open Default.asxp in Source mode and find a Web Part Zone with no controls in it. Delete the Web Part Zone from the column and drag in a Catalog Zone. Switch to Design view and click on your new Catalog Zone and then click the smart tag to set the format to Professional.



Drag a Declarative Catalog Part into the Catalog Zone and click on its smart tag and choose Edit Templates. Next, drag a Calendar control into the Web Parts Template and use its smart tag to format it, and drag a File Upload control into the template. Then use the Declarative Catalog control's smart tag to stop editing the template. Notice that your two controls are marked "untitled." Switch to Source view, find the Calendar, and add the clever title "Calendar" as shown in this snippet:

  <ZoneTemplate>
    <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
      <WebPartsTemplate>
        <asp:Calendar> Title= "Calendar" ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"

Add a title to the File Upload control as well. Your Catalog Zone control should look more or less like Figure 8.

Figure 8
Figure 8. Catalog Zone -- two controls

Return to source code. Examine the Catalog Zone carefully and you'll see that there is a Zone Template element, within which is a Declarative Catalog Part, within which is a WebPartsTemplate, which in turn holds both the Calendar and the File Upload controls. Find the closing tag for the Declarative Catalog Part, and in between that closing tag and the tag that closes the Zone Template, drag a Page Catalog Part control. This latter control will list the Web Parts on the page and will allow the user to reopen Web Parts that were closed (amazingly, there is no other way for the user to do so!).

Run the application and choose Catalog from the Display Mode drop down. The Catalog Zone has an upper part and a lower part. The upper part tells you that the Declarative Catalog has two items and the Page Catalog has zero items. The lower portion displays the Declarative Catalog. Add a Calendar control to Web Part Zone 2 by checking Add A Calendar as shown in Figure 9.

Figure 9
Figure 9. Add a Catalog Part

When you click Add, the calendar appears in Web Part Zone 2 as the user hoped.

Showing Closed Controls

Click on Browse mode. You should have three controls showing (Today's News, Favorite Books, and Calendar). Click on the menus on each in turn: close Today's News and Favorite Books, and minimize the Calendar. While the menu on Calendar lets you restore it, Today's News and Favorite Books are gone!

To restore them, switch to Catalog mode and notice that the Page Catalog link now shows that there are two controls available. Click the link and select each control in turn and restore it (you can add it to whichever zone you'd like). Switch back to browse mode and the missing controls are back <whew!>.

Jesse Liberty is a senior program manager for Microsoft Silverlight where he is responsible for the creation of tutorials, videos and other content to facilitate the learning and use of Silverlight. Jesse is well known in the industry in part because of his many bestselling books, including O'Reilly Media's Programming .NET 3.5, Programming C# 3.0, Learning ASP.NET with AJAX and the soon to be published Programming Silverlight.

Return to the Windows DevCenter.