ItemsControl Drag and Drop - PullRequest
Новая
       15

ItemsControl Drag and Drop

11 голосов
/ 21 августа 2010

У меня есть ItemsControl с DataTemplate, который связан с ObservableCollection целых чисел. 

<ItemsControl Name="DimsContainer" ItemTemplate="{StaticResource DimensionsTemplate}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
</ItemsControl>

И в ресурсах Windows: 

<Window.Resources>
    <DataTemplate x:Key="DimensionsTemplate" >
        <TextBlock Text="{Binding}"
                       Padding="5"
                       VerticalAlignment="Center"
                       FontSize="32"/>
    </DataTemplate>
</Window.Resources>

Я пытаюсь реализовать возможность перетаскивания элементов в ItemsControl (то есть, чтобы иметь возможность переупорядочивать целые числа). У кого-нибудь есть простой пример, как это сделать? Я подключил события PreviewMouseMove, DragEnter и Drop. Проблема в том, что я не могу понять, как определить, какой элемент перетаскивается и куда он перетаскивается. Кажется, что весь ItemsControl передается в события.

1 Ответ

7 голосов
/ 12 мая 2016

Вот пример того, как я это сделал.

XAML: 

<Window.DataContext>
    <local:MyViewModel />
</Window.DataContext>

<Grid>
    <ScrollViewer>
        <ListView ItemsSource="{Binding MyData}" HorizontalAlignment="Stretch" Name="listview" ScrollViewer.PanningMode="VerticalOnly">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}"
                        Command="{Binding DataContext.MyCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                        CommandParameter="{Binding}"
                        Margin="5 2" Width="150" Height="50"
                        FontSize="30" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Resources>
                <Style TargetType="Button">
                    <EventSetter Event="PreviewMouseMove" Handler="PreviewMouseMove" />                        
                    <EventSetter Event="Drop" Handler="Drop" />                       
                    <Setter Property="AllowDrop" Value="True" />                        
                </Style>
            </ListView.Resources>
        </ListView>
    </ScrollViewer>
</Grid>

ViewModel: 

 class MyViewModel
{
    public MyViewModel()
    {
        MyCommand = new ICommandImplementation();
    }

    public ObservableCollection<string> MyData
    {
        get
        {
            return new ObservableCollection<string>(new string[]{
            "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", 
            "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty"
            });
        }
    }

    public ICommand MyCommand { get; private set; }

    private class ICommandImplementation : ICommand
    {
        public bool CanExecute(object parameter) { return true; }
        public event EventHandler CanExecuteChanged;
        public void Execute(object parameter) { System.Windows.MessageBox.Show("Button clicked! " + (parameter ?? "").ToString()); }
    }
}

События: 

 private void Drop(object sender, DragEventArgs e)
    {
        var source = e.Data.GetData("Source") as string;
        if (source != null)
        {
            int newIndex = listview.Items.IndexOf((sender as Button).Content);
            var list = listview.ItemsSource as ObservableCollection<string>;
            list.RemoveAt(list.IndexOf(source));
            list.Insert(newIndex, source);
        }
    }

    private void PreviewMouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            Task.Factory.StartNew(new Action(() =>
                {
                    Thread.Sleep(500);
                    App.Current.Dispatcher.BeginInvoke(new Action(() =>
                        {
                            if (e.LeftButton == MouseButtonState.Pressed)
                            {                                    
                                var data = new DataObject();
                                data.SetData("Source", (sender as Button).Content);
                                DragDrop.DoDragDrop(sender as DependencyObject, data, DragDropEffects.Move);
                                e.Handled = true;
                            }
                        }), null);
                }), CancellationToken.None);
        }           
    }

Приведенный выше пример немногосложная причина, каждый элемент list - это Button, а на Button click я также должен сделать какое-то действие. Ваш случай относительно прост.

Drag & Drop может сбить с толку многих разработчиков.Но ниже приведены некоторые ключевые моменты, как это сделать:

  1. Используйте событие PreviewMouseMove, чтобы фактически запустить перетаскивание, а в обработчике используйте событие DragDrop.DoDragDrop, чтобы вызвать DragDrop связанные события иCursors.sender Аргумент - это элемент, который в настоящее время захватил мышь, в этом случае UIElement, который перетаскивается.

  2. Используйте событие DragEnter & DragOver, если хотите изменитьвизуальный элемент, над которым в данный момент перетаскивается Mouse.sender Аргумент - это элемент, который в данный момент перетаскивал / только что закончил ситуацию перетаскивания.

  3. Используйте событие Drop для обработки отброшенного элемента.sender Аргумент - это элемент, на котором произошло отбрасывание.

  4. Использование объекта DataObject для передачи информации между этими событиями.SetData метод класса используется для добавления данных в этом.Этот метод имеет два аргумента, и они работают как пара key-value.После установки вы можете получить эти данные в следующем вызываемом событии DragDrop, используя метод GetData, передав в качестве аргумента key.(т.е. e.Data.GetData("Source"))

Здесь - относительный пост.

...