c#/WPF产品配置器/可拖动项目

我用过 this answer 并添加少量修改。

我使用了 ItemControl 创建包含不同对象的视图。这样,您只需将对象添加到列表中即可添加图像。容器是 Canvas ,但它可以是任何内容,因为位置由 RenderTransform :

<ItemsControl Name="MainView" ItemsSource="{Binding ListObjects}">
    <ItemsControl.ItemsPanel >
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:MVDragableObject}">
            <local:DragableObject/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这是背后的代码。一些基本模型视图:

public class MVObjectManager
{
    public ObservableCollection<MVDragableObject> ListObjects { get; set; }
    public MVObjectManager()
    {
        ListObjects = new ObservableCollection<MVDragableObject>();
    }
}
public class MVDragableObject
{
}

以及填充和绑定容器的代码。您可以注意到,我向集合中添加了3项:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        MVObjectManager Manager=new MVObjectManager();
        Manager.ListObjects.Add(new MVDragableObject());
        Manager.ListObjects.Add(new MVDragableObject());
        Manager.ListObjects.Add(new MVDragableObject());
        MainView.DataContext  = Manager;
    }
}

我定义了一个非常简单的 UserControl . 您可以自定义它:

<UserControl x:Class="StackFill.DragableObject"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d">
<Grid>
    <Rectangle Fill="Red" Height="30" Width="30"/>
</Grid>

</UserControl>

下面是管理 拖放 行为:

public partial class DragableObject : UserControl
{
    public DragableObject()
    {
        InitializeComponent();
        this.MouseLeftButtonDown += new MouseButtonEventHandler(DragableObject_MouseLeftButtonDown);
        this.MouseLeftButtonUp += new MouseButtonEventHandler(DragableObject_MouseLeftButtonUp);
        this.MouseMove += new MouseEventHandler(DragableObject_MouseMove);
    }

    protected bool isDragging;
    private Point clickPosition;

    private void DragableObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        isDragging = true;
        var draggableControl = sender as UserControl;
        clickPosition = e.GetPosition(this.Parent as UIElement);
        draggableControl.CaptureMouse();
    }

    private void DragableObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        isDragging = false;
        var draggable = sender as UserControl;
        draggable.ReleaseMouseCapture();
    }

    private void DragableObject_MouseMove(object sender, MouseEventArgs e)
    {
        var draggableControl = sender as UserControl;

        if (isDragging && draggableControl != null)
        {
            Point currentPosition = e.GetPosition(this.Parent as UIElement);

            var transform = draggableControl.RenderTransform as TranslateTransform;
            if (transform == null)
            {
                transform = new TranslateTransform();
                draggableControl.RenderTransform = transform;
            }

            transform.X = snapPosition(currentPosition.X - clickPosition.X, 10);
            transform.Y = snapPosition(currentPosition.Y - clickPosition.Y, 10);
        }
    }

    private double snapPosition(double position, double gridSize)
    {
        return (Math.Truncate(position / gridSize) * gridSize);
    }
}

可以通过更改gridSize参数来控制捕捉精度。