Brian Crosby
Top achievements
Rank 1
Rank 1
Brian Crosby
asked on 16 Feb 2011, 10:20 AM
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
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
4 Answers, 1 is accepted
0
Hi Brian Crosby,
You can disable automatic scrolling of the scrollviewers using this code:
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
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
0
Brian Crosby
Top achievements
Rank 1
Rank 1
answered on 16 Feb 2011, 11:04 AM
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(this, this.OnDragQuery);
RadDragAndDropManager.AddDragInfoHandler(this, this.OnDragInfo);
RadDragAndDropManager.AddDropQueryHandler(this, this.OnDropQuery);
RadDragAndDropManager.AddDropInfoHandler(this, this.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
}
}
0
Accepted
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
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
0
Brian Crosby
Top achievements
Rank 1
Rank 1
answered on 21 Feb 2011, 01:02 PM
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.
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.