Clickable Button inside a custom styled DiagramNodeElement

Hi,

is it possible to have a button inside the DiagramNodeElements draggable (IsHitTestVisible=False) area?

I styled my custom DiagramNodeElement like that:

<Style x:Key="MyCustomDiagramNodeStyle" TargetType="ms:DiagramNodeElement">
    <Setter Property="ToolTip" Value="{Binding OtherViewModel.Name}" />
    <Setter Property="NodeTemplate">
        <Setter.Value>
            <DataTemplate DataType="viewModels:MyViewModel">
                <Grid>
                    <Grid x:Name="RootGrid"
                        SnapsToDevicePixels="True"
                        Background="{StaticResource MyShapeBackground}"
                        IsHitTestVisible="False"
                        UseLayoutRounding="True">
                        <ItemsControl ItemsSource="{Binding MyList}"/>
                    </Grid>
                   </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

If changeing the IsHitTestVisible Property to true, i can't move my nodes any more, but the buttons inside the items in MyList can be clicked. How can i solve this problem? Hope you can help me with that issue.

Thanks

Patrick

Hi Patrick,

There isn't a way to edit the template in a way that allows the buttons to be clicked, and the node to be dragged via the buttons. To achieve this functionality, you'll need to implement a way for the mouse events to affect both the Buttons and the MoveThumb within the node elemnt. One way could be to implement your own Button control that either doesn't handle events - so they can reach the MoveThumb, or that directly sends the drag events to the MoveThumb, or that moves the node itself. Another way might be to create an attached behavior that listens to mouse events on the Buttons, and applies them to the MoveThumb. Note that I have not tried either of these.

-Jason Fauchelle

Hi Jason,

maybe my description was not clear enough :), I don't wan't to drag the nodes with the button. I want to start an action by clicking the button. The drag n drop functionality should work everywhere on the node, but not on the button.

The Button is located inside one of my ChildViewModelsStyle that are added via an ItemsControl (Binding on List with ChildViewModels (MyList)).

If the button is added to the NodeViewModelStyle (MyCustomDiagramNodeStyle) there is no problem. Only when it is located inside the ChildViewModelStyle.

<Style x:Key="MyCustomDiagramNodeStyle" TargetType="ms:DiagramNodeElement">
<Setter Property="ToolTip" Value="{Binding OtherViewModel.Name}" />
<Setter Property="NodeTemplate">
    <Setter.Value>
        <DataTemplate DataType="viewModels:MyViewModel">
            <Grid>
                <Grid x:Name="RootGrid"
                    SnapsToDevicePixels="True"
                    Background="{StaticResource MyShapeBackground}"
                    IsHitTestVisible="False" <!-- if set to true, the button in the list with ChildViewModels (MyList) is clickable but dragging nodes does no longer work -->
                    UseLayoutRounding="True">
                    <ItemsControl ItemsSource="{Binding MyList}"/> <!-- Button inside here is not clickable -->
                </Grid>
                <Button Command={Binding MyCommand} Content="MyButton"/> <!-- this works excellent but i need the button inside MyList -->
               </Grid>
        </DataTemplate>
    </Setter.Value>
</Setter>

Hope you can help me - thanks.

-Patrick

Thanks for the clarification, I understand now.

I would recommend starting by separating the colored grid from the ItemsControl.

<DataTemplate DataType="viewModels:MyViewModel">
  <Grid>
    <Grid x:Name="RootGrid"
          SnapsToDevicePixels="True"
          Background="{StaticResource MyShapeBackground}"
          IsHitTestVisible="False" UseLayoutRounding="True" />
    <ItemsControl ItemsSource="{Binding MyList}"/>
  </Grid>
</DataTemplate>

That way, the colored grid can have IsHitTestVisible=False without affecting the buttons. Let me know if you need further help after doing this.

-Jason Fauchelle