バージョン

Infragistics Drag and Drop Framework を使用した作業の開始

始める前に

このトピックではユーザーができるだけ早く Infragistics Drag and Drop Framework ライブラリの実行ができるよう、WPF アプリケーション内でドラッグ アンド ドロップ機能を実装するために必要な基本手順について説明します。

達成すること

ソース パネルから xamPieChart コントロールをドラッグして対象パネルにドロップします。

次の手順を実行します

  1. Microsoft® WPF™ プロジェクトを作成します。

  2. ソリューション エクスプローラーで以下の NuGet パッケージ参照をプロジェクトに追加します。NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。

    • Infragistics.WPF.DragDrop

    • Infragistics.WPF.Charts

  1. 開始 UserControl タグに Drag and Drop Framework の名前空間宣言を追加します。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

  1. xamPieChart コントロールによって視覚化されるサンプル データを提供します。この例は、開発者に提供された DataUtil クラスを使用します。

XAML の場合:

<UserControl.DataContext>
    <local:DataUtil x:Name="Data"/>
</UserControl.DataContext>

  1. 2 つの行定義を "LayoutRoot" という名前のグリッド コンテナーに追加します。

XAML の場合:

<Grid x:Name="LayoutRoot">    <Grid.RowDefinitions>
        <RowDefinition Height="400" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!-- TODO: Add the source and target StackPanels here. -->
</Grid>

  1. ドラッグされる xamPieChart コントロールを保持する最初の StackPanel コンテナーを追加します。

注: マウス イベントが処理されるようにするため、背景色を StackPanel に追加する必要があります。

XAML の場合:

<StackPanel Grid.Row="0" x:Name="sourcePanel"             Background="LightYellow"
    <!-- TODO: Add the xamWebChart control that will be dragged. -->
</StackPanel>

  1. xamPieChart コントロールを sourcePanel コンテナーに追加します。

XAML の場合:

<ig:XamPieChart Width="480" Height="240" HorizontalAlignment="Left"
                ItemsSource="{Binding Products}" LabelMemberPath="ProductName" ValueMemberPath="UnitPrice" ToolTip="{}Ultimate UI for WPF">
    <!--TODO: Mark the XamPieChart control as draggable element and allow drag action -->
</ig:XamPieChart>

  1. ドラッグ アンド ドロップ機能をチャートに追加します。これは、 DragSource オブジェクトを追加して以下のプロパティを設定することで実行されます:

XAML の場合:

<ig:DragDropManager.DragSource>
   <ig:DragSource IsDraggable="True"
              DragChannels="ChannelA" Drop="DragSource_Drop">
   </ig:DragSource>
</ig:DragDropManager.DragSource>

  1. 対象の StackPanel コンテナーを追加し、それがドラッグされたコントロールがドロップできる領域であることを示します。これは、 DropTarget オブジェクトを追加して以下のプロパティを設定することで実行されます:

XAML の場合:

<StackPanel x:Name="targetPanel" Grid.Row="1" Background="LightGreen">
    <ig:DragDropManager.DropTarget>
        <ig:DropTarget IsDropTarget="True"  DropChannels="ChannelA"/>
    </ig:DragDropManager.DropTarget>
</StackPanel>

  1. コード ビハインドで、Drop イベントを処理します。この例では、xamPieChart コントロールは、対象のパネルに置かれ、ソース パネルから削除されます。

Visual Basic の場合:

Private targetChart As XamPieChart = Nothing
…
Private Sub DragSource_Drop(sender As Object, e As Infragistics.DragDrop.DropEventArgs)
      Dim originalChart As XamPieChart = TryCast(e.DragSource, XamPieChart)
      If targetChart Is Nothing Then
            targetChart = New XamPieChart()
            targetChart = originalChart
            targetChart.AllowSliceExplosion = True
            sourcePanel.Children.Remove(originalChart)
            targetPanel.Children.Add(targetChart)
      End If
End Sub

C# の場合:

private XamPieChart targetChart = null;
…
private void DragSource_Drop(object sender, Infragistics.DragDrop.DropEventArgs e)
{
    XamPieChart originalChart = (e.DragSource as XamPieChart);
    if (targetChart == null)
    {
        targetChart = new XamPieChart();
        targetChart = originalChart;
        targetChart.AllowSliceExplosion = true;
        sourcePanel.Children.Remove(originalChart);
        targetPanel.Children.Add(targetChart);
    }
}

  1. アプリケーションを保存して実行します。上のスタック パネルから下のスタック パネルの上に XamPieChart をドラッグできます。

SL DragDropChart.png

関連トピック

Infragistics Drag and Drop Framework について

Infragistics Drag and Drop Framework の使用