Add buttons beside the node

GoXam
1

Hi.
When i add new node to the diagram, I’m using this DataTemplateDictionary:

    <go:DataTemplateDictionary x:Key="PalleteNodeTemplateDictionary">        
        <DataTemplate x:Key="Standard">
            <go:SpotPanel Name="spotpanel" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" Style="{StaticResource SpotPanelStyle}" >
                <go:NodePanel go:SpotPanel.Main="True" Sizing="Auto">
                    <Grid MaxWidth="200" Background="Transparent">
                        <Grid.RowDefinitions >
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" Background="Transparent">
                            <Image Source="{Binding Path=Data.Picture, Converter={StaticResource theImageSourceConvertor}}" Stretch="Fill" MaxHeight="80" MaxWidth="80"/>
                        </Grid>
                        <Grid Grid.Row="1" Background="Transparent">
                            <Label Content="{Binding Path=Data.Caption}" HorizontalAlignment="Center"  Foreground="White"/>
                        </Grid>
                    </Grid>
                </go:NodePanel>
                <Ellipse go:Node.FromSpot="MiddleBottom"
                             go:Node.LinkableTo="False"
                             go:Node.PortId="0"
                             go:SpotPanel.Alignment="MiddleBottom"
                             go:SpotPanel.Spot="MiddleBottom"
                             Stroke="{Binding Path=Node.Tag,
                                              Converter={StaticResource theBooleanBrushConverter}}"
                             Style="{StaticResource EllipseStyle}" />
                <Ellipse go:Node.LinkableFrom="False"
                             go:Node.PortId="1"
                             go:Node.ToSpot="MiddleTop"
                             go:SpotPanel.Alignment="MiddleTop"
                             go:SpotPanel.Spot="MiddleTop"
                             Stroke="{Binding Path=Node.Tag,
                                              Converter={StaticResource theBooleanBrushConverter}}"
                             Style="{StaticResource EllipseStyle}" />
                <Ellipse go:Node.FromSpot="MiddleLeft"
                             go:Node.PortId="2"
                             go:Node.ToSpot="MiddleLeft"
                             go:SpotPanel.Alignment="MiddleLeft"
                             go:SpotPanel.Spot="MiddleLeft"
                             Stroke="{Binding Path=Node.Tag,
                                              Converter={StaticResource theBooleanBrushConverter}}"
                             Style="{StaticResource EllipseStyle}" />
                <Ellipse go:Node.FromSpot="MiddleRight"
                             go:Node.PortId="3"
                             go:Node.ToSpot="MiddleRight"
                             go:SpotPanel.Alignment="MiddleRight"
                             go:SpotPanel.Spot="MiddleRight"
                             Stroke="{Binding Path=Node.Tag,
                                              Converter={StaticResource theBooleanBrushConverter}}"
                             Style="{StaticResource EllipseStyle}" />
            </go:SpotPanel>
        </DataTemplate>
    </go:DataTemplateDictionary>
I want to add five buttons on the left side of each node, that will appear when i hover on the node, and will disapear when i exit the node border.
But i don't know how to add the buttons to the DataTemplateDictionary in a way that they will physically 
be out of thnode borders (out of te spotpanel), maybe i don't need to put them inside the DataTemplateDictionary. 
so where??
2

I don’t think you need to use any GoXam classes for implementing the behavior of showing some buttons when the mouse hovers over the node. Just implement it using WPF or Silverlight functionality. Don’t include those buttons in the node itself – use Adorners.

3

Hi, since a node and the diagram that hosts it, are not a regular wpf controls, and since the fact that what i’m writting on that xaml is what is shown on the Diagram, i can’t see a simple way to achieve my goal by not doing it on that xaml.
I will be more than glad if you could give some simple example…

4

Oh, I do recommend that you implement it in XAML, and that the buttons can be syntactically within your node data template. It’s just that the Adorners should not be part of the visual tree of the node data template.

You should be able to find examples of how to do this by searching the web, since it is not specific to GoXam. There might even be examples within this forum.