This example shows how to move item from unbound ListBox to bound ListBox and using UXPanel.

Example

Description

UXPanel does not allow moving items from an unbound ListBox to a bound ListBox since unbound ListBox does not have data context assigned to it. Therefore you need to create the data context at PrepareDropEvent and assign it as drop objects.

All drag-drop events are built on routed event architecture including the DropEvent. To learn more about routed event, see Routed Events overview.

Code

XAML	Copy Code
<UserControl.Resources> <ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/> </ItemsPanelTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}"> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Width="250"> <ListBox x:Name="ListBox1" ItemsPanel="{StaticResource ItemsPanelTemplate1}"> <ListBoxItem Content="To-do: Prepare Walkthrough Materials"/> <ListBoxItem Content="To-do: Prepare Video Materials"/> <ListBoxItem Content="To-do: Create Press Release"/> </ListBox> <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right"> <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox1}" VerticalAlignment="Center"/> </Intersoft:FieldLabel> <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right"> <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}" VerticalAlignment="Center"/> </Intersoft:FieldLabel> </StackPanel> <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate1}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="250" ItemsSource="{Binding Collection}" DisplayMemberPath="Property1"/> </Grid>

XAML

Copy Code

<UserControl.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/>
    </ItemsPanelTemplate>  
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Width="250">
        <ListBox x:Name="ListBox1" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
            <ListBoxItem Content="To-do: Prepare Walkthrough Materials"/>
            <ListBoxItem Content="To-do: Prepare Video Materials"/>
            <ListBoxItem Content="To-do: Create Press Release"/>
        </ListBox>
        <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
            <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox1}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
        <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
            <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
    </StackPanel>
    <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate1}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="250" 
                                ItemsSource="{Binding Collection}" DisplayMemberPath="Property1"/>        
</Grid>

C#	Copy Code
public MainPage() { // Required to initialize variables InitializeComponent(); ISEventManager.RegisterInstanceHandler( this.ListBox2, // any element in the routed path which applicable in your scenario ISDragDrop.PrepareDropEvent, // the routed event new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(DropTarget_Drop), // the event handler true); } private void DropTarget_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e) { ListBoxItem dropElement = e.GetSourceElement() as ListBoxItem; // get the drop element Expression.Blend.SampleData.SampleDataSource.Item dataContext = new Expression.Blend.SampleData.SampleDataSource.Item(); dataContext.Property1 = dropElement.Content.ToString(); List<object> dropObjects = new List<object>(); dropObjects.Add(dataContext); e.SetDropObjects(dropObjects); }

Copy Code

public MainPage()
{
    // Required to initialize variables
    InitializeComponent();

    ISEventManager.RegisterInstanceHandler(
        this.ListBox2, // any element in the routed path which applicable in your scenario
        ISDragDrop.PrepareDropEvent, // the routed event
        new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(DropTarget_Drop), // the event handler
        true);
}

private void DropTarget_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e)
{
    ListBoxItem dropElement = e.GetSourceElement() as ListBoxItem; // get the drop element
    Expression.Blend.SampleData.SampleDataSource.Item dataContext = new Expression.Blend.SampleData.SampleDataSource.Item();
    dataContext.Property1 = dropElement.Content.ToString();
    
    List<object> dropObjects = new List<object>();
    dropObjects.Add(dataContext);
    e.SetDropObjects(dropObjects);
}

Concepts

Drag-drop Framework Overview

Interactive Panels Overview

Other Resources

Drag-drop Framework How-to Topics

Interactive Panels How-to Topics

Locating the Samples in Local Installation

Walkthroughs and How-to Topics