ドラッグアンドドロップフレームワークチュートリアル

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

投稿 22

返信

エリザベス・アルバート 投稿済み： 2010/1/8 4:56

0 ユーザーが評価

このチュートリアルでは、NetAdvantage for Silverlight Line of Business のドラッグアンドドロップフレームワークの使用方法を紹介します。

NetAdvantage for Silverlight Line of Business (LOB) 2009 vol. 2 でドラッグアンドドロップフレームワークが導入されました。たとえば項目をドラッグ可能にしたり、領域をドロップ可能にしたりといった設定ができます。ユーザーがドラッグ可能な項目をクリックしてドラッグし、ドロップ可能な領域にドロップすることができます。以下は、ドラッグアンドドロップフレームワークを理解する上で重要な用語です。

ドラッグされる項目は「ソース項目」です。
項目をドロップする位置は「ターゲット位置」です。
ドラッグ可能な項目は「DragSource」です。
ドロップ可能な領域は「DropTarget」です。

始めに DragSource と DropTarget を定義する必要があります。DragSource と DropTarget の互換性を識別するために、DragChannels と DropChannels を設定します。DragSource は DropTarget と同じチャネルがある場合にドラッグアンドドロップできます。一致しない場合はドロップできません。

以下の例では、画像はグリッド内の StackPanel にドロップできます。

1. 新しい Silverlight アプリケーションを作成します。

2. Silverlight (.Web プロジェクトでない) プロジェクトで「images」または「画像」のフォルダーを作成して、画像を追加します。この例では、NetAdvantage Icons の画像を使用しますが、他の画像を使用することもできます。また、.gif 形式の画像はサポートされないことに注意してください。

3. プロジェクトの「参照設定」フォルダーで Infragistics.Silverlight.DragDrop.v9.2 アセンブリを追加します。その後、MainPage.xaml の上に UserControl タグで名前空間宣言を追加します。

xmlns:dragdrop="clr-namespace:Infragistics.Silverlight;assembly=Infragistics.Silverlight.DragDrop.v9.2"

4. 画像を表示するためにMainPage.xaml の Grid (LayoutRoot) タグの間に以下のコードを追加します。Image (画像) の Source プロパティは画像の名前と位置によって違います。

</Image>

</Image>

</StackPanel>

</Border>

</Grid>

</StackPanel>

最初の StackPanel にコンテンツを垂直方向へ追加します。SourceGrid では、SourceBorder (境界線) と SourcePanel があります。この SourcePanel では、水平方向に2 つのアイコンを配置しています。加えて、アイコンの間にスペースを入れるためにRectangle (矩形) を 1 つ追加しました。緑のテキストはコードのセクションを説明するコメントです。

アプリケーションを実行すると、以下の画像のようなグリッドを表示します。

5. 画像のドラッグ機能を有効にします。

<dragdrop:DragDropManager.DragSource>

<dragdrop:DragSource IsDraggable="True" DragChannels="SearchChannel" Drop="DragSource_Drop" />

</dragdrop:DragDropManager.DragSource>

</Image>

<dragdrop:DragDropManager.DragSource>

<dragdrop:DragSource IsDraggable="True" DragChannels="SettingsChannel" Drop="DragSource_Drop" />

</dragdrop:DragDropManager.DragSource>

</Image>

</StackPanel>

上のコードでは、画像をドラッグ可能に設定します。 DragChannels プロパティはドロップ可能な位置を定義します。以下の手順ではドロップ位置を定義します。Drop プロパティは、項目をドロップするときに発生するイベントを指定します。このイベントはまだ定義されていないため、ここで実行するとエラーを発生します。イベントは後ほど定義します。

6. 次は、ターゲットになるグリッドの定義です。以下のコードを垂直方向の StackPanel の間で SourceGrid タグの下に追加します。

</StackPanel>

</Border>

</Grid>

</StackPanel>

</Border>

</Grid>

7. これらの領域でドロップ機能を有効にします。画像は、DragChannels と DropChannels プロパティに基づいて特定の領域にドロップすることができます。

<dragdrop:DragDropManager.DropTarget>

<dragdrop:DropTarget IsDropTarget="True" DropChannels="SearchChannel" />

</dragdrop:DragDropManager.DropTarget>

</StackPanel>

</Border>

</Grid>

<dragdrop:DragDropManager.DropTarget>

<dragdrop:DropTarget IsDropTarget="True" DropChannels="SettingsChannel" />

</dragdrop:DragDropManager.DropTarget>

</StackPanel>

</Border>

</Grid>

項目をドロップできる場合、その項目の DragChannels プロパティはターゲット領域の DropChannels プロパティと一致する必要があります。別のチャネルがあって、特定のアイコンが 1 つのみの領域にドロップできます。

8. [表示] -> [コード] をクリックして、MainPage.xaml.cs ページを開きます。項目をドロップするときに発生するイベントの DragSource_Drop イベントハンドラーを作成します。以下のコードを MainPage() メソッドの下に追加します。

private void DragSource_Drop(object sender, Infragistics.Silverlight.DropEventArgs e)

{

// ドラッグした Image をコピーします

Image imageCopy = (Image)e.DragSource;

// Image をソースグリッドから削除します

Panel parentPanel = (Panel)((FrameworkElement)e.DragSource).Parent;

parentPanel.Children.Remove(e.DragSource);

// コピーした Image をターゲットパネルに追加します

((Panel)e.DropTarget).Children.Add(imageCopy);

}

9. アプリケーションを保存して実行します。

検索アイコンを SearchPanel にドロップできます。また、設定アイコンは SettingsPanel にドロップすることもできます。

検索アイコンは SettingsPanel にドロップできません。また、設定アイコンを SearchPanel にドロップすることもできません。

検索アイコンは SearchChannel のみを対象します。SearchSource の DragChannels や SearchPanel の DropChannels は SearchChannel に設定されます。そのため、検索アイコンは SearchPanel のみにドロップすることができます。