How to implement Drag and Drop Frame work with XamWebTree to drag and drop folder or XamWebTreeItem with in Tree. I am not using Drag-Drop facility of XamWebTree
Hi samireclp,
When you want to deal with drag-and-drop in XamWebTree you should provide HierarchicalDataTemplate for the XamWebTree. In the sample below as data source for the XamWebTree is used instance of ObservableCollection<Category> collection where:
public class Category
{
public string CategoryName { get; set; }
public ObservableCollection<Movie> Movies { get; set; }
}
public class Movie
public string Name { get; set; }
public int Rating { get; set; }
And that is the template you can use in this case:
<Grid.Resources>
<ig:HierarchicalDataTemplate x:Key="hierarchyItemTemplate" ItemsSource="{Binding Path=Movies}">
<DataTemplate>
<Grid Background="SteelBlue">
<ddm:DragDropManager.DragSource>
<ddm:DragSource IsDraggable="True"
DragChannels="CategoryChannel"
DataObjectBinding="{Binding}"
DragStart="XamWebTreeDragStart"
Drop="XamWebTreeDrop"/>
</ddm:DragDropManager.DragSource>
<ddm:DragDropManager.DropTarget>
<ddm:DropTarget IsDropTarget="True" DropChannels="CategoryChannel"/>
</ddm:DragDropManager.DropTarget>
<TextBlock Text="{Binding Path=CategoryName}" Margin="5"/>
</Grid>
</DataTemplate>
<!-- 2nd level-->
<ig:HierarchicalDataTemplate.HierarchicalItemTemplate>
<ig:HierarchicalDataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</ig:HierarchicalDataTemplate>
</ig:HierarchicalDataTemplate.HierarchicalItemTemplate>
</Grid.Resources>
When you declare the template you can specify the UIElement that will be considered as source of the drag operation. That is accomplished as you set DragDropManager.DragSource attached property in given element. In this case for the first level that is the Grid element and for the second level is the StackPanel. You can specify which part can be treated as drop target as well. When you set the drop target element you should set DragDropManager.DropTarget attached property.
Setting the drag-drop channels is optional and allows you to control where some dragged element can be dropped. Here the drag source and the drop target share the same channel.
Note the usage of DataObjectBinding="{Binding}" on DragSource object. This will bound the drag source element with XamWebTreeItem.DataContext property and will propagate the data to DragDropEventArgs.Data property so you can use it in your event handlers. Here I set the event handlers just for DragStart and Drop events but there are also: DragCancel, DragEnd, DragEnter, DragLeave and DragOver events.
And the XAML declaration for XamWebTree:
<igTree:XamWebTree x:Name="xamWebTree" HierarchicalItemTemplate="{StaticResource hierarchyItemTemplate}"
ItemsSource="{Binding}">
Here it is supposed that categories object is instance of ObservableCollection<Category>.
[Code Behind]
this.xamWebTree.DataContext = categories;
I hope that will help.
PPilev.
Thanks. It works fine for 2-level. I do have n- level tree and also having leaf node at any level. Same like Explorer . Folder can have folder (n-level) as well as file (leaf node).
Could you please help to create n-level tree.
Class Drive {
string drivename;
Image driveIcon;
Folder rootFolder;
Class File{
string filename;
Image fileIcon;
Class Folder {
string name;
Image folderIcon;
Collection <Folder> Children; // n-level
Collection <File> files; // Leaf node
I have to bind Drive class instance with XamWebTree. How can i design time using HierarchicalDataTemplate for above Hierarchical structrue .
Hi,
I think you should use model where files and folders have shared collection. May this sample will help you:
public interface IFileObject{ string Name { get; set; } Image Image { get; set; } Collection<IFileObject> Children { get; } bool HasChildren { get; }}
public class File : IFileObject{ // provide specific for the File object implementation}
public class Folder : IFileObject{ // provide specific for the Folder object implementation }
public class Drive{ public Collection<Folder> Folders { get; }}
or you can consider that Drive class also can implements IFileObject. It depends on your logic and what do you need. Then XamWebTree can be bound to Folders property (or Children property if Drive class implements IFileObject) as ItemsSource.
Best regards. PPilev
Thanks .It works but not scroll smoothly.
While draging XamWebTreeItem having expandend with children also move in expanded form. If i set IsExpanded = false to DragSource.It collapse source but not moving item(XamWebTreeItem). How can i achieve , moving item should collapse but not original source item.
If you notice in Widow Explorer when you drag some item over last visible item (or over item that is before last visible item) and if there are more items that are hidden the scroll moves automatically so next item become visible. You can subscribe for DragEnter event (when all items are drop targets), then you can determine the item that is your current drop target and if there are more items you may be able to set scroller where you want. When DragEnter event is fired you can use DragDropCancelEventArgs.DropTarget property to obtain current drop target element or DragDropCancelEventArgs.Data property to get the data object.
Thanks guys for your input and solution. i find soution. i populate XamWebTree dynamically by adding nodes as i want. I achieved DragNDrop Folder and File(leaf node) by attaching DragManager ,DragTarget to XamWebTreeItem. It works fine.
One more feature i want Here. I want Auto-Scrolling XamWebTree as i drag node over tree like Window Explorer supports.
Could you please help me to achieve Auto-scrolling XamWebTree while using Drag-n-Drop framework.