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 | ![]() |
---|---|
<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# | ![]() |
---|---|
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. } |
DragEventArgs Class
UXPanel Class
Concepts
Drag-drop Framework Overview
Interactive Panels Overview
Tasks
How-to: Move Item from Unbound ListBox to Bound ListBox using UXPanel
Other Resources
Drag-drop Framework How-to Topics
Interactive Panels How-to Topics
Locating the Samples in Local Installation
Walkthroughs and How-to Topics