Silverlightクックブック：レシピをドラッグアンドドロップする

この記事では、このようなアプリケーションの例を使用して、ドラッグアンドドロップで作業を分析します。







アイデアは、すべてのユーザーのリストから、個人的に（ドラッグアンドドロップを使用して）ユーザーを2つのグループに分類できるということです。 さらに、否定的なカルマを持つユーザーはホワイトリストに追加できません。



しかし、ポイントに近い。 猫をお願いします。

だから、はじめに。

箱から出してすぐにドラッグアンドドロップ機能を使用して開始することはできません（すべてを自分で実装する必要があります）が、私たちの生活を楽にするために、MicrosoftのSilverlightチームの特別な訓練を受けた人は、 Silverlight Toolkitのすべてを既に実装しています 。

この機能は、いくつかの基本的なコントロール（ユーザーコントロール）のラッパーの形で、コントロールの名前+ DragDropTarget （ ListBoxの場合はListBoxDragDropTarget ）で表示されます。 ドラッグアンドドロップが実演されるのは、ListBoxまたはむしろ複数のListBoxの例です。

新しいSilverlightアプリケーションを作成しましょう。

私はそれをDragAndDropTestAppと呼びましたが、実際にはまったく問題ではありません。

次のダイアログボックスで、すべてをそのままにして[OK]をクリックします。



ツールキットへのリンクをすぐに追加します。







既にダウンロードおよびインストールされていると想定されます。



次の名前空間をMainPage.xamlに追加します。

xmlns:toolkit= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

xmlns:my= "clr-namespace:DragAndDropTestApp"

* All source code (under and below) was highlighted with Source Code Highlighter .

ツールキット上。 そして、アプリケーションが存在する名前空間。



xamlをスケッチします。

3つのリストはそれぞれ、次のマークアップで表されます。

< TextBlock

Text ="Users:"

Style ="{StaticResource Header}" />

< toolkit:ListBoxDragDropTarget

Grid . Row ="1"

HorizontalContentAlignment ="Stretch"

VerticalContentAlignment ="Stretch" >

< ListBox >

< ListBox.ItemTemplate >

< DataTemplate >

< my:UCUser />

</ DataTemplate >

</ ListBox.ItemTemplate >

</ ListBox >

</ toolkit:ListBoxDragDropTarget >

要素のリストのタイトルを含むTextBox（App.xamlで手を出したすべてのスタイルを含む）。 そして、実際には、ListBoxDragDropTargetにラップされたListBox自体。 ItemTemplateは、ユーザーを表示するために再定義されます。 UCUserは私自身のコントロールです。 内部には超自然的なものは何もありません、自分で見てください。

1. < グリッド
2. x：名前 = "LayoutRoot"
3. 背景 =「透明」 >
4. < Grid.ColumnDefinitions >
5. < ColumnDefinition Width = "Auto" />
6. < ColumnDefinition Width = "4 *" />
7. < ColumnDefinition Width = "6 *" />
8. </ Grid.ColumnDefinitions >
9. < Grid.RowDefinitions >
10. < RowDefinition Height = "Auto" />
11. < RowDefinition Height = "Auto" />
12. </ Grid.RowDefinitions >
13. < 画像
14. ソース = "../ Images / gnome_face_devilish.png"
15. 幅 = "48"
16. 高さ = "48"
17. マージン = " 15、0、20、0 "
18. グリッド RowSpan = "2" />
19. < TextBlock
20. テキスト =「ニックネーム：」
21. グリッド 列 = "1" />
22. < TextBlock
23. テキスト =「{バインディングパス=ニックネーム、モード= OneWay}」
24. グリッド 列 = "2"
25. FontWeight = "太字" />
26. < TextBlock
27. テキスト = "Karma："
28. グリッド 行 = "1"
29. グリッド 列 = "1" />
30. < TextBlock
31. テキスト =「{Binding Path = Karma、Mode = OneWay}」
32. グリッド 行 = "1"
33. グリッド 列 = "2"
34. FontWeight = "太字" />
35. </ グリッド >
    
    

ソースが画像に設定され、データバインディング（バインディング）が登録されます。

ところで、ユーザーには別のクラスがあります。 彼の見解は次のとおりです。

public class User

{

public string NickName { get ; set ; }

public int Karma { get ; set ; }

}

次に、各リストのコレクションを作成し、ユーザーの読み込みをシミュレートします。

1. パブリック 部分 クラス MainPage：UserControl
2. {
3. パブリック MainPage（）
4. {
5. InitializeComponent（）;
6. this .DataContext = this ;
7. InitializeCollections（）;
8. LoadUsers（）;
9. }
11. //コレクションを宣言します
12. public ObservableCollection <User> Users { get ; セット ; }
13. public ObservableCollection <User> WhiteList { get ; セット ; }
14. public ObservableCollection <User> BlackList { get ; セット ; }
16. //コレクションを初期化します
17. private void InitializeCollections（）
18. {
19. ユーザー= 新しい ObservableCollection <ユーザー>（）;
20. WhiteList = new ObservableCollection <User>（）;
21. BlackList = new ObservableCollection <User>（）;
22. }
24. // Usersコレクションへのデータの読み込みをシミュレートするメソッド
25. private void LoadUsers（）
26. {
27. var r = new Random （）;
29. //ランダムなカルマ値を持つ20人のユーザーを追加します。
30. for （ int i = 1; i <21; i ++）
31. {
32. var newUser = 新しいユーザー
33. {
34. NickName = "ユーザー名" + i
35. カルマ= r。次（200）-100
36. };
38. Users.Add（newUser）;
39. }
40. }
41. }

MainPageのDataContextとして、 MainPage自体をインストールします。 これは、データに簡単に添付できるようにするためです。 次のようになります。

< ListBox ItemsSource ="{Binding Path=Users, Mode=TwoWay}" >

ドラッグアンドドロップが機能するには、最後のタッチがありません。

AllowDrop ="True"

このプロパティをtrueに設定することにより、要素がドラッグアンドドロップを使用してデータを受け入れることができます。 さらに、ListBoxとListBoxDragDropTargetの両方にインストールできます。



起こったことは次のとおりです。







これで、ネガティブカルマを持つユーザーを任意のリストにドラッグできます。

計画によると、ホワイトリストへのドラッグを禁止する必要があります。



最初に、Drag-n-Drop'eのときに生成されるイベントを見てみましょう。







DragEnterは、ドラッグされたコンテナが宛先要素の境界を越えると発生します （DragOverイベントの前に発生します）。

DragLeave-ドラッグされたコンテナはソース要素からプルされました。

DragOver-ドラッグされたコンテナが宛先要素上を移動すると起動します。

ドロップ -ドラッグされたコンテナは、宛先要素に「ドロップ」されました。



ホワイトリストのDragEnterイベントハンドラーを追加します 。

1. < ツールキット：ListBoxDragDropTarget
2. AllowDrop = "True"
3. グリッド 行 = "1"
4. グリッド 列 = "1"
5. Horizo​​ntalContentAlignment = "ストレッチ"
6. VerticalContentAlignment = "ストレッチ"
7. DragEnter = "ListBoxDragDropTarget_DragEnter" >
8. < リストボックス
9. ItemsSource = "{Binding Path = WhiteList、Mode = TwoWay}"
10. x：名前 = "lbWhiteList" >
11. < ListBox.ItemTemplate >
12. < DataTemplate >
13. < my：UCUser />
14. </ DataTemplate >
15. </ ListBox.ItemTemplate >
16. </ リストボックス >
17. </ ツールキット：ListBoxDragDropTarget >

そして、ListBoxに名前を付けると、便利になります。



ハンドラー自体：

1. private void ListBoxDragDropTarget_DragEnter（ object sender、Microsoft.Windows.DragEventArgs e）
2. {
3. //形式を見つけました
4. var dataFormat = e.Data.GetFormats（）[0];
6. // ItemDragEventArgs形式のオブジェクトを取得しました
7. var dragEventArgs = e.Data.GetData（dataFormat） as ItemDragEventArgs;
9. //ドラッグ可能なアイテムのコレクションを取得しました
10. SelectionCollection sc = SelectionCollection としての dragEventArgs.Data;
12. //コレクション内の各アイテムを確認します
13. foreach （scのvar item）
14. {
15. //ドラッグされたアイテム（ユーザー）の少なくとも1つに負のカルマがある場合
16. //これらのアイテムをホワイトリストに追加することを禁止します。
17. if （（item.Item as User）.Karma <0）
18. {
19. lbWhiteList.AllowDrop = false ;
20. 休憩 ;
21. }
22. }
23. }

DragEventArgs.Dataは、対応するドラッグイベントに関連付けられたデータを含むIDataObjectを返します。 ただし、データに直接アクセスすることはできず、非公開としてマークされます。







このデータを取得するには、 GetData（）メソッドを使用します。このメソッドは、パラメーターとして渡された形式でデータを返します（形式は文字列または型として指定できます）。 また、 GetFormats（）メソッドを使用してフォーマットを確認できます。



結果は、 ItemDragEventArgsクラスのインスタンスです。 このクラスには、UIElementのドラッグイベントを記述する情報が含まれます。 既にドラッグ可能なコンテナに直接関連付けられているDataプロパティがあります。 このオブジェクトをSelectionCollectionに持ってきます。

ここでは、複数のアイテムを一度にドラッグアンドドロップできるため、コレクションが使用されます。

（これは非常に簡単に確認できます。ListBoxの場合、 SelectionModeプロパティをMultipleに設定します）。

コレクション全体を実行し、ドラッグされたユーザーの中に否定的なカルマを持つ人がいるかどうかを確認することは残っています。 ある場合は、ホワイトリストに「ドロップ」することを禁止します。



MouseLeaveイベントハンドラーでAllowDropを以前の値（True）に戻すことができます。



最後に、ドラッグアンドドロップを使用して単一のリスト内のアイテムを並べ替える機能を実現するには、 ItemsPanelのテンプレートを再定義するだけで十分です 。

< ListBox.ItemsPanel >

< ItemsPanelTemplate >

< StackPanel />

</ ItemsPanelTemplate >

</ ListBox.ItemsPanel >

ここからプロジェクトをダウンロードできます。