拖放预览

让我们尝试调整此答案中的代码，以便在您放手之前它不会在现实中包裹正方形。

idea cVisualBrush是个好主意，这样我们就可以很容易地“乘以”已有的元素。但是在集合中加入一个dummy元素并不好，毕竟我们的动作关注的是UI层面，而不是模型。

因此，VM 级别完全不会发生任何变化，这很好。

让我们在方块列表的顶部添加另一个级别。为了不干扰，我们将使其对鼠标透明。我们需要绑定两个元素的大小，为此我们需要一个名称和Binding：

<Window x:Class="MvvmDraggable2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MvvmDraggable2"
        Title="Draggable squares 2" Height="350" Width="525">
    <Grid>
        <ItemsControl ItemsSource="{Binding Squares}" Width="300" Height="300"
                      Background="Beige" Name="DraggableItemsHost">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:DraggableSquare
                        DraggedImageContainer="{Binding ElementName=DraggedImageContainer}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding Position.X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Position.Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
        <Canvas IsHitTestVisible="False">
            <Rectangle Opacity="0.4" Name="DraggedImageContainer" Visibility="Collapsed"/>
        </Canvas>
    </Grid>
</Window>

为它添加了一个名称ItemsControl，DraggableSquare为它出现了一个额外的绑定（稍后会详细介绍），并且在底部出现Canvas了包含所需元素的内容。

接下来，DraggbleSquare。我们正在稍微改变我们的内部逻辑。UpdatePosition现在只会在释放鼠标或窗口失去焦点时调用。

void OnDragMove(object sender, MouseEventArgs e)
{
    //UpdatePosition(e);
    UpdateDraggedSquarePosition(e);
}

void FinishDrag(object sender, MouseEventArgs e)
{
    MouseMove -= OnDragMove;
    LostMouseCapture -= OnLostCapture;
    UpdatePosition(e);
    UpdateDraggedSquarePosition(null);
}

逻辑的新部分：UpdateDraggedSquarePosition. 为此，我们需要一个新的依赖属性DraggedImageContainer，其中我们已经在 XAML 中放置了一个表示移动图像的元素。

（把它放得更高，靠近RequestMoveCommand。）

#region dp Shape DraggedImageContainer
public Shape DraggedImageContainer
{
    get { return (Shape)GetValue(DraggedImageContainerProperty); }
    set { SetValue(DraggedImageContainerProperty, value); }
}

public static readonly DependencyProperty DraggedImageContainerProperty =
    DependencyProperty.Register(
        "DraggedImageContainer", typeof(Shape), typeof(DraggableSquare));
#endregion

实际上是新逻辑本身：

void UpdateDraggedSquarePosition(MouseEventArgs e)
{
    var dragImageContainer = DraggedImageContainer;
    if (dragImageContainer == null)
        return;
    var needVisible = e != null;
    var wasVisible = dragImageContainer.Visibility == Visibility.Visible;
    // включаем/выключаем видимость перемещаемой картинки
    dragImageContainer.Visibility = needVisible ? Visibility.Visible : Visibility.Collapsed;
    if (!needVisible) // если мы выключились, нам больше нечего делать
        return;
    if (!wasVisible) // а если мы были выключены и включились,
    {                // нам надо привязать изображение себя
        dragImageContainer.Fill = new VisualBrush(this);
        dragImageContainer.SetBinding( // а также ширину/высоту
            Shape.WidthProperty,
            new Binding(nameof(ActualWidth)) { Source = this });
        dragImageContainer.SetBinding(
            Shape.HeightProperty,
            new Binding(nameof(ActualHeight)) { Source = this });
        // Binding нужен потому, что наш размер может по идее измениться
    }
    // перемещаем картинку на нужную позицию
    var parent = FindParent<Canvas>(dragImageContainer);
    var position = e.GetPosition(parent) - relativeMousePos;
    Canvas.SetLeft(dragImageContainer, position.X);
    Canvas.SetTop(dragImageContainer, position.Y);
}

是的，我不得不稍微改变一下GetParent以使其适用于任意元素：

static private T FindParent<T>(FrameworkElement from) where T : FrameworkElement
{
    FrameworkElement current = from;
    T t;
    do
    {
        t = current as T;
        current = (FrameworkElement)VisualTreeHelper.GetParent(current);
    }
    while (t == null && current != null);
    return t;
}

并以OnMouseDown书面形式

container = FindParent<Canvas>(this);

就这样了。

为了拍出漂亮的照片，我还给 加了颜色SquareVM：

Color color;
public Color Color
{
    get { return color; }
    set { if (color != value) { color = value; NotifyPropertyChanged(); } }
}

并将颜色设置为MainVM：

class MainVM : VM
{
    public ObservableCollection<SquareVM> Squares { get; } =
        new ObservableCollection<SquareVM>()
        {
            new SquareVM() { Position = new Point(30, 30),
                             Color = Color.FromRgb(0x3D, 0x31, 0x5B) },
            new SquareVM() { Position = new Point(100, 70),
                             Color = Color.FromRgb(0x44, 0x4B, 0x6E) },
            new SquareVM() { Position = new Point(80, 0),
                             Color = Color.FromRgb(0x70, 0x8B, 0x75) },
            new SquareVM() { Position = new Point(90, 180),
                             Color = Color.FromRgb(0x9A, 0xB8, 0x7A) },
            new SquareVM() { Position = new Point(200, 200),
                             Color = Color.FromRgb(0xF8, 0xF9, 0x91) }
        };
}

我也喜欢上了他DraggableSquare.xaml：

<UserControl x:Class="MvvmDraggable2.DraggableSquare"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="50" Height="50"
             MouseDown="OnMouseDown" MouseUp="OnMouseUp">
    <UserControl.Background>
        <SolidColorBrush Color="{Binding Color}"/>
    </UserControl.Background>
    <Grid/>
</UserControl>

结果是这样的：

如果您希望将图像移动得更小，最简单的缩小方法是RenderTransform：

<Canvas IsHitTestVisible="False">
    <Rectangle Opacity="0.4" Name="DraggedImageContainer" Visibility="Collapsed"
               RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>