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

Example

Description

UXPanel allows an item to be moved from a bound ListBox to an unbound ListBox since it is technically moving the visual element. However in a bound ListBox, the ListBoxItem is bound to the data context that is not available in an unbound ListBox. Consequently, you need to update the content manually when you moved it to unbound ListBox at Drop event.

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.ListBox1, // any element in the routed path which applicable in your scenario DragDrop.DropEvent, // 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.GetDropElements()[0] as ListBoxItem; // get the drop element Expression.Blend.SampleData.SampleDataSource.Item dataContext = dropElement.DataContext as Expression.Blend.SampleData.SampleDataSource.Item; // get the data context dropElement.Content = dataContext.Property1; // set the content dropElement.ContentTemplate = null; // clear the content template from previous bound ListBox. dropElement.DataContext = null; // clear the data context if necessary. }

Copy Code

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

    ISEventManager.RegisterInstanceHandler(
        this.ListBox1, // any element in the routed path which applicable in your scenario
        DragDrop.DropEvent, // 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.GetDropElements()[0] as ListBoxItem; // get the drop element
    Expression.Blend.SampleData.SampleDataSource.Item dataContext = dropElement.DataContext as Expression.Blend.SampleData.SampleDataSource.Item; // get the data context
    dropElement.Content = dataContext.Property1; // set the content
    dropElement.ContentTemplate = null; // clear the content template from previous bound ListBox.
    dropElement.DataContext = null; // clear the data context if necessary.           
}

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