WPF拖放视觉反馈 [英] WPF Drag&Drop visual Feedback

问题描述

我会将一个Button从一个Stackpanel拖放到另一个Stackpanel。实现仍然有效，但我会在拖动事件期间将Button附加到鼠标光标作为视觉反馈。



我正在寻找一个完整的解决方案一天，但我发现只有Canvas的解决方案而不是Stackpanels。



这是我的代码：



Button.xaml

< 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> 
<按钮保证金=   3 0 3 3 
 VerticalAlignment = < span class =code-string>  Top 
 Horizo​​ntalAlignment =  左 
 IsEnabled =   {Binding IsButtonEnabled，ElementName = IB} >  
< StackPanel Orientation =  垂直 >  
< Image Source =   {Binding ElementName = IB，Path = Image} 
 Width =   35 
 Height =   35 
 Margin =   8 /> 
< TextBlock Text =   {Binding ElementName = IB，Path = Text} 
前景=  白色 
 FontSize =   10 
 FontFamily =   Arial 
 TextWrapping =   Wrap 
 TextAlignment =  中心 /> 
 < /   StackPanel  >  
 < /  按钮 >  
 
 < /  网格 >  

Button.xaml.cs

  protected  覆盖  void  OnMouseMove（MouseEventArgs e）
 {
  base  .OnMouseMove（e）; 
  if （e.LeftButton == MouseButtonState.Pressed）
 {
  //  将数据打包到Dataobject中 
 DataObject data =  new  DataObject（）; 
 
 data.SetData（  Object，此）; 
 
  //  使用3参数启动拖放操作：dragSource，data， allowedEffects  
 DragDrop.DoDragDrop（ this ，data，DragDropEffects.All）; 
} 
} 

Window.xaml

 StackPanel Orientation =  水平 
 Drop =   panel_Drop >  
< controls：ImageButton 
 Image =   / LisaBeispiel2; component / Images / Icons / Rotate.png 
 Text =  旋转 /> 
< controls：ImageButton 
 Image =   / LisaBeispiel2; component / Images / Icons / Zoom_Pan .png 
 Text =  缩放/平移 /> 
 < /   StackPanel  >  
< StackPanel Orientation =  水平 
 Drop =   panel_Drop >  
< ; controls：ImageButton 
 Image =   / LisaBeispiel2; component / Images / Icons / ButtonPlatzhalter.png 
 Text =  添加 /> 
< controls：ImageButton 
 Image =   / LisaBeispiel2; component / Images / Icons / ButtonPlatzhalter .png 
 Text =  添加 /> 
 < /   StackPanel  >  
 < /   StackPanel  >  
 < /   StackPanel   >  

Window.xaml.cs

  private   void  panel_Drop（ object  sender，DragEventArgs e）
 {
  //  如果面板中的元素已经处理掉落， 
  //  面板应该还没处理它。 
  if （e.Handled ==  false ）
 {
 Panel _panel =（Panel）sender; 
 UIElement _element =（UIElement）e.Data.GetData（  Object）; 
 
  if （_panel！=  null && _element！= < span class =code-keyword> null ）
 {
  //  获取元素当前所属的面板， 
  //  然后从该面板中删除它并添加它的子项 
  //  它被删除的面板。 
面板_parent =（面板）VisualTreeHelper.GetParent（_element）; 
 
  if （_ parent = = span class =code-keyword> null ）
 {
 _parent.Children.Remove（_element）; 
 _panel.Children.Add（_element）; 
 
} 
 
} 
} 
} 

解决方案

< blockquote>只有涉及画布的解决方案的原因是，这是在屏幕上轻松移动按钮的唯一方法。 stackpanel负责该stackpanel中按钮的位置。按钮不能在stackpanelpanel外面。



在窗口放置两个堆叠面板和一个画布。

在拖动按钮之前，计算按钮相对于画布的位置。



指向yourButtonposition = ButtonToDrag.TransformToAncestor（YourCanvas）.Transform（new Point（0,0））;



将按钮的父级设置为画布。



ButtonLast.Parent = YourCanvas;

使用translatetransform设置画布中的位置。 （yourButtonposition）

你可以使用保证金，但translatetransform工作得更快更好。



现在按钮和以前一样，但是在画布上。

现在你可以使用translatetransform让按钮跟随你的鼠标位置。

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

<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

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

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

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);

                }

            }
        }
    }

解决方案

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.

这篇关于WPF拖放视觉反馈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！