This is a migrated thread and some comments may be shown as answers.

DragDrop a Button to another Button

5 Answers 382 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Benedikt asked on 27 Mar 2020, 08:07 AM

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

5 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 01 Apr 2020, 07:36 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 27 Apr 2020, 09:56 AM

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

0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 26 May 2020, 07:29 AM

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.

 

0
Accepted
Vladimir Stoyanov
Telerik team
answered on 28 May 2020, 09:24 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 29 May 2020, 09:01 AM
Works like a charm, thanks :) 
Tags
DragAndDrop
Asked by
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Vladimir Stoyanov
Telerik team
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Share this question
or