Version

Getting Started with Infragistics Drag and Drop Framework

Before You Begin

This topic is designed to get you up and running with the Infragistics Drag and Drop Framework™ library as quickly as possible by describing the basic steps required for implementing the drag and drop functionality within your WPF application.

What You Will Accomplish

You will drag a xamPieChart control from a source panel and drop it into a target panel.

Follow these Steps

  1. Create a Microsoft® WPF™ project

  2. In the Solution Explorer, add the following NuGet package references to your project. For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

    • Infragistics.WPF.DragDrop

    • Infragistics.WPF.Charts

  1. Add a namespace declaration for the drag and drop framework to the opening UserControl tag.

In XAML:

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

  1. Provide sample data that will be visualized by the XamPieChart control. The example uses the DataUtil class provided for you.

In XAML:

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

  1. Add two row definitions to a Grid container named "LayoutRoot".

In XAML:

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

  1. Add the first StackPanel container that holds the XamPieChart control that will be dragged.

Note: It is necessary to add a background color to the StackPanel in order any mouse events to be handled.

In XAML:

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

  1. Add a XamPieChart control to the sourcePanel container.

In 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. Add drag and drop functionality to the chart. This is done by adding the DragSource object and setting the following properties:

In XAML:

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

  1. Add the target StackPanel container and indicate it will be the area that the dragged control can be dropped into. This is done by adding the DropTarget object and setting the following properties:

In XAML:

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

  1. In the code-behind, handle the Drop event. In this example, the XamPieChart control is placed in the target panel and removed from the source panel.

In 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

In 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. Run your application. You should be able to drag the XamPieChart control from the top stack panel over into the bottom stack panel.

SL DragDropChart.png

Related Topics

About Infragistics Drag and Drop Framework

Using Infragistics Drag and Drop Framework