在WPF Dragable对象一个ItemsControl？ [英] Dragable objects in WPF in an ItemsControl?

问题描述

我希望能够实现一个ItemsControl与dragable项目。究其原因，是ItemsControl的，所以我可以绑定到我在后台视图模型。

I want to be able to implement an ItemsControl with dragable items. The reason for the ItemsControl is so I can bind to my ViewModel in the background.

我使用的画布Thumb控件试图和它的作品完美，但只要我坚持在一个ItemsControl它停止工作。这里是我的尝试：

I've tried using a Thumb Control in a canvas and it works perfect, except as soon as I stick it in an ItemsControl it stops working. Here is what I tried:

        <ItemsControl ItemsSource="{Binding MyItems}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Thumb Canvas.Left="0" Canvas.Top="0" Width="50" Height="50" DragDelta="MyThumb_DragDelta"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

    </ItemsControl>

背后的代码：

The code behind:

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        DataContext = new MainViewModel();
    }

    private void MyThumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        Canvas.SetLeft((UIElement)sender, Canvas.GetLeft((UIElement)sender) + e.HorizontalChange);
        Canvas.SetTop((UIElement)sender, Canvas.GetTop((UIElement)sender) + e.VerticalChange);
    }

最后我视图模型：

And finally my ViewModel:

    public class MainViewModel : DependencyObject 
{
    public ObservableCollection<Note> MyItems { get; set;}


    public MainViewModel()
    {
        MyItems = new ObservableCollection<Note>();
        MyItems.Add(new Note(){Name="test"});
    }

}

public class Note : INotifyPropertyChanged 
{
    public event PropertyChangedEventHandler PropertyChanged;

    private string name;

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            if(PropertyChanged!=null) PropertyChanged(this,new PropertyChangedEventArgs("Name"));
        }
    }


}

当我在窗口下正常工作：

When I do the following on the window it works fine:

  <Canvas>
        <Thumb Canvas.Left="0" Canvas.Top="0" Width="50" Height="50" DragDelta="MyThumb_DragDelta"/>            
    </Canvas>

但是，当我有它在一个ItemsControl它不再起作用。我假设的ItemsControl被注册为鼠标事件和覆盖拇指？

But when I have it in an ItemsControl it no longer works. I assume the ItemsControl is Registering for mouse events and overriding the Thumb?

任何人有一个很好的解决方案，使得到这个工作？

Anyone have a good solution to get getting this working?

推荐答案

奔我不认为这种做法曾在第一，但更多的尝试我得到它后，

Ben I didn't think that approach worked at first but after more experimenting I got it.

的问题可以归结为：Canvas.Top和Canvas.Left而在项控件不起作用。但你是正确的，因为风格是解决问题的办法。这里是我想出了解决办法：

The problem could be boiled down to: Canvas.Top and Canvas.Left don't work while in an items control. But you are correct that the style is the way to get around the problem. Here is the solution I came up with:

<ItemsControl ItemsSource="{Binding Notes}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Thumb Width="150" Height="150" DragDelta="Thumb_DragDelta" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

和代码隐藏：

 public partial class MainWindow : Window
{
    public ObservableCollection<Note> Notes { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        DataContext = this;

        Notes = new ObservableCollection<Note>();
        Notes.Add(new Note(){Title="test", X=100, Y=0});
    }

    private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        Note n = (Note)((FrameworkElement)sender).DataContext;
        n.X += e.HorizontalChange;
        n.Y += e.VerticalChange;
    }
}

public class Note : INotifyPropertyChanged
{
    private string title;
    private double x;
    private double y;

    public double Y
    {
        get { return y; }
        set
        {
            y = value;
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Y"));
        }
    }

    public double X
    {
        get { return x; }
        set
        {
            x = value;
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("X"));
        }
    }


    public string Title
    {
        get { return title; }
        set
        {
            title = value;
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Title"));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

这篇关于在WPF Dragable对象一个ItemsControl？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！