Skip to content

WP-889895-Interaction Selection Page Issues #1371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 26, 2024
Merged

WP-889895-Interaction Selection Page Issues #1371

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
836d625
Merge pull request #1360 from Syncfusion-Content/hotfix/hotfix-v26.1.35
SyncfusionBuild Jun 13, 2024
c4c0e9e
WPF-889895-Corrected the Issues
satishraj-sf4377 Jun 14, 2024
054382d
WPF-889895-Removed the highlight from the properties with link
satishraj-sf4377 Jun 26, 2024
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
61 changes: 30 additions & 31 deletions wpf/Diagram/Interaction/Selection.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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|
|--|--|
Expand All @@ -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# %}
Expand All @@ -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)

Expand All @@ -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 %}
Expand All @@ -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# %}
Expand Down Expand Up @@ -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

Expand Down