DragDrop a Button to another Button

[Benedikt]

Hey there,

I have previously used some Tools from Infragistiks. With them I have made a Drag and Drop thing, where I can take Buttons from different Lists on the left side and drop these on buttons on the right side. You can say the right list contains packages and the left side contains parts and now I say these two parts come together in one package.
I now am working to recreate this App with your tools, cause they are simply better. All other parts of the app are done and work, but this drag and drop I dont get to work.

The first problem is, that I don't get the buttons to drag... because of that I made a RadListBox instead of Buttons, but there I have now the problem, that I don't want to add something from the left listbox to the right listbox. It needs to drop into the item on the right side itself. And secondly I have problems with dropping on a button, because I don't have the feeling of a feedback. So the user will wonder, did it drop on the button I wanted it too?

 

I have uploaded a video how it was in the Infragistiks App to wetransfer:

https://we.tl/t-mMG3OKomF1

 

As you can see, there was every list just an ItemControl with Buttons, and only droppable on the right List. And if I hovered over a button, it became darker so it was a direct feedback where I will drop it.

 

I hope I was able to explain my problem, and that someone is able to help me.

 

Greetings
Benedikt

[Vladimir Stoyanov]

Hello Benedikt,

Thank you for the shared video. 

I am attaching a small sample project demonstrating how you can use the DragDropManager in order to drag a button and provide feedback for drop over another button. Please, check it out and let me know, if it helps. 

On a side note, you can also check out the SDK examples of the DragDropManager to get a better idea of the functionality that it enables. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Benedikt]

Hey Vladimir,

sorry for the late response. The current situation forced me into vaction.

Your example is great. I'm sure I'll get it to work with that.

 

Thank you.

 

Greetings
Benedikt

[Benedikt]

Hey,

I got now most of it to work.

But now I have following problem:

I have a list of Buttons in an Itemscontrol. Each of the dynamic buttons should be allowed to be dragged (easy), but also tro be dropped on.
Because I want to know on which button was dropped, I tried to set the Drag Enter, Drop, DragOver, DragLeave in the Datatemplate.

But I can't build, get the error ambiguous match.
This is the Template:

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

<DataTemplate x:Key="LoseTemplate" >
    <Button
        Margin="0 5 0 0"
        AllowDrop="True"
        telerik:DragDropManager.DragEnter="OnDragEnterExistingLos"
        telerik:DragDropManager.DragLeave="OnDragLeave"
        telerik:DragDropManager.Drop="OnDropExistingLos"
        telerik:DragDropManager.DragOver="OnDragOverExistingLos"
        >
        <Button.Style>
            <Style TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
                <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="{Binding LoslöschungMöglich}"></Setter>
            </Style>
        </Button.Style>
        <Button.Background>
            <SolidColorBrush
                Color="{Binding LoslöschungMöglich, Converter={StaticResource FarbeLosbildungMöglich1FarbeNormalConverter}}"
                />
        </Button.Background>
        <mat:MaterialAssist.MouseOverBrush>
            <SolidColorBrush
                Color="{Binding LoslöschungMöglich, Converter={StaticResource FarbeLosbildungMöglich1FarbeMouseOverConverter}}"
                />
        </mat:MaterialAssist.MouseOverBrush>
        <mat:MaterialAssist.PressedBrush>
            <SolidColorBrush
                Color="{Binding LoslöschungMöglich, Converter={StaticResource FarbeLosbildungMöglich1FarbePressedConverter}}"
                />
        </mat:MaterialAssist.PressedBrush>
        <mat:MaterialAssist.FocusBrush>
            <SolidColorBrush
                Color="{Binding LoslöschungMöglich, Converter={StaticResource FarbeLosbildungMöglich1FarbeFocusedConverter}}"
                />
        </mat:MaterialAssist.FocusBrush>
        <Button.Content>
            <StackPanel>
                <TextBlock
                    Text="{Binding Typ, StringFormat={}Typ: {0}}"
                    FontWeight="Bold"
                    HorizontalAlignment="Center"
                    />
                <TextBlock
                    Text="{Binding Losnummer}"
                    FontWeight="Bold"
                    HorizontalAlignment="Center"
                    />
                <TextBlock
                    Text="{Binding Zellen, StringFormat={}{0} Zellen}"
                    HorizontalAlignment="Center"
                    />
                <TextBlock
                    Text="{Binding Mappe, StringFormat={}Mappe: {0}}"
                    FontSize="{telerik:MaterialResource ResourceKey=FontSizeS}"
                    HorizontalAlignment="Center"
                    />
                <TextBlock
                    Text="{Binding Erstelldatum, StringFormat={}Erstellt: {0:d}}"
                    FontSize="{telerik:MaterialResource ResourceKey=FontSizeS}"
                    HorizontalAlignment="Center"
                    />
                <TextBlock
                    Text="{Binding Positionen, StringFormat={}Positionen: {0}}"
                    FontSize="{telerik:MaterialResource ResourceKey=FontSizeS}"
                    HorizontalAlignment="Center"
                    />
            </StackPanel>
        </Button.Content>
    </Button>
</DataTemplate>

 

Maybe someone has an idea how I can solve this.
Setting the whole DragEnter in code behind works, but if I set it to the ItemsControl I will not know on which button was dropped.

 

[Vladimir Stoyanov]

Hello Benedikt,

Thank you for the shared code snippet. 

The DragDropManager is designed to be used only in code - it won't be possible to set it in XAML to subscribe to the events. 

What I can suggest for your scenario is to create an attached behavior and subsribe to the Loaded event of the button, where you can attach the drag-drop event handlers. Do give this a try and let me know how it goes. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Benedikt]

Works like a charm, thanks :)