962377 : Added Documentation for Drag and Drop feature for MAUI TreeView

MAUI/ListView/item-drag-and-drop.md

@@ -41,7 +41,7 @@ listView.DragStartMode = DragStartMode.OnHold;
 To enable drag and drop using both `OnHold` and `OnDragIndicator`, follow the code example below.
 
 {% tabs %}
-{% highlight xaml hl_lines="4"%}
+{% highlight xaml hl_lines="4" %}
 <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
   <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding ToDoList}"
@@ -62,7 +62,7 @@ To drag and drop the items by the [DragIndicatorView](https://help.syncfusion.co
 N> You must set the SfListView instance as a reference to the [ListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.DragIndicatorView.html#Syncfusion_Maui_ListView_DragIndicatorView_ListView) property in `DragIndicatorView`.
 
 {% tabs %}
-{% highlight xaml hl_lines="13"%}
+{% highlight xaml hl_lines="13" %}
 <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
   <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding ToDoList}"
@@ -88,7 +88,7 @@ N> You must set the SfListView instance as a reference to the [ListView](https:/
 </syncfusion:SfListView>                
 </ContentPage>
 {% endhighlight %}
-{% highlight c# hl_lines="17"%}
+{% highlight c# hl_lines="17" %}
 listView.ItemTemplate = new DataTemplate(() =>
 {
   var grid = new Grid();
@@ -129,7 +129,7 @@ The screenshot shows the output of the reordering items by drag and drop. Downlo
 By defining the [SfListView.DragItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_DragItemTemplate) property of the `SfListView`, you can display a custom user interface (UI) when performing drag and drop operations. The template can be defined either in code or XAML.
 
 {% tabs %}
-{% highlight xaml hl_lines="5"%}
+{% highlight xaml hl_lines="5" %}
 <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
   <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding ToDoList}"
@@ -144,7 +144,7 @@ By defining the [SfListView.DragItemTemplate](https://help.syncfusion.com/cr/mau
 </syncfusion:SfListView>                
 </ContentPage>
 {% endhighlight %}
-{% highlight c# hl_lines="1"%}
+{% highlight c# hl_lines="1" %}
 listView.DragItemTemplate = new DataTemplate(() => {
   var grid = new Grid();
   var name = new Label { FontSize = 15 };
@@ -225,7 +225,7 @@ To cancel dropping for the dragged item, handle the [ItemDragging](https://help.
 You can cancel the dropping action for an item by setting the `Cancel` property of the `ItemDraggingEventArgs`.
 
 {% tabs %}
-{% highlight c# hl_lines="8"%}
+{% highlight c# hl_lines="8" %}
 using Syncfusion.Maui.ListView.Helpers;
 private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
 {
@@ -243,7 +243,7 @@ private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
 The underlying collection can be reordered directly by setting the [DragDropController.UpdateSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.DragDropController.html#Syncfusion_Maui_ListView_DragDropController_UpdateSource) property to `true`. The default value is `false`. 
 
 {% tabs %}
-{% highlight xaml hl_lines="7"%}
+{% highlight xaml hl_lines="7" %}
 <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
   <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding ToDoList}"
@@ -264,7 +264,7 @@ this.listView.DragDropController.UpdateSource = true;
 You can update collection even when `UpdateSource` is `false`. Like, the user can decide where the dragged item should be dropped actually by handling the `ItemDragging` event with [DragAction.Drop](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.DragAction.html#Syncfusion_Maui_ListView_DragAction_Drop).
 
 {% tabs %}
-{% highlight c# hl_lines="3"%}
+{% highlight c# hl_lines="3" %}
 private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
 {
    if (e.Action == DragAction.Drop)
@@ -346,7 +346,7 @@ public partial class MainPage : ContentPage
 {% endtabs %}
 
 {% tabs %}
-{% highlight c# hl_lines="11,14,23,26,29"%}
+{% highlight c# hl_lines="11,14,23,26,29" %}
 private async void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
 {
   var viewModel = this.listView.BindingContext as ViewModel;
@@ -392,7 +392,7 @@ Download the sample from GitHub [here](https://github.com/SyncfusionExamples/how
 To adjust the X and Y coordinates of the drag item while dragging, you can set the [CanAdjustDragItemAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.DragDropController.html#Syncfusion_Maui_ListView_DragDropController_CanAdjustDragItemAxis) property of the [DragDropController](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.DragDropController.html) class to true. By default, the Y coordinates can be adjusted if the [SfListView.Orientation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_Orientation) is set to `Vertical`, and the X coordinates can be adjusted if the `Orientation` is set to `Horizontal`.
 
 {% tabs %}
-{% highlight c# hl_lines="7"%}
+{% highlight c# hl_lines="7" %}
 this.listView.DragDropController = new DragDropControllerExt(this.listView);
 
 public class DragDropControllerExt : DragDropController

MAUI/TreeView/drag-and-drop.md

@@ -0,0 +1,307 @@
+---
+layout: post
+title: Drag and drop in .NET MAUI TreeView Control | Syncfusion
+description: Learn here all about Drag and drop support in the Syncfusion .NET MAUI TreeView (SfTreeView) control and more.
+platform: MAUI
+control: SfTreeView
+documentation: ug
+---
+
+# Drag and drop in .NET MAUI TreeView (SfTreeView)
+## Enable Drag and drop
+The [SfTreeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html) allows drag and drop the items within the treeview control by setting the `AllowDragging` property as `true`. 
+
+{% tabs %}
+{% highlight xaml hl_lines="4" %}
+<ContentPage xmlns:treeView="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView">
+  <syncfusion:SfTreeView x:Name="treeView" 
+                         ItemsSource="{Binding Folders}"
+                         AllowDragging="True" />
+</ContentPage>
+{% endhighlight %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.SetBinding(SfTreeView.ItemsSourceProperty, new Binding("Folders"));
+{% endhighlight %}
+{% endtabs %}
+
+While dropping, the dragged items can be added above, below, or as a child of the target item, depending on the position of the drag indicator.
+
+N> The drag and drop operation is not supported when Load on Demand is enabled.
+
+### Invalid Drop Indicator
+
+An "Invalid drop" indicator is shown in default drag item view when the following conditions are met:
+
+* `Drop as child into same node`: An indicator appears if you attempt to drop an item as a child of the same node.
+
+* `Incompatible child node type`: When trying to drop an item as a child where the target node's child and the dragged item's types are incompatible. It is only applicable when `SfTreeView` has `HierarchyPropertyDescriptor`.
+
+* `Drop below or above with different type`: If attempting to drop an item below or above another node where the parent node's existing child's type is different from the dragged item's type. It is only applicable when `SfTreeView` has `HierarchyPropertyDescriptor`.
+
+### Dragging multiple items
+
+`SfTreeView` allows to drag multiple selected items. To enable multiple selection, set the [SfTreeView.SelectionMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_SelectionMode) as `Multiple` or `Extended`.
+
+
+## Drag item customization
+By defining the `SfTreeView.DragItemTemplate` property of the `SfTreeView`, a custom user interface (UI) is displayed during drag-and-drop operations.
+
+{% tabs %}
+{% highlight xaml hl_lines="5" %}
+<ContentPage xmlns:treeView="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView">
+  <syncfusion:SfTreeView x:Name="treeView" 
+                         ItemsSource="{Binding Folders}"
+                         AllowDragging="True" >
+        <treeView:SfTreeView.DragItemTemplate>
+            <DataTemplate>
+                <Border x:Name="grid" Padding="8" StrokeThickness="1"  Stroke="#6750A4">
+                    <Border.StrokeShape>
+                        <RoundRectangle CornerRadius="8"/>
+                    </Border.StrokeShape>
+                    <Grid RowSpacing="0" Grid.Row="0">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="40" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <Label Text="&#xe70E;" 
+                            TextColor="#B3261E"
+                            VerticalOptions="Center" 
+                            HorizontalOptions="Center"
+                            FontSize="20"
+                            FontFamily="MauiMaterialAssets" 
+                            IsVisible="{Binding Source={x:Reference viewModel}, Path=BlockIconVisible}"/>
+                        <Image Grid.Column="1" Source="{Binding ImageIcon}"
+                            VerticalOptions="Center"
+                            HorizontalOptions="Center"
+                            HeightRequest="24" 
+                            WidthRequest="24"/>
+                        <Label LineBreakMode="NoWrap" Grid.Column="2"
+                            Margin="5,0,0,0"
+                            Text="{Binding FolderName}"
+                            CharacterSpacing="0.25" 
+                            FontSize="14"
+                            VerticalTextAlignment="Center" />
+                    </Grid>
+                </Border>
+            </DataTemplate>
+        </treeView:SfTreeView.DragItemTemplate>
+    </treeView:SfTreeView>
+</ContentPage>
+{% endhighlight %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.SetBinding(SfTreeView.ItemsSourceProperty, new Binding("Folders"));
+treeView.DragItemTemplate = new DataTemplate(() =>
+{
+    var border = new Border
+    {
+        Padding = 8,
+        StrokeThickness = 1,
+        Stroke = Color.FromArgb("#6750A4"),
+        Background = Colors.White,
+        StrokeShape = new RoundRectangle { CornerRadius = 8 }
+    };
+    var grid = new Grid
+    {
+        RowSpacing = 0
+    };
+    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
+    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(40) });
+    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
+    var iconLabel = new Label
+    {
+        Text = "\uE70E",
+        TextColor = Color.FromArgb("#B3261E"),
+        VerticalOptions = LayoutOptions.Center,
+        HorizontalOptions = LayoutOptions.Center,
+        FontSize = 20,
+        FontFamily = "MauiMaterialAssets"
+    };
+    iconLabel.SetBinding(Label.IsVisibleProperty, new Binding("BlockIconVisible", source: new RelativeBindingSource(RelativeBindingSourceMode.FindAncestorBindingContext, typeof(YourViewModelType), null)));
+    var image = new Image
+    {
+        VerticalOptions = LayoutOptions.Center,
+        HorizontalOptions = LayoutOptions.Center,
+        HeightRequest = 24,
+        WidthRequest = 24
+    };
+    image.SetBinding(Image.SourceProperty, "ImageIcon");
+    Grid.SetColumn(image, 1);
+    var nameLabel = new Label
+    {
+        Margin = new Thickness(5, 0, 0, 0),
+        LineBreakMode = LineBreakMode.NoWrap,
+        CharacterSpacing = 0.25,
+        FontSize = 14,
+        VerticalTextAlignment = TextAlignment.Center
+    };
+    nameLabel.SetBinding(Label.TextProperty, "FolderName");
+    Grid.SetColumn(nameLabel, 2);
+    grid.Children.Add(iconLabel);
+    grid.Children.Add(image);
+    grid.Children.Add(nameLabel);
+    border.Content = grid;
+    return border;
+});
+{% endhighlight %}
+{% endtabs %}
+
+N> View sample in [GitHub](https://github.com/SyncfusionExamples/how-to-customize-the-drag-item-view).
+
+![Drag item view customization](Images/drag-and-drop/drag-view-customization.gif)
+
+## Event
+
+The `ItemDragging` event is raised while dragging and dropping the item in the `SfTreeView`. The `ItemDraggingEventArgs` has the following members which provide the information for the ItemDragging event:
+
+`Action`: Returns the drag `Action` such as start, dragging, dropping and drop.
+`Handled`: If this member is set to true, dragging can be handled. It is applicable only if Action is `Dragging`.
+`Cancel` : If this member is set to true, the drag and drop operation will be canceled.
+`DraggingNode`: Returns the `DraggingNodes`.
+`DropPosition`: Returns the position where dragged nodes are going to be dropped.
+`Position`: Returns the touch position of the drag item from the screen coordinates.
+
+## Auto scroll options
+
+Auto-scrolling during drag-and-drop operations in the `SfTreeView` enhances the user experience by automatically scrolling the view when dragging an item near the edges.
+
+### Auto Scroll Margin
+
+To adjust the auto-scroll margin in `SfTreeView`, set the `ScrollMargin` property of the `AutoScroller` to enable auto-scrolling while dragging. The default value is `15`. Auto-scrolling will be triggered when the drag item is within the `ScrollMargin` from the view's bounds.
+
+N> To disable auto-scrolling, set the `ScrollMargin` to `0`.
+
+{% tabs %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.AutoScroller.ScrollMargin = 20;
+{% endhighlight %}
+{% endtabs %}
+
+![Auto scroll](Images/drag-and-drop/auto-scroll.gif)
+
+### Auto Scroll Interval
+
+Adjust the auto-scroll interval during dragging by setting the `Interval` property of the `AutoScroller`. The default interval is `150 milliseconds`.
+
+{% tabs %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.AutoScroller.Interval = new TimeSpan(0, 0, 0, 0, 200);
+{% endhighlight %}
+{% endtabs %}
+
+### Disable Outside Scroll
+
+To prevent auto-scrolling when the dragged item is moved outside the `SfTreeView` during a drag, set the `AllowOutsideScroll` property of the `AutoScroller` to `false`. The default value is `true`.
+
+{% tabs %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.AutoScroller.AllowOutsideScroll = false;
+{% endhighlight %}
+{% endtabs %}
+
+## Auto Expand
+
+### Enable Auto Expand
+
+To enable auto-expanding of nodes when dragging items over them, set the `CanAutoExpand` property to `true`. The default value is `false`.
+
+{% tabs %}
+{% highlight xaml hl_lines="5" %}
+<ContentPage xmlns:treeView="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView">
+  <treeView:SfTreeView x:Name="treeView" 
+                       ItemsSource="{Binding Folders}"
+                       AllowDragging="True">
+        <treeView:SfTreeView.DragAndDropController>
+            <treeView:DragAndDropController CanAutoExpand="True"/>
+        </treeView:SfTreeView.DragAndDropController>
+   </treeView:SfTreeView>
+</ContentPage>
+{% endhighlight %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.SetBinding(SfTreeView.ItemsSourceProperty, new Binding("Folders"));
+treeView.DragAndDropController.CanAutoExpand = true;
+{% endhighlight %}
+{% endtabs %}
+
+![Enable Auto Expand](Images/drag-and-drop/enable-auto-expand.gif)
+
+### Auto Expand Delay
+
+To set the delay for auto-expanding nodes, use the `AutoExpandDelay` property. The default value is `3 seconds`.
+
+{% tabs %}
+{% highlight xaml hl_lines="5" %}
+<ContentPage xmlns:treeView="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView">
+  <treeView:SfTreeView x:Name="treeView" 
+                       ItemsSource="{Binding Folders}"
+                       AllowDragging="True">
+        <treeView:SfTreeView.DragAndDropController>
+            <treeView:DragAndDropController CanAutoExpand="True" AutoExpandDelay="0:0:1"/>
+        </treeView:SfTreeView.DragAndDropController>
+   </treeView:SfTreeView>
+</ContentPage>
+{% endhighlight %}
+{% highlight c# %}
+var treeView = new SfTreeView();
+treeView.AllowDragging = true;
+treeView.SetBinding(SfTreeView.ItemsSourceProperty, new Binding("Folders"));
+treeView.DragAndDropController.CanAutoExpand = true;
+treeView.DragAndDropController.AutoExpandDelay = new TimeSpan(0, 0, 0, 1);
+{% endhighlight %}
+{% endtabs %}
+
+## Disable dragging for particular item
+
+To disable dragging for a particular item, handle the `ItemDragging` event based on the conditions of the Action event argument.
+
+You can cancel the dragging action for a particular item by setting the `Cancel` property of the `ItemDraggingEventArgs`.
+
+{% tabs %}
+{% highlight c# %}
+private void TreeView_ItemDragging(object sender, ItemDraggingEventArgs e)
+{
+    if (e.Action == DragAction.Start)
+    {
+       var item = e.DraggingNodes[0].Content as File;
+       if (item.FolderName == "Sanitation.docx")
+       {
+          e.Cancel = true;
+       }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Cancel dropping for the dragged item
+
+To cancel dropping for the dragged item, handle the `ItemDragging` event based on the conditions of the Action event argument.
+
+You can cancel the dropping action for an item by setting the `Cancel` property of the `ItemDraggingEventArgs`.
+
+{% tabs %}
+{% highlight c# %}
+private void TreeView_ItemDragging(object sender, ItemDraggingEventArgs e)
+{
+   if (e.Action == DragAction.Dropping)
+   {
+      var item = e.TargetNode.Content as Folder;
+      if (item != null && item.FolderName == "Documents")
+      {
+        e.Cancel = true;
+      }
+   }
+}
+{% endhighlight %}
+{% endtabs %}