Selected Node

GoXam
1

Hi,

I have two questions.

  • What events do I use to detect when a node is selected or de-seleted.

  • How do I change the SelectionAdorned termplate. I want to change the thickness and color of the border for selected nodes.

Thanks
Rich

2

Diagram.SelectedParts is an ObservableCollection.
Or perhaps you can bind directly to Diagram.SelectedNode.

Set Part.SelectionAdornmentTemplate. See the Generic.XAML file for the default template. The StateChart sample also demonstrates a custom SelectionAdornmentTemplate that displays a button instead of a Shape.

Note that the properties don’t have to be constants – you can use data bindings, so that you can customize the adornment appearance based on the data itself.

3

Hi,

I added the SelectionAdornmentTemplate per your instructions and it worked perfectly.

On the question of getting an event for a select de-select node I could not get it going.

Here is what I tried: (This is over my head, what am I missing?)

Thanks
Rich

public partial class EntityRelationship : UserControl, INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
4

As a simple example of binding some UI to the currently selected node, add the following CheckBox to LogicCircuit.xaml:

<CheckBox IsChecked="{Binding Path=SelectedNode.Data.Value, ElementName=myDiagram, Mode=TwoWay}" />

You’ll see that the CheckBox is checked according to the value of the “Value” property of the GateData object that is the value of Node.Data, when a gate is selected. Select an input node and you can toggle its value by clicking on the CheckBox.

Another trivial example: in the EntityRelationship sample, add the following TextBox:

<TextBox Text="{Binding Path=SelectedNode.Data.Items[0].Color, ElementName=myDiagram, Mode=TwoWay}" />

Then when the user selects a node, the color of the icon of the first data item is shown in the textbox. The user can change the text to change the color of the icon (click or tab elsewhere for the new color to be accepted).

To make this work for the currently selected item in the DataGrid/ListView, you need to define two selection change event handlers, one for the Diagram, and one for the DataGrid/ListView. Here’s for the Diagram:

myDiagram.SelectedParts.CollectionChanged += SelectedParts_CollectionChanged; void SelectedParts_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { Node selnode = myDiagram.SelectedNode; if (selnode != null) { Entity ent = selnode.Data as Entity; if (ent != null) { var itemslist = selnode.FindNamedDescendant("myItemList") as ListView; // or DataGrid int index = itemslist.SelectedIndex; if (index >= 0) { myColorTextBox.DataContext = ent.Items[index]; return; } } } myColorTextBox.DataContext = null; }
You also need to define the ListView/DataGrid SelectionChanged event hander, which I won’t bother with here.

This is the corresponding XAML:

<TextBox x:Name="myColorTextBox" Text="{Binding Path=Color, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" />

5

Maybe the confusion comes from there not being a Diagram.SelectionChanged event.

We’ll add that event in the next release. The above code won’t really change, except for the signatures:

    myDiagram.SelectionChanged += myDiagram_SelectionChanged;[/code] or [code]  <go:Diagram SelectionChanged="myDiagram_SelectionChanged" . . .>

void myDiagram_SelectionChanged(object sender, SelectionChangedEventArgs e) { Node selnode = myDiagram.SelectedNode; if (selnode != null) { Entity ent = selnode.Data as Entity; if (ent != null) { var itemslist = selnode.FindNamedDescendant("myItemList") as ListView; // or DataGrid int index = itemslist.SelectedIndex; if (index >= 0) { myColorTextBox.DataContext = ent.Items[index]; return; } } } myColorTextBox.DataContext = null; }