c# - 如何在我的 "Metro Style"应用程序中拖放 WPF？

Question

我正在尝试创建一些 Windows Metro 风格应用程序的原始模仿。到目前为止，我所做的是向 ObservableCollection 中的窗口添加新的图 block ，我可以更改它们的颜色并使用 ContextMenu 删除它们。现在我想通过实际预览拖动(使用半透明图 block )来进行拖放。我尝试使用许多描述 WPF 中的 DragDrop 类的教程自己完成它，但我不得不承认我无法理解它，我需要帮助。我试着关注:this tutorial .这是一个 screenshot我的应用程序: 还有我的代码:

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

您可以尝试使用一些拖放框架来实现此功能，例如 gong-wpf-dragdrop -

The GongSolutions.Wpf.DragDrop library is a drag'n'drop framework for WPF. It has the following features:

• Works with MVVM : the logic for the drag and drop can be placed in a ViewModel. No code needs to be placed in codebehind, instead attached properties are used to bind to a drag handler/drop handler in a ViewModel.
• Works with multiple selections.
• Can drag data within the same control to re-order, or between controls.

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

重新排序就是你要找的...

如果您不想使用任何框架，那么我建议您阅读这些文章 -

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

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

并查看一些实现拖放的控件的源代码 -

Drag and Drop Controls