Drag and drop user controls in main page

[Melvin]

Hi,

I have 3 user controls hosted in a main page. I would like to make the user controls draggable within the main page itself. How do I implement them? Currently, this is wat I did:

  <ListBox x:Name="allApplicationsBox" BorderThickness="0" telerik:StyleManager.Theme="Metro"
     AllowDrop="True" Background="Transparent" BorderBrush="Transparent"
     ItemContainerStyle="{StaticResource draggableItemStyle}">
                <ListBox.Items>
                    <ListBoxItem>
                        <my:TopContainer x:Name="topContainer" Grid.Row="0" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>
                    </ListBoxItem>
                    <ListBoxItem>
                        <my:MiddleContainer x:Name="middleContainer" Grid.Row="1" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>
                    </ListBoxItem>
                    <ListBoxItem>
                        <my:BottomContainer x:Name="bottomContainer" Grid.Row="2" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>
                    </ListBoxItem>
                </ListBox.Items>
            </ListBox>

 

The styles are as follows:

            <Style TargetType="ListBoxItem" x:Key="draggableItemStyle">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Foreground" Value="#000000" />
                <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
                <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
            </Style>

Need some help and guidance on how to make it done, preferrably with some code snippets.

Thanks and regards,
ML

[Nick]

Hello Melvin,

I am not sure I understand the problem. Are you trying to implement some kind of a "designer" like Visual Studio's designer, or just to place the controls from the ListBox on in predefined places on the page? 

Either way, there are various ways to accomplish this. In general, you can use the DragDropManager events to accomplish the desired functionality. You can use the DragInitializing handler to set the dragged data to the control that you are dragging.

private void OnDragInitialize(object sender, DragInitializeEventArgs args)
        {
            args.AllowedEffects = DragDropEffects.All;
            args.Data = ((FrameworkElement)args.OriginalSource).ChildrenOfType<TopContainer>().FirstOrDefault(); // This should be the control you are trying to drag
        }

You can place the control you dragged in the  Drop event handler. 

private void OnDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs args)
{
     (sender as FrameworkElement).Children.Add(args.Data as FrameworkElement); // Add the control you are dragging in the children collection of the target. If needed you can adjust some manditory properties before adding it. Like GridRow, CanvasTop etc.
}

You can use the other event to adjust the other properties you need to implement the functionality.

Hope this helps!

Greetings,
Nik
the Telerik team