This example shows you how to enable drag drop capability to standard ListBox by integrating UXPanel to ListBox.

Example

Description

ListBox is an ItemsControl which means you can customize its ItemsPanel property with any type of panel in order to control the item arragement. We can change the ItemsPanel property to use one of ClientUI Panels to enable drag-drop with fluid animation.

The following code demonstrates how to enable drag drop to standard ListBox by specifying UXStackPanel as ItemsPanel value.

Code

XAML	Copy Code
<UserControl.Resources> <ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/> </ItemsPanelTemplate> <ItemsPanelTemplate x:Key="ItemsPanelTemplate2"> <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True"/> </ItemsPanelTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <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> <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Width="250"> <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate2}"> <ListBoxItem Content="To-do: Fix Bug #1337"/> <ListBoxItem Content="To-do: Enhance Drag Drop Logic"/> <ListBoxItem Content="To-do: Create Sample"/> </ListBox> <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right"> <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox2}" VerticalAlignment="Center"/> </Intersoft:FieldLabel> <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right"> <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox2}" VerticalAlignment="Center"/> </Intersoft:FieldLabel> </StackPanel> </Grid>

XAML

Copy Code

<UserControl.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/>                      
    </ItemsPanelTemplate>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True"/>                     
    </ItemsPanelTemplate>
</UserControl.Resources>
    
<Grid x:Name="LayoutRoot" Background="White">
    <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>
    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Width="250">
        <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate2}">
                <ListBoxItem Content="To-do: Fix Bug #1337"/>
                <ListBoxItem Content="To-do: Enhance Drag Drop Logic"/>
                <ListBoxItem Content="To-do: Create Sample"/>
        </ListBox>
        <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox2}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
        <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox2}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
    </StackPanel>
</Grid>

Concepts

Drag-drop Framework Overview

Items Control 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