Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions wpf/Diagram/Swimlane/Lane/Interaction.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,18 @@ A Lane can be selected by clicking (tap) the header of the lane.
* Once you can resize the lane, the swimlane will be resized automatically.
* The lane can be resized either resizing the selector or the tight bounds of the child object. If the child node move to edge of the lane it can be automatically resized.
* The `SwimlaneChildChangedEvent` will notify the [`UnitHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitHeight) and [`UnitWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitWidth) changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html)
The following image shows how resize the lane.

The following image shows how to resize the lane.

![Lane Resizing](../Swimlane-images/Lane_Resize.gif)

## Lane swapping

* Lanes can be swapped by dragging the lanes over another lane.
* Helper should intimate the insertion point while lane swapping.
The following image shows how swapping the lane.
* The `SwimlaneChildChangedEvent` will notify the [`RowIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_RowIndex) and [`ColumnIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_ColumnIndex) changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html)
* Helper should intimate the insertion point while lane swapping.

The following image shows how to swap the lane.

![Lane Swapping](../Swimlane-images/Lane_Swapping.gif)

Expand All @@ -44,7 +46,8 @@ The following image shows how swapping the lane.
* Drag and drop the child nodes from lane to diagram.
* Drag and drop the child nodes from diagram to lane.
* Based on the child node interactions,the lane size should be updated.
The following image show children interaction in lane.

The following image shows interaction with the lane's children.

![Lane Children Interaction](../Swimlane-images/Child_Interaction.gif)

Expand Down
18 changes: 13 additions & 5 deletions wpf/Diagram/Swimlane/Lane/Lane.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,11 +209,19 @@ N> Default RotateAngle value of LaneHeader's Annotation is 270 degrees. If you w

{% tabs %}
{% highlight xaml %}
<Button Name="AddButton" Width="100" Height="30" IsEnabled="True" Content="Add Lane" ToolTip="Add Lane" Command="{Binding AddCommand}" Cursor="Hand"></Button>
<Button Name="RemoveButton" Width="100" Height="30" IsEnabled="True" Content="Remove Lane" ToolTip="Remove Lane" Command="{Binding RemoveCommand}" Cursor="Hand">
</Button>
<syncfusion:SfDiagram x:Name="diagram" Nodes="{Binding Nodes}"
Swimlanes="{Binding Swimlanes}" Connectors="{Binding Connectors}" SelectedItems="{Binding SelectedItems}" SnapSettings="{Binding SnapSettings}" HorizontalRuler="{Binding HorizontalRuler}" VerticalRuler="{Binding VerticalRuler}"/>

<Button Name="AddButton" Width="100" Height="30" IsEnabled="True" Content="Add Lane" ToolTip="Add Lane" Command="{Binding AddCommand}" Cursor="Hand"></Button>
<Button Name="RemoveButton" Width="100" Height="30" IsEnabled="True" Content="Remove Lane" ToolTip="Remove Lane" Command="{Binding RemoveCommand}" Cursor="Hand"></Button>

<syncfusion:SfDiagram x:Name="diagram"
Nodes="{Binding Nodes}"
Swimlanes="{Binding Swimlanes}"
Connectors="{Binding Connectors}"
SelectedItems="{Binding SelectedItems}"
SnapSettings="{Binding SnapSettings}"
HorizontalRuler="{Binding HorizontalRuler}"
VerticalRuler="{Binding VerticalRuler}" />


{% endhighlight %}
{% highlight c# %}
Expand Down
4 changes: 2 additions & 2 deletions wpf/Diagram/Swimlane/Phase.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ The [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseV

## Create an empty Phase

You can create the [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) and add into the[Phases](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection of the Swimlane.
You can create the [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) and add into the [Phases](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection of the Swimlane.

N> For Horizontal Swimlane, you must set the UnitWidth of the Phase. For Vertical Swimlane, you must set UnitHeight of the Phase.
N> For Horizontal Swimlane, you must set the `UnitWidth` of the Phase. For Vertical Swimlane, you must set `UnitHeight` of the Phase.

The following code example explains how to add phase at swimlane.

Expand Down
40 changes: 21 additions & 19 deletions wpf/Diagram/Swimlane/Swimlane-Palette.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,28 @@ Diagram elements such as [Lane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI

{% tabs %}
{% highlight xaml %}
<syncfusion:Stencil x:Name="stencil" BorderThickness="0,0,1,0" ExpandMode="All">
<syncfusion:Stencil.SymbolSource>
<syncfusion:SymbolCollection>
<!--Rendered HorizontalSwimlane-->
<syncfusion:LaneViewModel ID="HorizontalSwimlane" Key="Swimlane Shapes" Orientation="Horizontal" ></syncfusion:LaneViewModel>
<!--Rendered VerticalSwimlane-->
<syncfusion:LaneViewModel ID="VerticalSwimlane" Key="Swimlane Shapes" Orientation="Vertical" ></syncfusion:LaneViewModel>
<!--Rendered HorizontalPhase-->
<syncfusion:PhaseViewModel ID="HorizontalPhase" Key="Swimlane Shapes" Orientation="Horizontal" ></syncfusion:PhaseViewModel>
<!--Rendered VerticalPhase-->
<syncfusion:PhaseViewModel ID="VerticalPhase" Key="Swimlane Shapes" Orientation="Vertical"></syncfusion:PhaseViewModel>
</syncfusion:SymbolCollection>
</syncfusion:Stencil.SymbolSource>
<syncfusion:Stencil.SymbolGroups>
<syncfusion:SymbolGroups>
<!--Separate groups based on the key-->
<syncfusion:SymbolGroupProvider MappingName="Key"/>
</syncfusion:SymbolGroups>

<syncfusion:Stencil x:Name="stencil" BorderThickness="0,0,1,0" ExpandMode="All">
<syncfusion:Stencil.SymbolSource>
<syncfusion:SymbolCollection>
<!-- Rendered HorizontalSwimlane -->
<syncfusion:LaneViewModel ID="HorizontalSwimlane" Key="Swimlane Shapes" Orientation="Horizontal" />
<!-- Rendered VerticalSwimlane -->
<syncfusion:LaneViewModel ID="VerticalSwimlane" Key="Swimlane Shapes" Orientation="Vertical" />
<!-- Rendered HorizontalPhase -->
<syncfusion:PhaseViewModel ID="HorizontalPhase" Key="Swimlane Shapes" Orientation="Horizontal" />
<!-- Rendered VerticalPhase -->
<syncfusion:PhaseViewModel ID="VerticalPhase" Key="Swimlane Shapes" Orientation="Vertical" />
</syncfusion:SymbolCollection>
</syncfusion:Stencil.SymbolSource>
<syncfusion:Stencil.SymbolGroups>
<syncfusion:SymbolGroups>
<!-- Separate groups based on the key -->
<syncfusion:SymbolGroupProvider MappingName="Key" />
</syncfusion:SymbolGroups>
</syncfusion:Stencil.SymbolGroups>
</syncfusion:Stencil>
</syncfusion:Stencil>


{% endhighlight %}
{% endtabs %}
Expand Down
4 changes: 2 additions & 2 deletions wpf/Diagram/Swimlane/Swimlane.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Now, the swimlane will be as follows.

The Swimlane Header was the primary element for swimlanes. The [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Header) property of swimlane allows you to define its textual description and to customize its appearance.

>Note: By using this header,the swimlane interaction will be performed,like selection, dragging,and more.
N> By using this header,the swimlane interaction will be performed,like selection, dragging,and more.

The following code example explains how to define the swimlane header.

Expand Down Expand Up @@ -251,7 +251,7 @@ The following image shows how to edit the swimlane header.

The orientation of swimlane can be customized with the [`Orientation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Orientation) property of the header.

>Note: By default the swimlane orientation has Horizontal.
N> By default the swimlane orientation has Horizontal.

The following code example explains how to set the orientation of the swimlane.

Expand Down