Creating a quick palette with drag and click

GoXam
1

<?:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

I tried creating a quick palette, such that user could quickly add items to the current node in addition be able to drag and drop items from the node to where he/she desires. I looked at the State example.

Implementation Summery:
To support drag and drop out of the quick palette I used a go:Pallete control. I placed it inside a usercontrol and added it to my node using go:SpotPanel.Spot="0.5 0 0 -30" go:SpotPanel.Alignment="TopCenter" attached properties. (Source code below)

Here are my results and questions...

1) Sometimes I try to select an item I get multi selection adorner instead of drag and drop. I selected the green circle but instead of dragging the selection tool is shown. Any suggestion on how to fix this?

2) By placing the diagram tool inside the Template it changes the nodes width and height. Is there a way to not have this happen? * The gray area background is the spot panel’s new area.

3) When I move an item from the palette, I would like it to be connected to the from node just like in the State example. Can this be done?

4) Is there another way to create a quick palette that supports drag and click to create and link elements?

Thank you,

Pavel

Source for QuickPalette user control.

<UserControl …>

<go:Palette x:Name="quickPalette"

AllowDragOut="True"

AllowResize="False"

Background="Gray"

MaximumSelectionCount="1"

NodeTemplateDictionary="{StaticResource NodeTemplateDictionary}"

Style="{StaticResource PaletteStyle1}">

<go:Diagram.LayoutManager>

<go:LayoutManager Animated="False" />

</go:Diagram.LayoutManager>

<go:Palette.Layout>

<golayout:GridLayout WrappingWidth="300"

Sorting="Forward" />

</go:Palette.Layout>

</go:Palette>

</UserControl>

Source for my node template

<DataTemplate x:Key="IntermediateNodeTemplate">

<go:SpotPanel x:Name="spotPanel"

go:Node.Location="{Binding Data.Location, Mode=TwoWay}"

go:Node.LocationSpot="BottomLeft"

go:Part.SelectionElementName="selectableArea"

MouseRightButtonDown="part_MouseRightButtonDown"

MouseRightButtonUp="part_MouseRightButtonUp"

MouseEnter="Node_MouseEnter"

MouseLeave="Node_MouseLeave">

<go:NodePanel Sizing="Fixed">

<Path x:Name="selectableArea"

go:NodePanel.Figure="Circle"

Height="{Binding Data.Height, Mode=TwoWay}"

Width="{Binding Data.Width, Mode=TwoWay}"

Fill="{StaticResource theOrangeBrush}"

Stroke="Gray" />

<TextBlock Text="{Binding Data.Key}"

VerticalAlignment="Center"

HorizontalAlignment="Center"

go:Part.TextEditable="True"

MinWidth="10"

MinHeight="10" />

</go:NodePanel>

<view:QuickPaletteView go:SpotPanel.Spot="0.5 0 0 -30"

go:SpotPanel.Alignment="TopCenter" />

2

Just a quick response:

  1. I don’t know why you sometimes can’t drag from the quick palette.
    You’re using Silverlight, yes? I can investigate – maybe there’s some
    focus problem.

  2. So you want each node to always show this quick palette? If so, that’s OK, but makes creating each node fairly expensive. Normally one could reduce this overhead by only showing the quick palette when the node is selected, which one can implement by having the quick palette in the node’s SelectionAdornmentTemplate, not in the node’s template.

If you want it to be placed above (i.e. smaller Y coordinate), why not use a StackPanel or a Grid? SpotPanel is best for putting things inside.

  1. The user might drop it anywhere, right? You can implement a Diagram.ExternalObjectsDropped event handler to also create a new link. I’m not sure about identifying the correct source node quick palette, but I suppose each quick palette could have a custom DraggingTool that overrides the DraggingTool.DoActivate and DoDeactivate methods to also set a global variable that indicates the source node.

  2. Yes, what I suggested in #2 above is what I would recommend.

3
  1. Yes I am using Silverlight. Took me a while to reproduce the loss of drag and drop from my mini-palette. When I first drag an item on to the canvas from my master palette everything works fine. When I move the object the mini-palette stops working. I have also seen this happen when I zoom the main canvas.
2) I am trying to do this on mouseEnter and mouseLeave rather then selection. I understand the SelectionAdornmentTemplate would work great.
I am going to try your suggestion and change the template and probably use Grid layout. Is there another reason to use NodePanel other than a container for Path object? I am trying to figure out it's purpose, if I can use Grid or StackPanel with attached properties.
3) I am trying what you suggested. It's not clear to me why I would need DoDeactivate. Is there way to extend the control so it would pass ExternalObjectsDropped the source via e.OriginalSource?
Thank you, for your ideas.
Pavel
4

  1. In this case it seems using a StackPanel or Grid would be clearest. Sure, NodePanel has its uses, when you want to put stuff (typically a TextBlock) inside a shape/figure, or when you want it to automatically resize the shape/figure so that it surrounds the text.

  2. I was assuming you would want to notice when the drag-and-drop had stopped, even if there hadn’t been a drop. But that might not be important in your application.

I can investigate your suggestion regarding knowing where the drag-and-drop originated. However, RoutedEventArgs.OriginalSource is not settable.