WpfRadPropertyGrid binding

[Ivan]

Hello,

I have a RadDiagram and RadPropertyGrid on a WPF form. I have the property grid defined as follows:

<telerik:RadPropertyGrid DockPanel.Dock="Right" LabelColumnWidth="100" HorizontalAlignment="Right" Width="250" 
                                 AutoGeneratePropertyDefinitions="True" PropertySetMode="Intersection"
                                 Item="{Binding ElementName=Diagram, Path=SelectedItems, UpdateSourceTrigger=PropertyChanged}">

The diagram's GraphSource property is bound to a view model of type "ObservableGraphSourceBase<ZoneDiagramItemViewModel, LinkViewModelBase<NodeViewModelBase>>".

The binding works in the sense that the property grid shows the selected item in the diagram with its original properties as they were in when the item was created. Whenever the item in the diagram is moved for example, the property grid is not updated. Neither does the item in the grid move after the respective property in the property grid is modified.

The ZoneDiagramItemViewModel initially inherited the NodeViewModelBase class. I then tried by re-implementing it using my own Height, Width, Position etc. properties that all fired the NotifyPropertychanged event. This did not work either.

How do I set up the binding so that properties are updated in both directions?

Thank you.

[Zarko]

Hello Ivan,
There are two ways to fix this problem:
- you could bind the RadPropertyGrid directly to the SelectedItem not the SelectedItems collection

<telerik:RadPropertyGrid Width="250"
                  AutoGeneratePropertyDefinitions="False"
                  Item="{Binding ElementName=diagram,
                            Path=SelectedItem,
                            UpdateSourceTrigger=PropertyChanged}"
                  LabelColumnWidth="100">
    <telerik:RadPropertyGrid.PropertyDefinitions>
        <telerik:PropertyDefinition Binding="{Binding Position, Mode=TwoWay}" DisplayName="Position">
            <telerik:PropertyDefinition.EditorTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Position, Mode=TwoWay}" />
                </DataTemplate>
            </telerik:PropertyDefinition.EditorTemplate>
        </telerik:PropertyDefinition>
        ...
    </telerik:RadPropertyGrid.PropertyDefinitions>
</telerik:RadPropertyGrid>

- you'll have to use EditorTemplate with converter:

private void OnAutoGeneratingPropertyDefinition(object sender, AutoGeneratingPropertyDefinitionEventArgs e)
{
    if (e.PropertyDefinition.DisplayName == "Position")
    {
        e.PropertyDefinition.EditorTemplate = this.Resources["positionTemplate"] as DataTemplate;
    }
    else if (e.PropertyDefinition.DisplayName == "Content")
    {
        e.PropertyDefinition.EditorTemplate = this.Resources["myContentTemplate"] as DataTemplate;
    }
}

and

<local:PointToStringConv x:Key="converter" />
<DataTemplate x:Key="myContentTemplate">
    <TextBox Text="{Binding Path=CurrentPropertySet[Content], Mode=TwoWay}" />
</DataTemplate>
<DataTemplate x:Key="positionTemplate">
    <TextBox Text="{Binding Path=CurrentPropertySet[Position], Mode=TwoWay, Converter={StaticResource converter}}" />
</DataTemplate>

Note: Unfortunately this way the position again won't be dynamically updated when you drag a shape.
I've attached a sample project demonstrating this so could you please examine it and if you have more questions feel free to ask.

Regards,
Zarko
Telerik

 

 

[Ivan]

Hi Zarko,

Thank you for the reply.

I have looked at the solutions you offered but neither provides the complete solution I am after (that I can see). I am not sure if the requirement of the real time updating of the property values complicates matters. If it does I will drop that requirement.

What is important to me though are the following:

1. I should be able to edit multiple selected shapes' properties through the property grid.
2. When a shape(s) properties are modified e.g. position on the diagram, the property grid should update - if not real time then after the modification has completed. This does not happen with the second option you provided - I have to un-select and re-select the shape to have the property grid updated.
3. Position's X and Y coordinates should be represented separately in the property grid.
4. The behavior/function of the PropertySetMode="Intersection" on the property grid should be maintained.

I want to achieve the same functionality/interaction as Visual Studio's Xaml designer and the property editor.

If I can't achieve it through direct binding with the diagram's SelectedItems collection, I can do it manually by keeping my own list of selected items and syncing it via the diagram's SelectionChanged event. I have in fact tried this, but once a shape has been created its properties don't update - even if they are modified via the diagram. I can move the shapes around but their properties don't change.

Regards,

[Maya]

Hello Ivan,

Generally, you can bind RadPropertyGrid to multiple items and edit the values displayed in it - as it is in the example you attached, you can modify the Width property for example and both shapes will be updated. However, displaying separate property definitions of each item - as in your case X and Y coordinates  - is not possible since it contradicts to the idea of PropertySets.
Nevertheless, in order to maintain a consistent conversation, I would recommend you to open a new ticket for RadPropertyGrid and ask the questions in its related forum. 

Regards,
Maya
Telerik