2013年06月30日

WPFサンプル:独自のドラッグ&ドロップの機能を実現する

   このエントリーをはてなブックマークに追加 Clip to Evernote
アプリケーション独自のドラッグ&ドロップの機能を実現するには、DragDropクラスを利用します。 以下、簡単なサンプルを示します。このサンプルは、

(1) TextBlockをButtonにドラッグ&ドロップすると、TextBlockのTextの内容が、ButtonのContentに複写される
(2) 左側のImageを右側のImageにドラッグ&ドロップすると左側の画像が右側のImageに複写される
(3) 左側のImageを上部 TextBlockにドラッグ&ドロップするとイメージのサイズが表示される

という3つのドラッグ&ドロップを実装しています。
以下、実行画面です。

■TextBlockをButtonにD&Dする実行例
CustomDD1
CustomDD2
CustomDD3

■左の画像を右の画像にD&Dする実行例
CustomDD4
CustomDD5
CustomDD6

■左の画像をTextBlockにD&Dする実行例
CustomDD7
CustomDD8
CustomDD9

(1)については、前回のサンプルと似ていますが、こちらは、MouseDown, DargOverといったイベントも 拾ってより実際的なコードとしています。button1_DragOverイベントハンドラで、文字列だけを受け取るようにしています。

(2)においては、image2_DragOverイベントハンドラで、右側のImageでは、TextBlockからのドラッグ&ドロップを受け取らないようにしています。

3つの例とも実用的なものではありませんが、ドラッグ&ドロップの基礎を知るサンプルとして利用できると重います。

C#のコードをお見せします。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace DragDropCustomSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private void textBlock1_MouseDown(object sender, MouseButtonEventArgs e) {
            var textBlock = sender as TextBlock;
            DragDrop.DoDragDrop(textBlock, textBlock.Text, DragDropEffects.Copy);
        }

        private void textBlock1_Drop(object sender, DragEventArgs e) {
            ImageSource image = e.Data.GetData(typeof(ImageSource)) as ImageSource ;
            if (image != null) {
                TextBlock tb = sender as TextBlock;
                tb.Text = string.Format("{0:#.0} * {1:#.0}" , image.Width, image.Height);
            }
        }

        private void button1_DragOver(object sender, DragEventArgs e) {
            if (e.Data.GetDataPresent(DataFormats.Text))
                e.Effects = DragDropEffects .Copy;
            else
                e.Effects = DragDropEffects .None;
        }

        private void button1_Drop(object sender, DragEventArgs e) {
            (sender as Button).Content = e.Data.GetData(DataFormats.Text);
        }

        private void Image_MouseDown(object sender, MouseButtonEventArgs e) {
            var image = sender as Image;
            DataObject data = new DataObject(typeof(ImageSource ), image.Source);
            DragDrop.DoDragDrop(image, data, DragDropEffects.Copy);
        }

        private void Image_Drop(object sender, DragEventArgs e) {
            ImageSource image = e.Data.GetData(typeof(ImageSource)) as ImageSource;
            Image target = sender as Image;
            target.Source = image;
        }

        private void image2_DragOver(object sender, DragEventArgs e) {
            ImageSource image = e.Data.GetData(typeof(ImageSource)) as ImageSource;
            if (image != null )
                e.Effects = DragDropEffects .Copy;
            else
                e.Effects = DragDropEffects .None;
        }
    }
}

最後に、XAMLを示します。こちらは特筆すべきところはありません。

<Window x:Class="DragDropCustomSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Height="21"  Width="Auto" Text="Sample Text"
                   AllowDrop="True" HorizontalAlignment="Center" 
                   MouseDown="textBlock1_MouseDown" Drop="textBlock1_Drop" />
        <Button Grid.Column="1"  Content="Button" Height="23"
                Width="98" AllowDrop="True"
                DragOver="button1_DragOver" Drop="button1_Drop" />
        <Image Grid.Row="1" Grid.Column="0" Height="Auto" Width="60"
               Source="Castle.jpg" AllowDrop="True" MouseDown="Image_MouseDown" />
        <Image Grid.Row="1" Grid.Column="1" Height="100" Width="100"
               Opacity="1" Source="Leaf.jpg" AllowDrop="True"
               DragOver="image2_DragOver"  Drop="Image_Drop" />
    </Grid>
</Window>


WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52326681