このチュートリアルでは、NetAdvantage for Silverlight Line of Business のドラッグ アンド ドロップ フレームワークの使用方法を紹介します。
NetAdvantage for Silverlight Line of Business (LOB) 2009 vol. 2 でドラッグ アンド ドロップ フレームワークが導入されました。 たとえば項目をドラッグ可能にしたり、領域をドロップ可能にしたりといった設定ができます。ユーザーがドラッグ可能な項目をクリックしてドラッグし、ドロップ可能な領域にドロップすることができます。以下は、ドラッグ アンド ドロップ フレームワークを理解する上で重要な用語です。
始めに 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 プロパティは画像の名前と位置によって違います。
<!-- ソースのグリッド --> <StackPanel Orientation="Vertical"> <Grid Name="SourceGrid" Height="200" Width="600"> <Border Name="SourceBorder" BorderThickness="2" BorderBrush="Black"> <StackPanel Name="SourcePanel" Orientation="Horizontal"> <Image Name="SearchSource" Source="images/Search128.png" > <!-- ドラッグの有効化 --> </Image> <Rectangle Height="200" Width="200" Fill="White" /> <Image Name="SettingsSource" Source="images/Settings128.png" > <!-- ドラッグの有効化 --> </Image> </StackPanel> </Border> </Grid> <!-- ターゲットのグリッド --> </StackPanel>
<!-- ソースのグリッド -->
<StackPanel Orientation="Vertical">
<Grid Name="SourceGrid" Height="200" Width="600">
<Border Name="SourceBorder" BorderThickness="2" BorderBrush="Black">
<StackPanel Name="SourcePanel" Orientation="Horizontal">
<Image Name="SearchSource" Source="images/Search128.png" >
<!-- ドラッグの有効化 -->
</Image>
<Rectangle Height="200" Width="200" Fill="White" />
<Image Name="SettingsSource" Source="images/Settings128.png" >
</StackPanel>
</Border>
</Grid>
<!-- ターゲットのグリッド -->
最初の StackPanel にコンテンツを垂直方向へ追加します。SourceGrid では、SourceBorder (境界線) と SourcePanel があります。この SourcePanel では、水平方向に2 つのアイコンを配置しています。加えて、アイコンの間にスペースを入れるためにRectangle (矩形) を 1 つ追加しました。緑のテキストはコードのセクションを説明するコメントです。
アプリケーションを実行すると、以下の画像のようなグリッドを表示します。
5. 画像のドラッグ機能を有効にします。
<dragdrop:DragDropManager.DragSource>
<dragdrop:DragSource IsDraggable="True" DragChannels="SearchChannel" Drop="DragSource_Drop" />
</dragdrop:DragDropManager.DragSource>
<dragdrop:DragSource IsDraggable="True" DragChannels="SettingsChannel" Drop="DragSource_Drop" />
上のコードでは、画像をドラッグ可能に設定します。 DragChannels プロパティはドロップ可能な位置を定義します。以下の手順ではドロップ位置を定義します。Drop プロパティは、項目をドロップするときに発生するイベントを指定します。このイベントはまだ定義されていないため、ここで実行するとエラーを発生します。イベントは後ほど定義します。
6. 次は、ターゲットになるグリッドの定義です。以下のコードを垂直方向の StackPanel の間で SourceGrid タグの下に追加します。
<!-- ターゲットのグリッド --> <Grid Name="SearchGrid" Height="200" Width="600"> <Border Name="SearchBorder" BorderThickness="2" BorderBrush="Blue"> <StackPanel Name="SearchPanel" Orientation="Horizontal"> <!-- ドロップの有効化 --> <TextBlock Text="ここに検索アイコンをドラッグしてください。" /> </StackPanel> </Border> </Grid> <Grid Name="SettingsGrid" Height="200" Width="600"> <Border Name="SettingsBorder" BorderThickness="2" BorderBrush="Green" > <StackPanel Name="SettingsPanel" Orientation="Horizontal"> <!-- ドロップの有効化 --> <TextBlock Text="ここに設定アイコンをドラッグしてください。" /> </StackPanel> </Border> </Grid>
<Grid Name="SearchGrid" Height="200" Width="600">
<Border Name="SearchBorder" BorderThickness="2" BorderBrush="Blue">
<StackPanel Name="SearchPanel" Orientation="Horizontal">
<!-- ドロップの有効化 -->
<TextBlock Text="ここに検索アイコンをドラッグしてください。" />
<Grid Name="SettingsGrid" Height="200" Width="600">
<Border Name="SettingsBorder" BorderThickness="2" BorderBrush="Green" >
<StackPanel Name="SettingsPanel" Orientation="Horizontal">
<TextBlock Text="ここに設定アイコンをドラッグしてください。" />
7. これらの領域でドロップ機能を有効にします。画像は、DragChannels と DropChannels プロパティに基づいて特定の領域にドロップすることができます。
<dragdrop:DragDropManager.DropTarget>
<dragdrop:DropTarget IsDropTarget="True" DropChannels="SearchChannel" />
</dragdrop:DragDropManager.DropTarget>
<dragdrop:DropTarget IsDropTarget="True" DropChannels="SettingsChannel" />
項目をドロップできる場合、その項目の 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 のみにドロップすることができます。
Drop イベントのハンドラーのように、DragStart または DragOver などのイベントをカスタム コードで処理できます。
詳細について、この機能を使用する以下のサンプルリンクを参照してください。Windowless モードを有効にして、ドラッグ アンド ドロップ フレームワークのサンプルがご覧いただけます。
http://labs.infragistics.com/silverlight/lobsamples/2009.2_jp/