Weird behavior with drag and drop inside carousel

5 posts, 1 answers
  1. Brian Crosby
    Brian Crosby avatar
    6 posts
    Member since:
    Jan 2006

    Posted 16 Feb 2011 Link to this post

    Hello,

    I have two list boxes that I'm trying to drag content between each other. The dragging works but if I move the mouse too much it causes the carousel to scroll. How do I prevent this? Also, the drag cue items aren't under the mouse they are down and to the right. I took the drag and drop code from the sample code <ApplicationInfo> and in that sample the cue looks fine.

    Any ideas?

    Cheers,

    Brian
  2. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 16 Feb 2011 Link to this post

    Hi Brian Crosby,

    You can disable automatic scrolling of the scrollviewers using this code:
    RadDragAndDropManager.AutoBringInfoView=false;

    About the cue positioning problem - is it possible to share your XAML and code-behind that involves generating the drag cue and the control being dragged from.

    Greetings,
    Tsvyatko
    the Telerik team
  3. UI for WPF is Visual Studio 2017 Ready
  4. Brian Crosby
    Brian Crosby avatar
    6 posts
    Member since:
    Jan 2006

    Posted 16 Feb 2011 Link to this post

    I added that code in the ctor but it didn't fix it.



    <UserControl x:Class="WpfKiosk.ResourcesPanelUserControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:telerik="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls" mc:Ignorable="d" 
                 d:DesignHeight="390" d:DesignWidth="480" FlowDirection="LeftToRight" Background="Transparent">

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

        <Grid Margin="0,0" Background="Transparent">
            <Border CornerRadius="10" Padding="20">
                <Border.Background>
                    <SolidColorBrush Color="White" Opacity=".75"/>
                </Border.Background>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="220" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold" FontSize="20" FontFamily="Fonts/UniversLTStd-UltraCn.otf#Univers LT Std">ALL RESOURCES</TextBlock>
                    <TextBlock Grid.Column="1" FontWeight="Bold" FontSize="20" FontFamily="Fonts/UniversLTStd-UltraCn.otf#Univers LT Std" Margin="5,0,0,0">YOUR BRIEFCASE</TextBlock>
                    <ListBox Name="ResourcesList" Grid.Row="1" Margin="0,0,10,0" telerik:RadDragAndDropManager.AllowDrop="True"
                   ItemContainerStyle="{StaticResource draggableItemStyle}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="4,2,0,2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="30" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30" />
                                    </Grid.RowDefinitions>
                                    <Border CornerRadius="20" Opacity="1">
                                        <Border.Background>
                                            <SolidColorBrush Color="White" Opacity="1"/>
                                        </Border.Background>
                                        <Rectangle Grid.Column="0" Fill="Gray" />
                                    </Border>
                                    <TextBlock Grid.Column="0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Type}" />
                                    <WrapPanel Grid.Column="1">
                                        <TextBlock Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding Name}" />
                                    </WrapPanel>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <ListBox Name="BriefcaseList" Grid.Column="1" Grid.Row="1" Margin="5,0,0,0" telerik:RadDragAndDropManager.AllowDrop="True"
                   ItemContainerStyle="{StaticResource draggableItemStyle}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="4,2,0,2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="30" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30" />
                                    </Grid.RowDefinitions>
                                    <Border CornerRadius="20" Opacity="1">
                                        <Border.Background>
                                            <SolidColorBrush Color="White" Opacity="1"/>
                                        </Border.Background>
                                        <Rectangle Grid.Column="0" Fill="Gray" />
                                    </Border>
                                    <TextBlock Grid.Column="0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Type}" />
                                    <WrapPanel Grid.Column="1">
                                        <TextBlock Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding Name}" />
                                    </WrapPanel>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <Image Grid.Row="1" Grid.Column="1" Source="Briefcase.png" Stretch="None" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,-12,-12" />
                </Grid>
            </Border>
        </Grid>
    </UserControl>


    // --------------------------------------------------------------------------------------------------------------------
    // <copyright file="ResourcesPanelUserControl.xaml.cs" company="clickDM">
    //   Copyright (c) CLICKDM PTY LTD. All rights reserved.
    // </copyright>
    // <summary>
    //   Interaction logic for ResourcesPanelUserControl.xaml
    // </summary>
    // --------------------------------------------------------------------------------------------------------------------

    namespace WpfKiosk
    {
        using System.Collections.Generic;
        using System.Collections.ObjectModel;
        using System.Windows.Controls;
        using System.Windows.Media;

        using Telerik.Windows.Controls.DragDrop;

        /// <summary>
        /// Interaction logic for ResourcesPanelUserControl.xaml
        /// </summary>
        public partial class ResourcesPanelUserControl : UserControl
        {
            #region Constants and Fields

            /// <summary>
            /// The list box drag possible brush.
            /// </summary>
            private readonly Brush listBoxDragPossible = new SolidColorBrush(Colors.Orange);

            /// <summary>
            /// The list box drop possible brush.
            /// </summary>
            private readonly Brush listBoxDropPossible = new SolidColorBrush(Colors.Yellow);

            /// <summary>
            /// All available resources.
            /// </summary>
            private readonly ObservableCollection<ResourceViewModel> allResources = LoadAllResourceItems();

            /// <summary>
            /// The selected resources.
            /// </summary>
            private readonly ObservableCollection<ResourceViewModel> selectedResources = LoadSelectedItems();

            #endregion

            #region Constructors and Destructors

            /// <summary>
            /// Initializes a new instance of the <see cref="ResourcesPanelUserControl"/> class.
            /// </summary>
            public ResourcesPanelUserControl()
            {
                this.InitializeComponent();

                // Load list boxes
                this.ResourcesList.ItemsSource = this.allResources;
                this.BriefcaseList.ItemsSource = this.selectedResources;

                RadDragAndDropManager.AutoBringIntoView = false;

                RadDragAndDropManager.AddDragQueryHandler(thisthis.OnDragQuery);
                RadDragAndDropManager.AddDragInfoHandler(thisthis.OnDragInfo);
                RadDragAndDropManager.AddDropQueryHandler(thisthis.OnDropQuery);
                RadDragAndDropManager.AddDropInfoHandler(thisthis.OnDropInfo);
            }

            #endregion

            #region Methods

            /// <summary>
            /// Loads all resource items.
            /// </summary>
            /// <returns>
            /// A list of all resources.
            /// </returns>
            private static ObservableCollection<ResourceViewModel> LoadAllResourceItems()
            {
                return new ObservableCollection<ResourceViewModel>
                    {
                        new ResourceViewModel
                            {
                                Name = "Lorem ipsum dolor sit amet",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Atom.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Consectetur adipiscing elit",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Brush.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Aliquam ut turpis dui",
                                Type = "DOC",
                                Resource = @"../Images/DragAndDrop/LargeIcons/CalendarEvents.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Sed luctus vestibulum",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/CDBurn.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Aenean in enim lorem",
                                Type = "AVI",
                                Resource = @"../Images/DragAndDrop/LargeIcons/favorites.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Fermentum",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Connected.png"
                            }
                    };
            }

            /// <summary>
            /// Loads the selected items.
            /// </summary>
            /// <returns>A list of selected resource items.</returns>
            private static ObservableCollection<ResourceViewModel> LoadSelectedItems()
            {
                return new ObservableCollection<ResourceViewModel>
                    {
                        new ResourceViewModel
                            {
                                Name = "Sed luctus vestibulum",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/CDBurn.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Consectetur adipiscing elit",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Brush.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Aliquam ut turpis dui",
                                Type = "DOC",
                                Resource = @"../Images/DragAndDrop/LargeIcons/CalendarEvents.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Fermentum",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Connected.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Aenean in enim lorem",
                                Type = "AVI",
                                Resource = @"../Images/DragAndDrop/LargeIcons/favorites.png"
                            },
                        new ResourceViewModel
                            {
                                Name = "Lorem ipsum dolor sit amet",
                                Type = "PDF",
                                Resource = @"../Images/DragAndDrop/LargeIcons/Atom.png"
                            }
                    };
            }

            /// <summary>
            /// Handles the DropInfo routed event for briefcase list.
            /// </summary>
            /// <param name="sender">The sender.</param>
            /// <param name="e">The <see cref="Telerik.Windows.Controls.DragDrop.DragDropEventArgs"/> instance containing the event data.</param>
            private void OnDropInfo(object sender, DragDropEventArgs e)
            {
                var dropListBox = e.Options.Destination as ItemsControl;
                var itemsSource = dropListBox.ItemsSource as IList<ResourceViewModel>;
                var payload = e.Options.Payload as ResourceViewModel;

                dropListBox.BorderBrush = e.Options.Status == DragStatus.DropPossible 
                    ? this.listBoxDragPossible 
                    : new SolidColorBrush(Colors.Gray);

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

            /// <summary>
            /// Handles the DropQuery routed event.
            /// </summary>
            /// <param name="sender">The sender.</param>
            /// <param name="e">The <see cref="Telerik.Windows.Controls.DragDrop.DragDropQueryEventArgs"/> instance containing the event data.</param>
            private void OnDropQuery(object sender, DragDropQueryEventArgs e)
            {
                var dropListBox = e.Options.Destination as ItemsControl;
                var itemsSource = dropListBox.ItemsSource as IList<ResourceViewModel>;
                var payload = e.Options.Payload as ResourceViewModel;

                e.QueryResult = payload != null && !itemsSource.Contains(payload);
            }

            /// <summary>
            /// Handles the DragInfo routed event.
            /// </summary>
            /// <param name="sender">The sender.</param>
            /// <param name="e">The <see cref="Telerik.Windows.Controls.DragDrop.DragDropEventArgs"/> instance containing the event data.</param>
            private void OnDragInfo(object sender, DragDropEventArgs e)
            {
                var listBoxItem = e.Options.Source as ListBoxItem;
                var dragListBox = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;
                var itemsSource = dragListBox.ItemsSource as IList<ResourceViewModel>;
                var payload = e.Options.Payload as ResourceViewModel;

                if (e.Options.Status == DragStatus.DragComplete)
                {
                    if (payload != null && itemsSource.Contains(payload))
                    {
                        itemsSource.Remove(payload);
                    }
                }

            }

            /// <summary>
            /// Handles the DragQuery routed event.
            /// </summary>
            /// <param name="sender">The sender.</param>
            /// <param name="e">The <see cref="Telerik.Windows.Controls.DragDrop.DragDropQueryEventArgs"/> instance containing the event data.</param>
            private void OnDragQuery(object sender, DragDropQueryEventArgs e)
            {
                var listBoxItem = e.Options.Source as ListBoxItem;
                var dragListBox = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;

                if (e.Options.Status == DragStatus.DragQuery && dragListBox != null)
                {
                    e.Options.Payload = dragListBox.SelectedItem;
                    var cue = new ContentControl
                        {
                            ContentTemplate = dragListBox.ItemTemplate, 
                            Content = dragListBox.SelectedItem
                        };

                    e.Options.DragCue = cue;
                    //e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
                }

                e.QueryResult = true;
            }

            #endregion
        }
    }
  5. Answer
    Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 21 Feb 2011 Link to this post

    Hello Brian Crosby,

    We have investigated the reported behavior and it seems that there is issue from our side. In certain scenarios (such as in the described one) setting RadDragAndDropManager.AutoBringIntoView = false; is set before the DragDrop manager is fully initialized and thus this setting does not have any effect.

    We have immediately fixed this issue and it will be included in our next internal build.

    Meanwhile, I can suggest to place "RadDragAndDropManager.AutoBringIntoView = false" in the dragquery event.

    P.S. I have updated your telerik points accordingly.

    Best wishes,
    Tsvyatko
    the Telerik team
  6. Brian Crosby
    Brian Crosby avatar
    6 posts
    Member since:
    Jan 2006

    Posted 21 Feb 2011 Link to this post

    That fixed my problem, thank you.

    The drag queue positioning problem turned out to be because the carousel was in a Viewbox and the carousel had a width assigned to it.  I didn't need these settings after all so it's no loss. 
Back to Top
UI for WPF is Visual Studio 2017 Ready