Skip to content

Commit 0b5e0ae

Browse files
Add changes after review (fresh eye)
1 parent ad4181e commit 0b5e0ae

File tree

1 file changed

+36
-33
lines changed

1 file changed

+36
-33
lines changed

Readme.md

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,35 @@
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
66
<!-- default badges end -->
77

8-
# WPF Property Grid - Display Object Properties
8+
# WPF Property Grid - Inspect and Edit Object Properties
99

10-
In this example, a user selects a contact, and the [`PropertyGridControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.PropertyGrid.PropertyGridControl) displays its properties. The user can modify these properties directly in the panel.
10+
This example uses the WPF [`PropertyGridControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.PropertyGrid.PropertyGridControl) to inspect and modify properties of data objects displayed in the [`GridControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Grid.GridControl) control. Use the `PropertyGridControl` to create object inspectors inspired by the `Properties` window in the Visual Studio IDE.
1111

1212
![Display Object Properties](./Images/property-grid.jpg)
1313

1414
## Implementation Details
1515

16-
### Define Data Source
16+
### Source Object
1717

18-
The view model exposes a list of contacts. Each contact includes the following fields: `FirstName`, `LastName`, `Email`, `Phone`, `Address`, `City`, `State`, and `Zip`.
18+
The `Contact` class declares public bindable properties. The `PropertyGridControl` inspects the object's public properties and allows users to browse and modify them. The `Contact` class implements property change notifications. Updates made in the `PropertyGridControl` are applied immediately to the source object and reflected in the `GridControl`.
19+
20+
```csharp
21+
public class Contact : BindableBase {
22+
string _FirstName;
23+
public string FirstName {
24+
get { return _FirstName; }
25+
set {
26+
_FirstName = value;
27+
RaisePropertyChanged(() => FirstName);
28+
}
29+
}
30+
// ...
31+
}
32+
```
33+
34+
### Data Source
35+
36+
The `ViewModel` exposes a typed collection of contacts.
1937

2038
```csharp
2139
public class ViewModel {
@@ -31,44 +49,29 @@ public class ViewModel {
3149
City = "Whitinsville",
3250
State = "MA",
3351
Zip = "01582"
34-
}, ...
52+
},
53+
// ...
3554
};
3655
}
3756
}
3857
```
3958

40-
### Create Editable Object
59+
### Property Grid Configuration
4160

42-
The `Contact` class defines fields that appear in the `PropertyGridControl`. This class supports property change notifications, so all updates in the UI are immediately applied to the data object:
61+
This example creates two Property Grid controls and displays them in tab containers. The first Property Grid control inspects the `Contact` object that corresponds to the focused item in the `GridControl`. The second Property Grid control inspects `Contact` objects that correspond to selected items in the `GridControl`:
4362

44-
```csharp
45-
public class Contact : BindableBase {
46-
string _FirstName;
47-
public string FirstName {
48-
get { return _FirstName; }
49-
set {
50-
_FirstName = value;
51-
RaisePropertyChanged(() => FirstName);
52-
}
53-
}
63+
```xaml
64+
<dx:DXTabControl>
65+
<dx:DXTabItem Header="Edit properties of the focused row">
66+
<dxprg:PropertyGridControl SelectedObject="{Binding Path=CurrentItem, ElementName=grid}" ShowCategories="False"/>
67+
</dx:DXTabItem>
68+
<dx:DXTabItem Header="Edit properties of selected rows">
69+
<dxprg:PropertyGridControl SelectedObjects="{Binding Path=SelectedItems, ElementName=grid}" ShowCategories="False"/>
70+
</dx:DXTabItem>
71+
5472
...
55-
}
56-
```
5773

58-
### Connect UI
59-
60-
Bind the `PropertyGridControl` to the focused or selected row in the `GridControl`:
61-
62-
```csharp
63-
<dxg:GridControl ItemsSource="{Binding Items}" Name="grid">
64-
<dxg:GridControl.Columns>
65-
<dxg:GridColumn FieldName="FirstName" />
66-
<dxg:GridColumn FieldName="LastName" />
67-
</dxg:GridControl.Columns>
68-
</dxg:GridControl>
69-
70-
<dxprg:PropertyGridControl SelectedObject="{Binding ElementName=grid, Path=CurrentItem}" />
71-
<dxprg:PropertyGridControl SelectedObjects="{Binding ElementName=grid, Path=SelectedItems}" />
74+
</dx:DXTabControl>
7275
```
7376

7477
When the user selects a contact, the `PropertyGridControl` displays its properties and allows in-place editing.

0 commit comments

Comments
 (0)