# Step 2 of 3: Customizing the C1PropertyGrid Application

## Content



In the last step you created a WPF application and added a **Button** and the [C1PropertyGrid](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1PropertyGrid.html) control to the application.

In this step you'll customize the **C1PropertyGrid** control to display specific properties of the **Button** control.

To customize and connect the **C1PropertyGrid** control to the **Button** control, complete the following steps:

1.  Switch to XAML view. You’ll bind the **C1PropertyGrid** control to the **Button** control in XAML then customize the controls.
    
2.  Add SelectedObject="{Binding ElementName=TextButton, Mode=OneWay}" to the <c1:C1PropertyGrid> tag so it appears similar to the following:
    

**xml**

```xml
XAMLCopy Code 
<c1:C1PropertyGrid Margin="130,12,30,12" Name="c1PropertyGrid1" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" SelectedObject="{Binding ElementName=TextButton, Mode=OneWay}"/>
```

You will notice in Design view that the **C1PropertyGrid** control now reflects all of the button’s properties. In the next steps you'll customize the **C1PropertyGrid** control so that only certain properties are displayed.

3.  In the Properties window uncheck the [C1PropertyGrid.AutoGenerateProperties](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1PropertyGrid.AutoGenerateProperties.html) check box. Now every property will no longer be displayed – only those that you specify.
    
4.  Locate the **PropertyAttributes** collection in the Properties window, and click the ellipsis button next to the item. The **Property Attribute Collection Editor** dialog box will appear.
    
5.  In the **Property Attribute Collection Editor** dialog box, click the **Add** button. Repeat this step seven more times to create a total of eight **PropertyAttribute** items.
    
6.  Set the following Properties in the right-side Properties pane for the items you just added:
    

|   **PropertyAttribute**   |   **Category**   |   **DisplayName**   |   **MemberName**   |
| --- | --- | --- | --- |
|   [0\] PropertyAttribute   |   Appearance   |   Background Color   |   Background   |
|   [1\] PropertyAttribute   |   Appearance   |   Border Color   |   BorderBrush   |
|   [2\] PropertyAttribute   |   Appearance   |   Visibility   |   Visibility   |
|   [3\] PropertyAttribute   |   Size   |   Button Height   |   Height   |
|   [4\] PropertyAttribute   |   Size   |   Button Width   |   Width   |
|   [5\] PropertyAttribute   |   Text   |   Button Text   |   Content   |
|   [6\] PropertyAttribute   |   Text   |   Text Color   |   Foreground   |
|   [7\] PropertyAttribute   |   Text   |   Text Size   |   FontSize   |

The **Category** identifies what section the item appears in. The **DisplayName** indicates the name displayed for the item. The **MemberName** indicates the actual name of the member.

![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/step_x0020_2_x0020_of_x0020_3-_x0020_customizing_x0020_the_x0020_c1propertygrid_x0020_application_files/image001.png)

7.  Click the **OK** button to close the **Property Attribute Collection Editor** dialog box and change the settings. The page should now look similar to the following image at design time:
    

![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/step_x0020_2_x0020_of_x0020_3-_x0020_customizing_x0020_the_x0020_c1propertygrid_x0020_application_files/image002.png)

In this step you customized the **C1PropertyGrid** control to display specific properties of the **Button** control. In the next step, you'll run the application and view some of the possible run-time interactions.