Làm cách nào để kéo và thả trong WPF trong ứng dụng "Metro Style" của tôi?

Question

Tôi đang cố gắng tạo ra một số giả sơ khai về ứng dụng kiểu Windows Metro. Những gì tôi đã làm cho đến nay là thêm các ô mới vào cửa sổ trong ObservableCollection, tôi có thể thay đổi màu của chúng và xóa chúng bằng cách sử dụng ContextMenu. Bây giờ tôi muốn làm Drag và Drop với xem trước thực tế kéo (với gạch bán trong suốt). Tôi đã cố gắng để làm điều đó một mình bằng cách sử dụng nhiều hướng dẫn mô tả lớp DragDrop trong WPF nhưng tôi phải thừa nhận tôi chỉ không thể hiểu được nó và tôi cần sự giúp đỡ. Tôi đã cố gắng làm theo: this tutorial. Dưới đây là một screenshot của ứng dụng của tôi: Và mã của tôi:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 
using System.Collections.ObjectModel; 

namespace Metro_Pawel_Michna 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     private ObservableCollection<myButton> _tiles = new ObservableCollection<myButton>(); 
     Random r = new Random(); 
     private int index = -1; 
     private List<Color> myColors = new List<Color>(); 
     public MainWindow() 
     { 
      InitializeComponent(); 
      this.DataContext = _tiles; 
      webBrowser.Visibility = Visibility.Collapsed; 
      btnClose.Visibility = Visibility.Collapsed; 
      myColors.Add(Colors.DarkCyan); 
      myColors.Add(Colors.Black); 
      myColors.Add(Colors.DarkGoldenrod); 
      myColors.Add(Colors.DarkBlue); 
      myColors.Add(Colors.DarkGray); 
      myColors.Add(Colors.DarkKhaki); 
     } 

     private void btnAdd_Click(object sender, RoutedEventArgs e) 
     { 
      myButton b = new myButton(); 
      b.Content = txtUrl.Text; 
      b.MouseDoubleClick += new MouseButtonEventHandler(tileDbl_Click); 
      b.MouseRightButtonUp += new MouseButtonEventHandler(b_MouseRightButtonUp); 

      Color random = new Color(); 
      int losuj = r.Next(6); 
      b.colorIndex = losuj; 

      random = myColors.ElementAt(losuj); 

      LinearGradientBrush lgb = new LinearGradientBrush(Colors.White, random, 45); 
      lgb.StartPoint = new Point(-0.5,-0.5); 
      lgb.EndPoint = new Point(1, 1); 
      b.Background = lgb; 
      _tiles.Add(b); 
     } 

     private void tileDbl_Click(object sender, RoutedEventArgs e) 
     { 
      const string http = "http://"; 
      const string https = "https://"; 
      string address = (sender as Button).Content.ToString(); 

      if (String.Compare(http, 0, address, 0, 6) == 0 && address.Length > 7) webBrowser.Navigate(address); 
      else if (String.Compare(https, 0, address, 0, 7) == 0 && address.Length > 8) webBrowser.Navigate(address); 
      else webBrowser.Navigate("http://www.google.com/search?q=" + address); 

      tilesBox.Visibility = Visibility.Collapsed; 
      btnClose.Visibility = Visibility.Visible; 
      txtUrl.Visibility = Visibility.Collapsed; 
      btnAdd.Visibility = Visibility.Collapsed; 
      toolbar.HorizontalAlignment = HorizontalAlignment.Right; 
      webBrowser.Visibility = Visibility.Visible; 
     } 

     private void btnClose_Click(object sender, RoutedEventArgs e) 
     { 
      tilesBox.Visibility = Visibility.Visible; 
      btnClose.Visibility = Visibility.Collapsed; 
      txtUrl.Visibility = Visibility.Visible; 
      btnAdd.Visibility = Visibility.Visible; 
      toolbar.HorizontalAlignment = HorizontalAlignment.Left; 
      webBrowser.Visibility = Visibility.Collapsed; 
     } 

     private void Remove_Click(object sender, RoutedEventArgs e) 
     { 
      _tiles.RemoveAt(index); 
     } 

     private void b_MouseRightButtonUp(object sender, RoutedEventArgs e) 
     { 
      index = _tiles.IndexOf(sender as myButton); 
     } 

     private void ChangeColor_Click(object sender, RoutedEventArgs e) 
     { 
      myButton b = _tiles.ElementAt(index); 
      LinearGradientBrush lgb; 
      if (b.colorIndex != myColors.Count - 1) 
       lgb = new LinearGradientBrush(Colors.White, myColors.ElementAt(++b.colorIndex), 45); 
      else 
      { 
       lgb = new LinearGradientBrush(Colors.White, myColors.ElementAt(0), 45); 
       b.colorIndex = 0; 
      } 
      lgb.StartPoint = new Point(-0.5, -0.5); 
      lgb.EndPoint = new Point(1, 1); 
      b.Background = lgb; 
     } 
    } 
} 

XAML:

<Window x:Class="Metro_Pawel_Michna.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:Metro_Pawel_Michna="clr-namespace:Metro_Pawel_Michna" 
     Title="MainWindow" Height="350" Width="525" MinWidth="180" MinHeight="200"> 
    <DockPanel LastChildFill="True"> 
     <ToolBarTray Name="toolbar" DockPanel.Dock="Top"> 
      <ToolBar> 
       <TextBox Name="txtUrl">Type an URL</TextBox> 
       <Button Name="btnAdd" Click="btnAdd_Click">Add</Button> 
       <Button Name="btnClose" Click="btnClose_Click">Close</Button> 
      </ToolBar> 
     </ToolBarTray> 
     <WebBrowser Height="auto" Name="webBrowser" Width="auto" /> 
     <ScrollViewer> 
      <ItemsControl Name="tilesBox" ItemsSource="{Binding}"> 
       <ItemsControl.ContextMenu> 
        <ContextMenu Name="contextMenu"> 
         <MenuItem Header="Remove" Click="Remove_Click"/> 
         <MenuItem Header="Change color" Click="ChangeColor_Click"/> 
        </ContextMenu> 
       </ItemsControl.ContextMenu> 
       <ItemsControl.Resources> 
        <Style TargetType="{x:Type Metro_Pawel_Michna:myButton}"> 
         <Setter Property="Width" Value="120"/> 
         <Setter Property="Height" Value="120"/> 
         <Setter Property="Margin" Value="10"/> 
         <Setter Property="Foreground" Value="White" /> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate> 
            <Grid> 
             <Rectangle Fill="{TemplateBinding Background}" /> 
             <ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
            </Grid> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ItemsControl.Resources> 

       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
     </ScrollViewer> 

    </DockPanel> 

</Window> 

Answer 1

Bạn có thể thử sử dụng một số Kéo & khung Drop để thực hiện chức năng này, giống như chiêng-WPF-DragDrop -

Thư viện GongSolutions.Wpf.DragDrop là khung kéo và thả cho WPF. Nó có các tính năng sau:

• Làm việc với MVVM: logic cho kéo và thả có thể được đặt trong ViewModel. Không cần mã nào được đặt trong codebehind, thay vào đó, các thuộc tính đính kèm được sử dụng để liên kết với trình xử lý kéo/thả kéo trong một ViewModel.
• Làm việc với nhiều lựa chọn.
• Có thể kéo dữ liệu trong cùng một điều khiển để sắp xếp lại hoặc giữa các điều khiển.

http://code.google.com/p/gong-wpf-dragdrop/

sắp xếp lại là những gì bạn đang tìm kiếm ...

Trong trường hợp bạn không muốn sử dụng bất kỳ khuôn khổ sau đó tôi sẽ đề nghị bạn phải trải qua những bài viết này -

How can I drag and drop items between data bound ItemsControls? || WayBack Link

http://www.codeproject.com/Articles/37161/WPF-Drag-and-Drop-Smorgasbord

và đi qua mã nguồn của một số kiểm soát việc thực hiện kéo thả & -

Drag and Drop Controls