如何在我的“Metro Style”应用中使用WPF进行拖放操作?

5
我正在尝试创建一些原始的仿Windows Metro风格的应用程序。到目前为止,我已经在ObservableCollection中添加了新的磁贴,并且可以使用ContextMenu更改它们的颜色和删除它们。现在我想实现拖放,并且希望能够预览拖动(使用半透明的磁贴)。我尝试自己完成这个功能,使用了许多教程描述WPF中的DragDrop类,但我不得不承认我无法理解它,需要帮助。我尝试按照这个教程进行操作。这是我的应用程序的截图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>

实现DragDrop.Drag和DragDrop.Drop。您可以在项或重复控件中实现。我认为您需要升级到ListView,但ScrollViewer也可能支持它。我发现在项中实现更直接,但也更受限制。 - paparazzo
请查看MSDN Mag中的Charles Petzold文章。你应该能在那里找到答案。抱歉我不确定是哪一篇,请搜索2010年、2011年的问题。 - user1599544
1个回答

4
您可以尝试使用一些拖放框架来实现此功能,例如gong-wpf-dragdrop-
GongSolutions.Wpf.DragDrop库是WPF的拖放框架。它具有以下功能:
- 与MVVM一起使用:拖放的逻辑可以放置在ViewModel中。不需要将任何代码放置在CodeBehind中,而是使用附加属性绑定到ViewModel中的拖动处理程序/放置处理程序。 - 可以处理多个选择。 - 可以在同一控件内拖动数据以重新排序,或在控件之间拖动。 http://code.google.com/p/gong-wpf-dragdrop/ 重新排序就是您要寻找的内容...
如果您不想使用任何框架,那么我建议您阅读这些文章-

如何在数据绑定的ItemsControls之间拖放项目? || WayBack Link

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

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

拖放控件


我该如何在数据绑定的ItemsControls之间拖放项目?此链接已损坏。 - FosterZ
@FosterZ 感谢您指出这一点,我已经添加了一个 Wayback 链接来访问该页面的缓存版本。 - akjoshi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接