iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi, is it possible to implement drag and drop between two tree view controls under Silverlight. Behaviors do not appear to be implemented for the tree view control under WPF or Silverlight, and I have been unable to trap the mouse down event for a tree view item under Silverlight. Is it possible to do this? Is there a simple example to help get me started. Thanks, Jonathan
Hello Jonathan,
I am sorry for the late reply. Yes, you were correct. My previous solution was only for a simple scenario. There are some uncover scenarios, such as yours or in zoom scenario. You would need to use that drop event to cover up the rest things.
Regards,Handy
Unfortunately, we don't have a direct sample about UXTreeView with DragDrop capability. To understand about our Drag and Drop, please kindly check our documentation about Drag-drop Framework Overview.We also have DragDrop sample in our ClientUI sample>>ClientUIFramework. Hope this helps.
Hi, we had reviewed the documentation specifically the section "How-to: Drag an UIElement using API". As part of our evaluation of the CLientUI we are attempting to convert segments of an existing application using this approach. I have included a simple example, which when run under Silverlight, sees the MouseDown and Up events fire for the standard TreeView control, but not the UXTreeView control. Are we doing something wrong, or do we need to consider a different approach. Thanks, Joanthan
<UserControl x:Class="SilverlightApplication13.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:UXCollection="clr-namespace:Intersoft.Client.UI.Aqua.UXCollection;assembly=Intersoft.Client.UI.Aqua.UXCollection" xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"> <StackPanel x:Name="LayoutRoot" Background="White"> <UXCollection:UXTreeView> <UXCollection:UXTreeViewItem Header="Top"> <UXCollection:UXTreeViewItem Header="Item 1" /> <UXCollection:UXTreeViewItem Header="Item 2" /> <UXCollection:UXTreeViewItem Header="Item 3" MouseLeftButtonDown="UXTreeViewItem_MouseLeftButtonDown" MouseLeftButtonUp="UXTreeViewItem_MouseLeftButtonUp" /> <UXCollection:UXTreeViewItem Header="Item 4" /> <UXCollection:UXTreeViewItem Header="Item 5" /> </UXCollection:UXTreeViewItem> </UXCollection:UXTreeView> <Controls:TreeView> <Controls:TreeViewItem Header="Top"> <Controls:TreeViewItem Header="Item 1" /> <Controls:TreeViewItem Header="Item 2" /> <Controls:TreeViewItem Header="Item 3" MouseLeftButtonDown="UXTreeViewItem_MouseLeftButtonDown" MouseLeftButtonUp="UXTreeViewItem_MouseLeftButtonUp" /> <Controls:TreeViewItem Header="Item 4" /> <Controls:TreeViewItem Header="Item 5" /> </Controls:TreeViewItem> </Controls:TreeView> </StackPanel> </UserControl>
Hi, spent some time investigating options. Have attached a small sample that supports drag and drop between two UXTreeViewControl. Would this be the best approach? The first control is declared in xaml, the second created in code-behind. Thanks, Jonathan
XAML code:
<UserControl x:Class="SilverlightApplication15.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:UXCollection="clr-namespace:Intersoft.Client.UI.Aqua.UXCollection;assembly=Intersoft.Client.UI.Aqua.UXCollection"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <UXCollection:UXTreeView x:Name="tree1" Grid.Column="0" BorderThickness="0"> <UXCollection:UXTreeViewItem Header="Top" AllowDropItem="True" AllowDropObject="True" AllowMoveItem="True" AllowReorderItem="True" DropObjectCommand="{Binding DropObjectCommand}" IsExpanded="True"> <UXCollection:UXTreeViewItem Header="Item 1" /> <UXCollection:UXTreeViewItem Header="Item 2" /> <UXCollection:UXTreeViewItem Header="Folder 1" AllowDropItem="True" AllowDropObject="True" AllowMoveItem="True" AllowReorderItem="True" DropObjectCommand="{Binding DropObjectCommand}" IsExpanded="True"> <UXCollection:UXTreeViewItem Header="Item 1.1" /> <UXCollection:UXTreeViewItem Header="Item 1.2" /> <UXCollection:UXTreeViewItem Header="Item 1.3" /> <UXCollection:UXTreeViewItem Header="Item 1.4" /> <UXCollection:UXTreeViewItem Header="Item 1.5" /> </UXCollection:UXTreeViewItem> <UXCollection:UXTreeViewItem Header="Item 3" /> <UXCollection:UXTreeViewItem Header="Folder 2" AllowDropObject="True" DropObjectCommand="{Binding DropObjectCommand}" /> </UXCollection:UXTreeViewItem> </UXCollection:UXTreeView> <UXCollection:UXTreeView x:Name="tree2" Grid.Column="1" BorderThickness="1,0,0,0" /> </Grid> </UserControl>
C# code:
using System; using Intersoft.Client.Framework.Input; using Intersoft.Client.UI.Aqua.UXCollection; using Intersoft.Client.UI.Controls.Interactivity; namespace SilverlightApplication15 { public partial class MainPage { public MainPage() { DropObjectCommand = new DelegateCommand(ExecuteDropObjectCommand); InitializeComponent(); DataContext = this; AMBuildTree(); } public DelegateCommand DropObjectCommand { get; set; } public void ExecuteDropObjectCommand(Object parameter) { var dropObjectParameter = parameter as DropObjectParameter; // Cast drop object parameters. if (dropObjectParameter == null) return; var sourceElement = dropObjectParameter.SourceElement as UXTreeViewItem; // Identify the item being dropped. if (sourceElement == null) return; var sourceElementParent = sourceElement.Parent as UXTreeViewItem; // Identify the parent of the item being dropped. if (sourceElementParent == null) return; var targetElement = dropObjectParameter.TargetElement as UXTreeViewItem; // Identify the item being dropped onto. if (targetElement == null) return; sourceElementParent.Items.Remove(sourceElement); // Relocate tree view item. targetElement.Items.Add(sourceElement); targetElement.AllowDropItem = true; targetElement.AllowMoveItem = true; targetElement.AllowReorderItem = true; } private void AMBuildTree() { UXTreeViewItem topItem; UXTreeViewItem folder; tree2.Items.Add(topItem = AMBuildFolder("Top")); topItem.Items.Add(AMBuildItem("Item 1")); topItem.Items.Add(AMBuildItem("Item 2")); topItem.Items.Add(folder = AMBuildFolder("Folder 1")); folder.Items.Add(AMBuildItem("Item 1.1")); folder.Items.Add(AMBuildItem("Item 1.2")); folder.Items.Add(AMBuildItem("Item 1.3")); folder.Items.Add(AMBuildItem("Item 1.4")); folder.Items.Add(AMBuildItem("Item 1.5")); topItem.Items.Add(AMBuildItem("Item 3")); topItem.Items.Add(AMBuildFolder("Folder 2")); } private UXTreeViewItem AMBuildFolder(String label) { return new UXTreeViewItem { AllowDropItem = true, AllowDropObject = true, AllowMoveItem = true, AllowReorderItem = true, DropObjectCommand = DropObjectCommand, Header = label, IsExpanded = true }; } private static UXTreeViewItem AMBuildItem(String label) { return new UXTreeViewItem { Header = label }; } } }
We are very sorry for the late reply due to our priority to release R2. Regarding your question, I will forward it to our developer teams. I would need to discuss whether they have a better approach or not.While waiting, please feel free to download and evaluate our R2, ClientUI6.
Actually in order to use drag n drop between UXTreeView, you only need to turn on property AllowDropItem, AllowMoveItem, AllowRemoveItem, AllowReorderItem.All of them should be handled by our DargDrop framework. I also attached a simple sample to show how to do it. Hope this helps.
Hi, thank you very much for the detailed response. We are very impressed with the level of assistance we have received during our evaluation.
The example you attached works well, but does not allow an item to be dragged and dropped to an empty sub-folder. If you remove all the items from a sub-folder then try and drag one back, it is not allowed. This is why I included the AllowDragObject and DragObjectCommand references in the original example. I assume trapping the Drop event would also work. Maybe there is a simpler way to do this? All the best, Jonathan
Hi, do you have an update regarding my last reply, or should I close the issue. Thanks, Jonathan
Sorry for another question, but what do you mean by 'zoom scenario'. Thanks, Jonathan
Hello,
Please try to zoom the browser. In simple sample, some scenarios are not handled automatically.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname