DragAndDrop To ListBox

4 posts, 0 answers
  1. small
    small avatar
    4 posts
    Member since:
    Nov 2010

    Posted 24 Nov 2010 Link to this post

      <UserControl.Resources>
            <DataTemplate x:Key="ApplicationDragTemplate">
                <Image Source="{Binding Url}"
                   Stretch="None"
                   VerticalAlignment="Top" />
            </DataTemplate>

            <Style TargetType="ListBoxItem"
               x:Key="draggableItemStyle">
                <Setter Property="HorizontalContentAlignment"
                   Value="Stretch" />
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag"
                   Value="True" />
            </Style>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDocking>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
            <telerik:RadPane Header="ListBox1">
                <ListBox  x:Name="lstbox" telerik:RadDragAndDropManager.AllowDrop="True"
             ItemContainerStyle="{StaticResource draggableItemStyle}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding Url}" Width="35" HorizontalAlignment="Center" Height="32" Margin="0 0 10 0" />
                            <TextBlock  TextWrapping="Wrap" Width="50" Text="{Binding Title}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.Template>

                    <ControlTemplate>
                        <ScrollViewer VerticalScrollBarVisibility="Auto" BorderBrush="{x:Null}">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </ControlTemplate>
                </ListBox.Template>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerik:RadWrapPanel  Orientation="Horizontal" Name="rad" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
            </telerik:RadPane>
         
            <telerik:RadPane Header="ListBox2">
            <ListBox  x:Name="otherlstbox" telerik:RadDragAndDropManager.AllowDrop="True"
             ItemContainerStyle="{StaticResource draggableItemStyle}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding Url}" Width="35" HorizontalAlignment="Center" Height="32" Margin="0 0 10 0" />
                            <TextBlock  TextWrapping="Wrap" Width="50" Text="{Binding Title}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.Template>

                    <ControlTemplate>
                        <ScrollViewer VerticalScrollBarVisibility="Auto" BorderBrush="{x:Null}">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </ControlTemplate>
                </ListBox.Template>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerik:RadWrapPanel  Orientation="Horizontal" Name="otherrad" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
            </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>






    code-behind
            

     public partial class MainPage : UserControl
        {
            ObservableCollection<Picture> data;
            ObservableCollection<Picture> otherdata ;
            public MainPage()
            {
                InitializeComponent();

                data = new ObservableCollection<Picture>();
                for (int i = 0; i < 5; i++)
                {
                    data.Add(new Picture("Image/Folder.png", i.ToString()));
                }
                lstbox.ItemsSource = data;

                otherdata = new ObservableCollection<Picture>();
                for (int j = 6; j < 8; j++)
                {
                    otherdata.Add(new Picture("Image/Folder.png", j.ToString()));
                }
                otherlstbox.ItemsSource = otherdata;
                RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);
                RadDragAndDropManager.AddDragInfoHandler(this, OnDragInfo);

                RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);
                RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);

            }

            #region /*拖放操作*/
            Brush listBoxDragPossible = new SolidColorBrush(Colors.Orange);
            private void OnDragInfo(object sender, DragDropEventArgs e)
            {
                System.Windows.Controls.ListBoxItem listBoxItem = e.Options.Source as System.Windows.Controls.ListBoxItem;
                System.Windows.Controls.ListBox box = System.Windows.Controls.ItemsControl.ItemsControlFromItemContainer(listBoxItem) as System.Windows.Controls.ListBox;
                IList<Picture> itemsSource = box.ItemsSource as IList<Picture>;
                Picture payload = e.Options.Payload as Picture;
                if (e.Options.Status == DragStatus.DragComplete)
                {
                    if (payload != null && itemsSource.Contains(payload))
                    {
                        itemsSource.Remove(payload);
                    }
                }

            }

            private void OnDragQuery(object sender, DragDropQueryEventArgs e)
            {
                System.Windows.Controls.ListBoxItem listBoxItem = e.Options.Source as System.Windows.Controls.ListBoxItem;
                System.Windows.Controls.ListBox box = System.Windows.Controls.ItemsControl.ItemsControlFromItemContainer(listBoxItem) as System.Windows.Controls.ListBox;
                if (e.Options.Status == DragStatus.DragQuery && box != null)
                {
                    e.Options.Payload = box.SelectedItem;
                    ContentControl cue = new ContentControl();
                    cue.ContentTemplate = this.Resources["ApplicationDragTemplate"] as DataTemplate;
                    cue.Content = box.SelectedItem;
                    e.Options.DragCue = cue;
                    e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
                }
                e.QueryResult = true;
            }
            // OnDropQuery event handler
            private void OnDropQuery(object sender, DragDropQueryEventArgs e)
            {
                System.Windows.Controls.ItemsControl box = e.Options.Destination as System.Windows.Controls.ItemsControl;
                IList<Picture> itemsSource = box.ItemsSource as IList<Picture>;
                Picture payload = e.Options.Payload as Picture;
                e.QueryResult = payload != null && !itemsSource.Contains(payload);

            }
            private void OnDropInfo(object sender, DragDropEventArgs e)
            {
                System.Windows.Controls.ItemsControl box = e.Options.Destination as System.Windows.Controls.ItemsControl;
                IList<Picture> itemsSource = box.ItemsSource as IList<Picture>;
                Picture payload = e.Options.Payload as Picture;
                if (e.Options.Status == DragStatus.DropPossible)
                {
                    box.BorderBrush = listBoxDragPossible;
                }
                else
                {
                    box.BorderBrush = new SolidColorBrush(Colors.Gray);
                }

                if (e.Options.Status == DragStatus.DropComplete)
                {
                    if (!itemsSource.Contains(payload))
                    {
                        itemsSource.Add(payload);
                    }
                }

            }

            #endregion
        }



    Picture Class:
            

       public class Picture
        {
            public string Url { get; set; }

            public string Title { get; set; }

            public Picture(string url, string title)
            {
                this.Url = url;
                this.Title = title;
            }

        }




  2. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 25 Nov 2010 Link to this post

    Hi small,

    If you like to drop to any position in the destination listbox (similar to Desktop) you would require something similar to Canvas and custom logic to set the position. If you need to insert items in the destination ListBox on the position of listboxitem below the mouse you would require to replace the code in DropInfo:
     - itemsSource.Add(payload);
    with this code:

    int index =itemsSource.IndexOf(e.Options.GetElement<ListBoxItem>(e.Options.CurrentDragPoint).DataContext);

    if(index<0)
    {
    itemsSource.Add(payload);
    }
    else
    {
    itemsSource.Insert(index,payload);
    }

    Kind regards,
    Tsvyatko
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
  4. small
    small avatar
    4 posts
    Member since:
    Nov 2010

    Posted 25 Nov 2010 Link to this post

    I can't find the e.Options.GetElement .How do I find the Property;
  5. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 26 Nov 2010 Link to this post

    Hello small,

    e.Options.GetElement<ListBoxItem>(e.Options.CurrentDragPoint)

    must be

    e.GetElement<ListBoxItem>(e.Options.CurrentDragPoint)

    Please, excuse me for the mistake in the previous post.

    Sincerely yours,
    Tsvyatko
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top