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

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

 

Related Topics