Drag and drop user controls in main page

2 posts, 0 answers
  1. Melvin
    Melvin avatar
    12 posts
    Member since:
    Dec 2011

    Posted 22 Feb 2012 Link to this post


    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}">
                            <my:TopContainer x:Name="topContainer" Grid.Row="0" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>
                            <my:MiddleContainer x:Name="middleContainer" Grid.Row="1" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>
                            <my:BottomContainer x:Name="bottomContainer" Grid.Row="2" HorizontalAlignment="Left" Width="1190" telerik:DragDropManager.AllowDrag="True"/>


    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" />

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

    Thanks and regards,

  2. Nick
    Nick avatar
    593 posts

    Posted 27 Feb 2012 Link to this post

    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!

    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft R3 2016 release webinar banner
Back to Top