Intersoft ClientUI Documentation
How-to: Move Item from Bound ListBox to Unbound ListBox using UXPanel

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



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.


Copy Code
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/>

<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"/>
        <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
            <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox1}" VerticalAlignment="Center"/>
        <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
            <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}" VerticalAlignment="Center"/>
    <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate1}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="250" 
                                ItemsSource="{Binding Collection}" DisplayMemberPath="Property1"/>        
Copy Code
public MainPage()
    // Required to initialize variables

        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

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.           
See Also


Other Resources