This is a migrated thread and some comments may be shown as answers.

DragAndDrop To ListBox

3 Answers 70 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
small
Top achievements
Rank 1
small asked on 25 Nov 2010, 02:53 AM

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

    }




3 Answers, 1 is accepted

Sort by
0
Tsvyatko
Telerik team
answered on 25 Nov 2010, 08:24 AM
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
0
small
Top achievements
Rank 1
answered on 25 Nov 2010, 09:15 AM
I can't find the e.Options.GetElement .How do I find the Property;
0
Tsvyatko
Telerik team
answered on 26 Nov 2010, 09:05 AM
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
Tags
DragAndDrop
Asked by
small
Top achievements
Rank 1
Answers by
Tsvyatko
Telerik team
small
Top achievements
Rank 1
Share this question
or