DOCINFRA-2341_merged_using_automation

wpf/Diagram/Interaction/Deletion.md

@@ -11,27 +11,27 @@ documentation: ug
 
 Selected objects can be deleted by using the Delete key or In-built Delete command through QuickCommand. 
 
-* [ItemDeletedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) will notify you with the deleted item in argument. To explore about arguments , please refer to [ItemDeletedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletedEventArgs.html).
+* [ItemDeletedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeleted) will notify you with the deleted item in argument. To explore about arguments , please refer to [ItemDeletedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletedEventArgs.html).
 
-* [ItemDeletingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) will notify you with the item , option to cancel the deleting operation of item and option to decide on deleting dependent Connector when its Source/Target gets deleting. To explore about arguments , please refer to [ItemDeletingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletingEventArgs.html).  
+* [ItemDeletingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeletingEvent) will notify you with the item , option to cancel the deleting operation of item and option to decide on deleting dependent Connector when its Source/Target gets deleting. To explore about arguments , please refer to [ItemDeletingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletingEventArgs.html).  
 
 {% tabs %}
 {% highlight C# %}
 
 (diagram.Info as IGraphInfo).ItemDeletingEvent += MainWindow_ItemDeletingEvent;
 
-        /// <summary>
-        /// DiagramPreviewEventArgs is the Base class for EventArgs.
-        /// Casting the args will help us to get ItemDeletingEventArgs.
-        /// </summary>
-        /// <param name="sender"></param>
-        /// <param name="args"></param>
-        private void MainWindow_ItemDeletingEvent(object sender, DiagramPreviewEventArgs args)
-        {
-            //For Deleting Node Without its Dependent Connector
-
-            (args as ItemDeletingEventArgs).DeleteDependentConnector = false;
-        }
+/// <summary>
+/// DiagramPreviewEventArgs is the Base class for EventArgs.
+/// Casting the args will help us to get ItemDeletingEventArgs.
+/// </summary>
+/// <param name="sender"></param>
+/// <param name="args"></param>
+private void MainWindow_ItemDeletingEvent(object sender, DiagramPreviewEventArgs args)
+{
+    //For Deleting Node Without its Dependent Connector
+
+    (args as ItemDeletingEventArgs).DeleteDependentConnector = false;
+}
 
 {% endhighlight %}
 {% endtabs %}

wpf/Diagram/Interaction/Selection.md

@@ -27,15 +27,15 @@ Multiple elements can be selected with the following ways.
 
 1. Shift+Click
 
-You can select the group of elements that are contiguous (i.e. next to each other) by clicking one element, and then holding Shift and clicking the last element. All the element in the specified region are then selected.
+    You can select the group of elements that are contiguous (i.e. next to each other) by clicking one element, and then holding Shift and clicking the last element. All the element in the specified region are then selected.
 
 2. Ctrl+Click
 
-During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.
+    During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.
 
 3. Selection rectangle / Rubber band selection
 
-Clicking and dragging the Diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end.
+    Clicking and dragging the Diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end.
 
 Multiple selected elements are visually represented as shown.
 
@@ -45,7 +45,7 @@ Multiple selected elements are visually represented as shown.
 
 #### Selection mode
 
-[`SingleSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_SingleSelectionMode) and [`MultipleSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_MultipleSelectionMode) properties of SfDiagram allows us to decide which kind of selection need to be handle .To explore about modes, please refer to [SingleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SingleSelectionMode.html) and [MultipleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MultipleSelectionMode.html).
+[SingleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_SingleSelectionMode) and [MultipleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_MultipleSelectionMode) properties of `SfDiagram` allows us to decide which kind of selection need to be handle .To explore about modes, please refer to [SingleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SingleSelectionMode.html) and [MultipleSelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MultipleSelectionMode.html).
 
 |SingleSelectionMode|Description|
 |--|--|
@@ -56,7 +56,7 @@ Multiple selected elements are visually represented as shown.
 {% highlight Xaml %}
 
 <Syncfusion:SfDiagram x:Name="Diagram" 
-                               SingleSelectionMode="Select">
+                      SingleSelectionMode="Select">
 {% endhighlight %}
 
 {% highlight C# %}
@@ -71,11 +71,10 @@ Diagram.SingleSelectionMode = SingleSelectionMode.Select;
 |MultipleSelectionMode|Description|
 |--|--|
 |Default|Enables all behaviors of the control.|
-|HoldKeyAndTap|Enables or disables elements can be selected by holding a key and tapping.|
-|JustTap|Enables or disables elements can be selected by tapping.|
-|None|Disables all behaviors.|
-|RubberBandCompleteIntersect|Enables or disables elements that are completely positioned in the selection rectangle will be selected.|
-|RubberBandPartialIntersect|Elements that intersect with the selection rectangle will be selected.|
+|HoldKeyAndTap|Enables or disables elements that can be selected by holding a key and tapping.|
+|JustTap|Enables or disables elements that can be selected by tapping.|
+|RubberBandCompleteIntersect|Enables or disables the selection of elements that are completely positioned within the selection rectangle.|
+|RubberBandPartialIntersect|Elements intersecting with the selection rectangle will be selected.|
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Interaction/Selectionmode-sample)
 
@@ -89,11 +88,9 @@ The following code example illustrates how to select/unselect an item  programma
 {% highlight C# %}
 
 // Selects an elements 
-
 node.IsSelected = true;
 
 // Unselect an element
-
 node.IsSelected = false;
 
 {% endhighlight %}
@@ -116,26 +113,28 @@ Multiple Selection will show the preview for the selected items. We have provide
 {% tabs %}
 {% highlight Xaml %}
 
-            <Style TargetType="Shape" x:Key="FirstSelectionindicatorstyle">
-                <Setter Property="StrokeThickness" Value="2"/>
-                <Setter Property="Stroke" Value="Orange"/>
-            </Style>
-
-            <Style TargetType="Shape" x:Key="NodeSelectionindicatorstyle">
-                <Setter Property="StrokeThickness" Value="2"/>
-                <Setter Property="Stroke" Value="Blue"/>
-            </Style>
+    <Style TargetType="Shape" x:Key="FirstSelectionindicatorstyle">
+        <Setter Property="StrokeThickness" Value="2"/>
+        <Setter Property="Stroke" Value="Orange"/>
+    </Style>
 
-            <Style TargetType="Shape" x:Key="connectorselectionindicatorstyle">
-                <Setter Property="StrokeThickness" Value="2"/>
-                <Setter Property="Stroke" Value="Red"/>
-            </Style>
+    <Style TargetType="Shape" x:Key="NodeSelectionindicatorstyle">
+        <Setter Property="StrokeThickness" Value="2"/>
+        <Setter Property="Stroke" Value="Blue"/>
+    </Style>
 
+    <Style TargetType="Shape" x:Key="connectorselectionindicatorstyle">
+        <Setter Property="StrokeThickness" Value="2"/>
+        <Setter Property="Stroke" Value="Red"/>
+    </Style>
+
+
+    <Syncfusion:SfDiagram x:Name="Diagram" 
+                        FirstSelectionIndicatorStyle="{StaticResource FirstSelectionindicatorstyle}"
+                        NodeSelectionIndicatorStyle="{StaticResource NodeSelectionindicatorstyle}"
+                        ConnectorSelectionIndicatorStyle="{StaticResource connectorselectionindicatorstyle}">
+    </Syncfusion:SfDiagram>
 
-<Syncfusion:SfDiagram x:Name="Diagram" 
-                              FirstSelectionIndicatorStyle="{StaticResource FirstSelectionindicatorstyle}"
-                              NodeSelectionIndicatorStyle="{StaticResource NodeSelectionindicatorstyle}"
-                              ConnectorSelectionIndicatorStyle="{StaticResource connectorselectionindicatorstyle}">
 {% endhighlight %}
 
 {% highlight C# %}
@@ -166,9 +165,9 @@ Diagram control provides support to change the selection handle display mode of
 
 ## Events
 
-* [ItemSelectingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) and [ItemSelectedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) for selecting an element, will notify you the item and its original source. To explore about arguments ,please refer to [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html) .
+* [ItemSelectingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemSelectingEvent) and [ItemSelectedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemSelectedEvent) for selecting an element, will notify you the item and its original source. To explore about arguments ,please refer to [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html) .
 
-* [ItemUnselectingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) and [ItemUnselectedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) for unselecting an element, will notify you the item and its original source.To explore about arguments ,please refer to [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html) .
+* [ItemUnselectingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemUnSelectingEvent) and [ItemUnselectedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemUnSelectedEvent) for unselecting an element, will notify you the item and its original source.To explore about arguments ,please refer to [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html) .
 
 ## See Also 
 

wpf/Diagram/Interaction/UserHandle.md

@@ -23,35 +23,35 @@ SfDiagram provides support to define custom quick command around the Nodes, Conn
 
 {% highlight Xaml %}
 
-        <Style TargetType="Path" x:Key="QuickCommandstyle">
-           <Setter Property="Stretch" Value="Fill"/>
-           <Setter Property="Fill" Value="Black"/>
-           <Setter Property="Stroke" Value="White"/>
-        </Style>
+<Style TargetType="Path" x:Key="QuickCommandstyle">
+    <Setter Property="Stretch" Value="Fill"/>
+    <Setter Property="Fill" Value="Black"/>
+    <Setter Property="Stroke" Value="White"/>
+</Style>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
  // Element to represent the frequently used commands
-            QuickCommandViewModel quick = new QuickCommandViewModel()
-            {
-                // Outer part of quick command.
-                Shape = this.Resources["Ellipse"],
-               // appearence of shape.
-                ShapeStyle = this.Resources["QuickCommandstyle"] as Style,
-                //Inner part of quick command and it allows to host any UI elements
-                Content =
-                    "M3.7399902,0L16,12.258972 28.26001,0 32,3.7399902 19.73999,16 32,28.258972 28.26001,32 16,19.73999 3.7399902,32 0,28.258972 12.26001,16 0,3.7399902z",
-               
-                Command = (Diagram.Info as IGraphInfo).Commands.Cut
-            };
-
-            // Adding new QuickCommand object in Commands collection
-            (Diagram.SelectedItems as SelectorViewModel).Commands = new QuickCommandCollection()
-            {
-                quick
-            };
+QuickCommandViewModel quick = new QuickCommandViewModel()
+{
+    // Outer part of quick command.
+    Shape = this.Resources["Ellipse"],
+    // appearence of shape.
+    ShapeStyle = this.Resources["QuickCommandstyle"] as Style,
+    //Inner part of quick command and it allows to host any UI elements
+    Content =
+        "M3.7399902,0L16,12.258972 28.26001,0 32,3.7399902 19.73999,16 32,28.258972 28.26001,32 16,19.73999 3.7399902,32 0,28.258972 12.26001,16 0,3.7399902z",
+
+    Command = (Diagram.Info as IGraphInfo).Commands.Cut
+};
+
+// Adding new QuickCommand object in Commands collection
+(Diagram.SelectedItems as SelectorViewModel).Commands = new QuickCommandCollection()
+{
+    quick
+};
 
 {% endhighlight %}
 {% endtabs %}   
@@ -70,9 +70,9 @@ N> By default QuickCommand will host on Node. [VisibilityMode](https://help.sync
 
 QuickCommand can be aligned relative to boundaries of the Node or segments of the Connector. 
 
-* [`OffsetX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_OffsetY) property of QuickCommand is used to align the QuickCommand based on fractions. The default value is 0.5.
-* [`HorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_HorizontalAlignment) and [`VerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_VerticalAlignment) properties are used to align the quick commands for horizontal and vertical positions.
-* [`Margin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_Margin) is an absolute value used to add some blank space in any one of its four sides.
+* [OffsetX](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_OffsetY) property of QuickCommand is used to align the QuickCommand based on fractions. The default value is 0.5.
+* [HorizontalAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_VerticalAlignment) properties are used to align the quick commands for horizontal and vertical positions.
+* [Margin](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.QuickCommandViewModel.html#Syncfusion_UI_Xaml_Diagram_QuickCommandViewModel_Margin) is an absolute value used to add some blank space in any one of its four sides.
 
 The Alignment of QuickCommand is similar  to [Annotation Alignment](https://help.syncfusion.com/wpf/sfdiagram/annotation/positioningandappearance).   
 

wpf/Diagram/Interaction/ZoomPan.md

@@ -9,13 +9,13 @@ documentation: ug
 
 # Zoom Pan in WPF Diagram
 
-* We can Zoom in or Zoom out the diagram view.Diagram can be zoomed in or out by using Ctrl + mouse wheel.
+* We can Zoom in or Zoom out the diagram view. Diagram can be zoomed in or out by simply holding down the Ctrl key and scrolling with your mouse wheel.
 
 * When a large Diagram is loaded, only certain portion of the Diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the Diagram.
 
 ![Zoom Pan](Interaction_images/ZoomPan.gif)
 
-* `IntelliMouse Pan` : We can pan the diagram using scroll wheel. To pan, user must hold down the Scroll Wheel anywhere in the diagram and move the cursor towards any direction (for example: On moving cursor towards left direction, diagram will be panned towards left). And releasing Scroll Wheel will stop the panning. Speed of the Panning is proportional to the distance between the Scroll Wheel pressed position and current mouse position, i.e. panning will be faster if the distance is large and slower if the distance is small. 
+* **IntelliMouse Pan** : We can pan the diagram using scroll wheel. To pan, user must hold down the Scroll Wheel anywhere in the diagram and move the cursor towards any direction (for example: On moving cursor towards left direction, diagram will be panned towards left). And releasing Scroll Wheel will stop the panning. Speed of the Panning is proportional to the distance between the Scroll Wheel pressed position and current mouse position, i.e. panning will be faster if the distance is large and slower if the distance is small. 
 
 ![WPF Diagram IntelliMousePan](Interaction_images/IntelliMousePan.png)