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

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

トップ 10 投稿者 
女性
投稿 22
IG Employee

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

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

  1. ドラッグされる項目は「ソース項目」です。
  2. 項目をドロップする位置は「ターゲット位置」です。
  3. ドラッグ可能な項目は「DragSource」です。
  4. ドロップ可能な領域は「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 プロパティは画像の名前と位置によって違います。

<!-- ソースのグリッド -->

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

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

 

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

<StackPanel Name="SourcePanel" Orientation="Horizontal">

<Image Name="SearchSource" Source="images/Search128.png" >

  <!-- ドラッグの有効化 -->

    <dragdrop:DragDropManager.DragSource>

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

    </dragdrop:DragDropManager.DragSource>

  </Image>

  <Rectangle Height="200" Width="200" Fill="White" />

<Image Name="SettingsSource" Source="images/Settings128.png" >

  <!-- ドラッグの有効化 -->

    <dragdrop:DragDropManager.DragSource>

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

    </dragdrop:DragDropManager.DragSource>

  </Image>

</StackPanel>

上のコードでは、画像をドラッグ可能に設定します。 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>

 

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

<!-- ターゲットのグリッド -->

  <Grid Name="SearchGrid" Height="200" Width="600">

    <Border Name="SearchBorder" BorderThickness="2" BorderBrush="Blue">

      <StackPanel Name="SearchPanel" Orientation="Horizontal">

        <!-- ドロップの有効化 -->

        <dragdrop:DragDropManager.DropTarget>

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

        </dragdrop:DragDropManager.DropTarget>

        <TextBlock Text="ここに検索アイコンをドラッグしてください。" />

      </StackPanel>

    </Border>

  </Grid>

  <Grid Name="SettingsGrid" Height="200" Width="600">

    <Border Name="SettingsBorder" BorderThickness="2" BorderBrush="Green" >

      <StackPanel Name="SettingsPanel" Orientation="Horizontal">

        <!-- ドロップの有効化 -->

        <dragdrop:DragDropManager.DropTarget>

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

        </dragdrop:DragDropManager.DropTarget>

        <TextBlock Text="ここに設定アイコンをドラッグしてください。" />

      </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 のみにドロップすることができます。

 

Drop イベントのハンドラーのように、DragStart または DragOver などのイベントをカスタム コードで処理できます。

 

詳細について、この機能を使用する以下のサンプルリンクを参照してください。Windowless モードを有効にして、ドラッグ アンド ドロップ フレームワークのサンプルがご覧いただけます。

http://labs.infragistics.com/silverlight/lobsamples/2009.2_jp/

 

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン