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
18 changes: 9 additions & 9 deletions wpf/Diagram/Interaction/Keyboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ documentation: ug

# Keyboard Support in WPF SfDiagram

[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to interact with the elements with key gestures. By default, some in-built commands are bound with a relevant set of key combinations.
[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to interact with elements using key gestures. By default, some built-in commands are mapped to keyboard shortcuts.

The following table illustrates list of Commands with key Gesture.
The following table illustrates the list of commands and their key gestures.


| Shortcut Key | Command | Description |
|---|---|---|
| Ctrl + A | Select all | Select all the Nodes/Connectors in diagram. |
| Ctrl + C | Copy | Copy the selected elements in the diagram. |
| Ctrl + X | Cut | Cut the selected elements in the diagram. |
| Ctrl + V | Paste | Paste the cut or copy the elements in the diagram. |
| Ctrl + V | Paste | Paste the cut or copied elements in the diagram. |
| Ctrl + Z | Undo | Undo(Reverse the last editing action performed on diagram). |
| Ctrl + Y | Redo | Redo(Restores the last editing action when no other actions have occurred since the last undo on diagram). |
| Ctrl + D | Duplicate | Copies the selected element from the diagram and pastes the copied element into the diagram. |
Expand All @@ -39,16 +39,16 @@ The following table illustrates list of Commands with key Gesture.
| MouseScroll | Zoom | Scrolls the diagram page up and down in a vertical direction. |
| Shift + MouseScroll | Zoom | Scrolls the diagram page left and right in a horizontal direction. |
| Ctrl + MouseScroll | Zoom | Zoom(Zoom in/Zoom out the diagram). |
| Ctrl + G | Group | Grouping the element in the diagram. |
| Ctrl + Shift + U | UnGroup | UnGrouping the element in the diagram. |
| Ctrl + G | Group | Groups the selected elements in the diagram. |
| Ctrl + Shift + U | UnGroup | Ungroups the selected group in the diagram. |
| Ctrl + Shift + B | SendToBack | Moves the selected element behind all the other overlapped elements. |
| Ctrl + [ | SendBackward | Moves the selected element behind the underlying element. |
| Ctrl + Shift + F | BringToFront | Brings the selected element to front over all the other overlapped elements. |
| Ctrl + ] | BringForward | Moves the selected element over the nearest overlapping element. |
| Ctrl + PlusKey(+)|Zoom | Zoom in the diagram. |
| Ctrl + MinusKey(-)| Zoom | Zoom out the diagram. |
| Ctrl + 0 (number 0) | Reset | To reset horizontal Offset, vertical Offset, and zoom level of the Diagram. |
| Ctrl + Shift + W | FitToPage | Fit the diagram content into the view with respect to either width, height, or at the whole. |
| Ctrl + Shift + W | FitToPage | Fit the diagram content into the view with respect to either width, height, or as the whole. |
| F2 | EditAnnotation | Enable annotation editing mode of the first selected diagram element. |
| Enter | SelectFocusedItem | Selects the focused item. |
| Tab | FocusToNextItem | Focus on the item next to the selected item. |
Expand All @@ -62,14 +62,14 @@ The following table illustrates list of Commands with key Gesture.
| Ctrl + U | ToggleUnderline | Adds and removes the Underline text style to the annotation. |
| Ctrl + 1 | Pointer Tool | To select, move or resize the elements in the diagram. |
| Ctrl + 2 | Text Tool | To draw a text node. |
| Ctrl + 3 | Connector Tool | To draw a orthogonal connector. |
| Ctrl + 5 | Freehand Tool | To draw a free hand connections. |
| Ctrl + 3 | Connector Tool | To draw an orthogonal connector. |
| Ctrl + 5 | Freehand Tool | To draw a freehand connections. |
| Ctrl + 6 | Line Tool | To draw a straight line connector. |
| Ctrl + 8 | Rectangle Tool | To draw a rectangle shaped node. |
| Ctrl + 9 | Ellipse Tool | To draw an ellipse shaped node.|
| Esc | Cancel | Stops the annotation editing or clears the selection of a diagram element. |

To add custom commands, configure or modify key or mouse gesture through [Command Manager](/wpf/diagram/commands/alignment#command-manager "Command Manager")
To add custom commands, configure or modify key or mouse gesture through [Command Manager](https://help.syncfusion.com/wpf/diagram/commands/command-manager)

[View sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Interaction/KeyboardShortcuts-sample)

Expand Down
38 changes: 22 additions & 16 deletions wpf/Diagram/Interaction/Selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,52 @@ documentation: ug

[Selector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Selector.html) provides a visual representation of selected elements. It behaves like a container and enables you to update the size, position, and rotation angle of the selected elements through interaction and programmatically. Single or multiple elements can be selected at a time.

### Single Selection
## Single Selection

An element can be selected by clicking that element. During single click, all previously selected items are cleared.The following image shows how the selected elements are visually represented.
An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.

![Single Selection](Interaction_images/Singleselect.gif)

### Selecting a Group

When a child element of any [Group](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.GroupViewModel.html) is clicked, its contained Group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent Group to its children.

### Multiple Selection
## Multiple Selection

Multiple elements can be selected with the following ways.
Multiple elements can be selected in 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.

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 will 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 held down 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 you 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.

![multiple selection](Interaction_images/multiselect.gif)

* [SelectorChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_SelectorChangedEvent) will notify you the OffsetX, OffsetY, Height, Width, Rotate Angle and interaction state with their old and new values. To explore about arguments, please refer to [SelectorChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html) .
* [SelectorChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_SelectorChangedEvent) will notify you the OffsetX, OffsetY, Height, Width, Rotate Angle and interaction state with their old and new values. To learn about arguments, please refer to [SelectorChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html) .

#### Selection mode
### 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 you to decide which kind of selection need to be handle .To learn 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).

**Default Values**

* By default, **SingleSelectionMode** is set to **ToggleSelection**, which allows a selected node to be deselected by clicking it again.

* By default, **MultipleSelectionMode** is set to **Default**, which enables all standard multiple-selection behaviors supported by the control.

|SingleSelectionMode|Description|
|--|--|
|Select|Enables or disables single selection mode as Select. It is used to stop Unselection again click the same node which means the node remains always selected.|
|ToggleSelection|Enables or disables single selection mode as ToggleSelection.It is used to perform selection or unselection again click the same node.|
|Select|Enables single selection mode as Select. Clicking an already selected node does not deselect it; the node remains selected.|
|ToggleSelection|Enables single selection mode as ToggleSelection. Clicking an already selected node toggles its selection state, allowing it to be selected or deselected.|

{% tabs %}
{% highlight Xaml %}
Expand Down Expand Up @@ -87,10 +93,10 @@ The following code example illustrates how to select/unselect an item programma
{% tabs %}
{% highlight C# %}

// Selects an elements
// Selects an element
node.IsSelected = true;

// Unselect an element
// Unselects an element
node.IsSelected = false;

{% endhighlight %}
Expand All @@ -102,7 +108,7 @@ node.IsSelected = false;

### Selection Indicator Style

Multiple Selection will show the preview for the selected items. We have provided customization option for the appearance of the Preview.
Multiple selection shows a preview of the selected items. We have provided customization option for the appearance of the Preview.

| Style | Behavior |
| --|--|
Expand Down Expand Up @@ -165,9 +171,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#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) .
* [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 learn 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#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) .
* [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 learn 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
24 changes: 22 additions & 2 deletions wpf/Diagram/Interaction/Tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ documentation: ug

# Tooltip in WPF SfDiagram

In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. In [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram), Tooltip is used to provide information about the position, size, and rotation angle while dragging, resizing, and rotating the diagram elements.
In Graphical User Interface (GUI), the tooltip is a message that is displayed when the mouse hovers over an element. In [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram), The tooltip is used to provide information about the position, size, and rotation angle while dragging, resizing, and rotating the diagram elements.

N> By default, tooltips are enabled and displayed during dragging, resizing, and rotating interactions. The tooltip is shown in a static position unless the `SelectorHandleDisplayMode` property is set to `Compact`.

## Static Tooltip

Expand All @@ -19,6 +21,24 @@ By default, the diagram displays the tooltip at a static position during an inte

## Dynamic Tooltip

Diagram control displays the tooltip at a dynamic position when the [`SelectorHandleDisplayMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorHandleDisplayMode.html) is set as `Compact`. When resizing a diagram element, the tooltip is positioned closer to the resizer thumbs, and when dragging, the tooltip is positioned automatically in the nearest available viewport area around that diagram element. The following image illustrates how the dynamic tooltip works.
Diagram control displays the tooltip at a dynamic position when the [`SelectorHandleDisplayMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorHandleDisplayMode.html) is set to `Compact`. When resizing a diagram element, the tooltip is positioned closer to the resizer thumbs, and when dragging, the tooltip is positioned automatically in the nearest available viewport area around that diagram element. The following image illustrates how the dynamic tooltip works.

{% tabs %}
{% highlight Xaml %}

<syncfusion:SfDiagram x:Name="diagram" SelectorHandleDisplayMode="Compact" >

</syncfusion:SfDiagram>

{% endhighlight %}

{% highlight C# %}

SfDiagram Diagram = new SfDiagram();

Diagram.SelectorHandleDisplayMode = SelectorHandleDisplayMode.Compact;

{% endhighlight %}
{% endtabs %}

![Dynamic Tooltip](Interaction_images/DynamicTooltip.gif)
Loading