Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Code Block
titleXAML
languagexml
<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

Content by Label
spaces@self
reversetrue
showLabelsfalse
max5
sortmodified
labelskb-how-to-article -enable-drag-drop-to-standard-listbox-using-uxpanel
showSpacefalse
typepage