Click here to Skip to main content
15,888,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I will drag&drop a Button from one Stackpanel to another Stackpanel. The implementation still works, but I will that the Button is attached to the mouse cursor during the Drag Event as a visual Feedback.

I was looking for a solution a whole day, but I find only solutions with Canvas and not with Stackpanels.

Here is my Code:

Button.xaml
C#
<UserControl x:Class="LisaBeispiel2.Controls.ImageButton"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Name="IB"
  AllowDrop="True">


<Grid>
    <Button Margin="3 0 3 3"
            VerticalAlignment="Top"
            HorizontalAlignment="Left"
            IsEnabled="{Binding IsButtonEnabled, ElementName=IB}">
        <StackPanel Orientation="Vertical">
            <Image Source="{Binding ElementName=IB, Path=Image}"
                   Width="35"
                   Height="35"
                   Margin="8" />
            <TextBlock Text="{Binding ElementName=IB, Path=Text}"
                       Foreground="White"
                       FontSize="10"
                       FontFamily="Arial"
                       TextWrapping="Wrap"
                       TextAlignment="Center" />
        </StackPanel>
    </Button>

</Grid>


Button.xaml.cs
C#
protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            // Package the data into a Dataobject
            DataObject data = new DataObject();

            data.SetData("Object", this);

            // Inititate the drag-and-drop operation with 3 Parameter: dragSource, data, allowedEffects
            DragDrop.DoDragDrop(this, data, DragDropEffects.All);
        }
    }

Window.xaml
C#
StackPanel Orientation="Horizontal"
              Drop="panel_Drop">
    <controls:ImageButton  
  Image="/LisaBeispiel2;component/Images/Icons/Rotate.png"
  Text="Rotate"/>
   <controls:ImageButton 
  Image="/LisaBeispiel2;component/Images/Icons/Zoom_Pan.png"
  Text="Zoom/Pan"/>
     </StackPanel>
      <StackPanel Orientation="Horizontal"
                  Drop="panel_Drop">
   <controls:ImageButton
   Image="/LisaBeispiel2;component/Images/Icons/ButtonPlatzhalter.png"
   Text="Add"/>
   <controls:ImageButton 
   Image="/LisaBeispiel2;component/Images/Icons/ButtonPlatzhalter.png"
   Text="Add"/>
     </StackPanel>
   </StackPanel>
  </StackPanel>


Window.xaml.cs
C#
private void panel_Drop(object sender, DragEventArgs e)
    {
        // If an element in the panel has already handled the drop,
        // the panel should not also handle it.
        if (e.Handled == false)
        {
            Panel _panel = (Panel)sender;
            UIElement _element = (UIElement)e.Data.GetData("Object");

            if (_panel != null && _element != null)
            {
                // Get the panel that the element currently belongs to,
                // then remove it from that panel and add it the Children of
                // the panel that its been dropped on.
                Panel _parent = (Panel)VisualTreeHelper.GetParent(_element);

                if (_parent != null)
                {
                    _parent.Children.Remove(_element);
                    _panel.Children.Add(_element);

                }

            }
        }
    }
Posted
Comments
LLLLGGGG 29-Jan-15 9:06am    
Try to wrap Stackpanel inside canvas... i do not know if there are any other solutions

1 solution

The reason there are only solutions involving a canvas, is that that is the only way to easily move your button on the screen. A stackpanel is in charge of the position of the button in that stackpanel. The button can not be outside that stackpanelpanel.

Place on a window the two stackpanels and a canvas.
Before you drag your button, calculate the position of the button relative to the canvas.

Point yourButtonposition = ButtonToDrag.TransformToAncestor(YourCanvas).Transform(new Point(0, 0));

set the parent of the button to your canvas.

ButtonLast.Parent = YourCanvas;
Use translatetransform to set the position in the canvas. (yourButtonposition)
You can use margin, but translatetransform works faster and better.

Now the button is in the same place as before, but on a canvas.
You can now let the button follow your mouse position using translatetransform.
 
Share this answer
 
Comments
Jan Bakker 6-Feb-15 11:07am    
A better way, is to create a new transparent window (no borders) and put your button in this window. That way you can move outside of your original window.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900