In this step you'll create a Silverlight application in Microsoft Expression Blend using PropertyGrid for Silverlight. When you add a C1PropertyGrid control to your application, you'll have a complete, functional standard Properties window-like interface that users can use to browse and edit properties and/or methods on any .NET object.

To set up your project and add a C1PropertyGrid control to your application, complete the following steps:

1. In Expression Blend, select File | New Project.
2. In the New Project dialog box, select the Silverlight project type in the left pane and in the right-pane select Silverlight Application + Website. Enter a Name and Location for your project, select a Language in the drop-down box, and click OK. A new application will be created and should open with the MainPage.xaml file displayed in Design view.
3. Navigate to the Projects window and right-click the References folder in the project files list. In the context menu choose Add Reference, locate and select the C1.Silverlight.dll and C1.Silverlight.Extended.dll assemblies, and click Open. The dialog box will close and the references will be added to your project.
4. In the Toolbox click on the Assets button (the double chevron icon) to open the Assets dialog box.
5. In the Asset Library dialog box, choose the Controls item in the left pane, and then click on the C1PropertyGrid icon in the right pane. The C1PropertyGrid icon will appear in the Toolbox under the Assets button.
6. Click once on the design area of the UserControl to select it. Unlike in Visual Studio, in Blend you can add Silverlight controls directly to the design surface as in the next steps.
7. Double-click the StackPanel button in the Toolbox to add it to the page. If the StackPanel button is not visible, you may need to click once on the Grid panels button and select StackPanel.
8. In the Properties window, set the following properties for the StackPanel:
   • Set Height and Width properties to "Auto".
   • Set the Orientation property to Horizontal.
   • Set HorizontalAlignment and VerticalAlignment to Center to center controls in the panel.
9. With the StackPanel still selected in the Objects and Timeline pane, double-click on the standard Button control in the Toolbox to add it to the panel. You'll set properties on this control using the C1PropertyGrid control.
10. Select the Button control and in the Properties window set its Name property to "button1", its Width to 75, and its Height to 290.
11. Select the StackPanel in the Objects and Timeline pane and then double-click the C1PropertyGrid icon in the Toolbox to add the control to the panel.
12. Click once on the C1PropertyGrid control in the Objects and Timeline pane, navigate to the Properties window and set the following properties:
    • Set Name to "c1propertygrid1" to give the control a name so it is accessible in code.
    • Set Width to "250" and Height to "290".
    • Set HorizontalAlignment and VerticalAlignment to Center to center the control in the panel.

    The XAML will appear similar to the following:

    XAML	Copy Code
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Button Width="75" Height="290" Content="Button"/> <c1:C1PropertyGrid Height="250" Width="290" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel>

     

You've successfully set up your application's user interface, but the C1PropertyGrid control contains no content. In the next step you'll set the C1PropertyGrid control to display certain properties of the Button control, and then you'll add code to your application to add functionality to the control.