Dragging from Toolbox

[Sami]

Hi

I created custom data model that is displayed in RadDiagramToolbox. The shapes are shown properly in the toolbox, however when I drag them to the diagram, the diagram shows them only as squares. Below is the xaml for the UI

 

<Grid x:Name="diagramRootPanel">
            <Grid.DataContext>
                <local:MainViewModel/>
            </Grid.DataContext>
            <Grid.Resources>
                <telerik:HierarchicalGalleryItemsCollection x:Key="ToolboxSource"/>
                <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

                <DataTemplate x:Key="ToolboxItemTemplate">
                    <Border Height="100" Margin="0,1,1,0" Width="76">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Viewbox Width="64"
                             Height="50"
                             Margin="5 10 5 0"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Top"
                             Stretch="Uniform">
                                <telerik:RadDiagramShape Margin="15"
                                                 VerticalAlignment="Top"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Geometry="{Binding Geometry}"
                                                 IsHitTestVisible="False" />
                            </Viewbox>
                            <TextBlock Grid.Row="1"
                               Margin="0 0 0 5"
                               HorizontalAlignment="Center"
                               FontFamily="Segoe UI Semibold"
                               Padding="4 0"
                               Text="{Binding Header}"
                               TextAlignment="Center"
                               TextWrapping="Wrap" />
                        </Grid>
                    </Border>
                </DataTemplate>
                
                <!--  ToolboxGroupTemplate  -->
                <HierarchicalDataTemplate x:Key="ToolboxGroupTemplate"
                                  ItemsSource="{Binding Shapes}"
                                  ItemTemplate="{StaticResource ToolboxItemTemplate}">
                    <TextBlock Text="{Binding Header}" />
                </HierarchicalDataTemplate>
            </Grid.Resources>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid x:Name="diagramHostPanel" Grid.Column="0" Margin="10,162,0.4,-0.2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <telerik:RadDiagram x:Name="diagram" SelectionMode="Extended" Grid.Column="1" Grid.Row="1">
                    <Primitives:ItemInformationAdorner.AdditionalContent>
                        <telerik:SettingsPane Diagram="{Binding ElementName=diagram}"/>
                    </Primitives:ItemInformationAdorner.AdditionalContent>
                </telerik:RadDiagram>
                <telerik:RadDiagramRuler Diagram="{Binding ElementName=diagram}" Placement="Left" Grid.Row="1"/>
                <telerik:RadDiagramToolbox x:Name="toolbox" Grid.RowSpan="2" Grid.Column="2"
                               Title="Components"
                               Width="330"
                               HorizontalAlignment="Right"
                               Header="{Binding SelectedItem.Header,
                                                RelativeSource={RelativeSource Self}}"
                               ItemsSource="{Binding Items}"
                               ItemTemplate="{StaticResource ToolboxGroupTemplate}"
                               Visibility="{Binding IsChecked,
                                                    ElementName=toolboxButton,
                                                    Converter={StaticResource BooleanToVisibilityConverter}}" />

                <telerik:RadDiagramRuler Grid.Column="1" Diagram="{Binding ElementName=diagram}" Placement="Top"/>
            </Grid>
        </Grid>

[Dinko | Tech Support Engineer]

Hi Sami,

In a scenario where you have custom shapes inside that ToolBox, the dragged shapes don't keep their original Geometry once dropped. Instead, the drop operation creates a rectangular shape in the RadDiagram. This is due to the fact that the SerializaionService does not serialize the Geometry property of a RadDiagram(Container)Shape. Instead, you need to manually serialize the property and retrieve it after the drop operation. 

public ToolboxDragDropExample()
{
    InitializeComponent();
    SerializationService.Default.ItemSerializing += Default_ItemSerializing;
}

void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
{
    if (e.Entity is RadDiagramShape)
    {
        e.SerializationInfo["MyGeometry"] = (e.Entity as RadDiagramShape).Geometry.ToString(CultureInfo.InvariantCulture);
    }
}

You can take a look at Drag Items from a Custom Databound DiagramToolbox help article in our documentation which describes step by step how you can implement a drag/drop operation between a custom data-bound RadDiagramToolbox and a RadDiagram.

Regards,
Dinko
Progress Telerik