Button in node

Hello, I add a button in a customize node, I rewrite the controltemplate, not only the datatemplate, but the button is not clickable, when the mouse is hovering on it, the cursor is SizeAll, I guess it must covered by something (maybe the mover thumb), because I see the default text box present in ContentPresenter is editable. So, do you know how to make that button clickable? Thanks.

Hello Jzhou

Sounds like you have put the button underneath the MoveThumb. Try rearranging your template to put the Button at the same level in the visual tree as the ContentPresenter. If you need any help with this. Send me your template and I'll advise you in how to rearrange it.

Jason Fauchelle

Hello, here is my test style, in the NodeBorder, I have a toggle button and the text box, both of them are hidden by the move thumb, if I remove the move thumb, then they can work. But the default text box present by content presenter can work correctly. The content presenter here is only for test, in my real code I don't use it to present any thing, and I apply this style to a group node.

<Style x:Key="GroupModuleNodeStyle" TargetType="ms:DiagramNodeElement">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ms:DiagramNodeElement">
                <Grid>
                    <Border Name="NodeBorder" BorderBrush="DimGray" Background="#484848" BorderThickness="1" CornerRadius="3">
                        <StackPanel VerticalAlignment="Center">
                            <ToggleButton Name="ExpandButton" Width="20" Height="20" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,2,4,0" IsChecked="{Binding IsExpanded}"
                                Content="-" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20" />
                            <TextBox>sss</TextBox>
                            <Label Padding="1" Content="{Binding Content.ModuleTypeName, RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent"/>
                            <Image Source="{Binding Content.ImageSource, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None"/>
                            <Label Padding="1" Content="{Binding Content.ModuleName, RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent"/>
                        </StackPanel>
                    </Border>
                    <ms:MoveThumb Element="{Binding RelativeSource={RelativeSource TemplatedParent}}" Name="Mover">
                        <ms:MoveThumb.InputBindings>
                            <MouseBinding Gesture="LeftDoubleClick" Command="{Binding Content.OpenModuleEditorCommand, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </ms:MoveThumb.InputBindings>
                    </ms:MoveThumb>
                    <ContentPresenter Content="{Binding}" ContentTemplateSelector="{Binding NodeContentTemplateSelector, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramNodeElement}}}" />
                    </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="NodeBorder" Property="BorderBrush" Value="Gainsboro" />
                        <Setter TargetName="NodeBorder" Property="BorderThickness" Value="2" />
                    </Trigger>
                    <DataTrigger Binding="{Binding Node.IsVisible, RelativeSource={RelativeSource Self}}" Value="False">
                        <Setter Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsExpanded}" Value="False">
                        <Setter TargetName="ExpandButton" Property="Content" Value="+" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hello jzhou

To solve this issue, you should move the StackPanel to the same place as the ContentPresenter. The NodeBorder should stay where it is though. This way, the button and text box will be on top of the MoveThumb so the mouse can reach them. When you do this, you may notice that putting the mouse over the labels and image don't allow you to move the node. To resolve this, you'd simply set the IsHitTestVisible property to False on those elements. Let me know if you have more questions about templating the group nodes.

Jason Fauchelle