Skip to content

WPF-1038171-Need to modify the Constraints file content #2341

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

Open
ArunKumarSF4054 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

WPF-1038171-Need to modify the Constraints file content #2341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
444be0a
WPF-1038171-Constraints_file_updated
ArunKumarSF4054 Jul 8, 2026
cb068be
AdditionalChanges
ArunKumarSF4054 Jul 16, 2026
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
10 changes: 8 additions & 2 deletions wpf/Diagram/Annotation/DefineAnnotation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@ An annotation can be added to a node or connector by defining the annotation obj
//Initialize the diagram
SfDiagram diagram = new SfDiagram();

//Initialize NodeCollection to SfDiagram
diagram.Nodes = new NodeCollection();

//Initialize ConnectorCollection to SfDiagram
diagram.Connectors = new ConnectorCollection();

//Initialize the Node View Model
NodeViewModel node = new NodeViewModel()
{
Expand Down Expand Up @@ -128,7 +134,7 @@ You can add any number of annotations to a node or connector.
//Initialize the Annotation Collection
Annotations = new ObservableCollection<IAnnotation>()
{
//Initialize the multiple annotation
//Initialize multiple annotation
new AnnotationEditorViewModel()
{
Content = "Annotation",
Expand All @@ -152,7 +158,7 @@ Annotations = new ObservableCollection<IAnnotation>()

## See Also

[How to add annotations to nodes/connectors and its customization?](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Annotations)
[How to add annotations to nodes/connectors and their customization?](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Annotations)

[How to add image annotations to a Node?](https://support.syncfusion.com/kb/article/6078/how-to-add-image-annotations-to-a-node-in-wpf-diagram-sfdiagram-control)

Expand Down
6 changes: 3 additions & 3 deletions wpf/Diagram/Annotation/Interaction/Dragging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To learn about annotation constraints, refer to the [Annotation Constraints](htt

## Dragging the annotation

Dragging of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Draggable`.
Dragging an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Draggable`.

{% tabs %}

Expand Down Expand Up @@ -47,7 +47,7 @@ Annotations = new ObservableCollection<IAnnotation>()

## Nudging an annotation

Diagram allows users to nudge annotations by one pixel in a specific direction using the arrow keys. By enabling the `AnnotationConstraints.Selectable` and `AnnotationConstraints.Draggable` through the `Constraints` property in the `AnnotationEditorViewModel` class, users can interact with annotations and adjust their positions incrementally. Additionally, holding down the shift key while pressing the arrow key will move the annotation ten pixels instead of one.
Diagram allows users to nudge annotations by one pixel in a specific direction using the arrow keys. By enabling the `AnnotationConstraints.Selectable` and `AnnotationConstraints.Draggable` through the `Constraints` property in the `AnnotationEditorViewModel` class, users can interact with annotations and adjust their positions incrementally. Additionally, holding down the Shift key while pressing the arrow key will move the annotation ten pixels instead of one.

![WPF Diagram Annotation Nudging](Annotation_images/wpf-diagram-annotation-nudging.gif)

Expand Down Expand Up @@ -86,7 +86,7 @@ Annotations = new ObservableCollection<IAnnotation>()
{% endtabs %}

| Property | Value | Output | Keyboard Output |
|---|---|---|---| --- |
|---|---|---|---|
| DragLimit | (10,10,10,10) | ![WPF Diagram Annotation NoWrap](Annotation_images/wpf-diagram-annotation-drag-limit-default.gif) | ![WPF Diagram Annotation Nudging](Annotation_images/wpf-diagram-annotation-nudging-draglimit-default.gif) |
| |(40,80,40,40) | ![WPF Diagram Annotation Wrap](Annotation_images/wpf-diagram-annotation-custom-drag-limit.gif) | ![WPF Diagram Annotation Nudging Custom](Annotation_images/wpf-diagram-annotation-nudging-draglimit-custom.gif) |

8 changes: 4 additions & 4 deletions wpf/Diagram/Annotation/Interaction/Rotating.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ To learn about annotation constraints, refer to the [Annotation Constraints](htt

## Rotating the annotation

Rotation of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Rotatable`.
Rotation an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Rotatable`.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -47,7 +47,7 @@ Annotations = new ObservableCollection<IAnnotation>()

## How to customize the annotation rotation

The [`RotationReference`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_RotationReference) property of the annotation is to define the rotation based on Page or its host node or connector.To learn about the Rotate Reference property, refer to the [RotationReference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.RotationReference.html) .
The [`RotationReference`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_RotationReference) property of the annotation is to define the rotation based on Page or its host node or connector. To learn about the Rotate Reference property, refer to the [RotationReference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.RotationReference.html) .

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -76,6 +76,6 @@ Annotations = new ObservableCollection<IAnnotation>()
{% endtabs %}

| Values | Description | Node |
|---|---|---|---|
|---|---|---|
| Page | While rotating the node, annotation will not be rotated. | ![WPF Diagram Annotation Rotation Page](Annotation_images/wpf-diagram-annotation-rotation-page.gif) |
| Wrap | While rotating the node, annotation will also be rotated with node. | ![WPF Diagram Annotation Rotation Parent](Annotation_images/wpf-diagram-annotation-rotation-parent.gif) |
| Wrap | While rotating the node, annotation will also be rotated with the node. | ![WPF Diagram Annotation Rotation Parent](Annotation_images/wpf-diagram-annotation-rotation-parent.gif) |
6 changes: 3 additions & 3 deletions wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: ug

# How to Select and Resize the Annotation

Basic intersections of selecting and resizing can be applied over annotation. These interactions can be controlled by annotation and its parent node or connector.
Basic interactions of selecting and resizing can be applied over annotation. These interactions can be controlled by annotation and its parent node or connector.

To learn about annotation constraints, refer to the [Annotation Constraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationConstraints.html).

## Selecting the annotation

Selection of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Selectable`.
Selection of an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Selectable`.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -52,7 +52,7 @@ Annotations = new ObservableCollection<IAnnotation>()

## Resizing the annotation

Resizing of annotation can be enabled by using the `Constraints` property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Resizable`.
Resizing an annotation can be enabled by using the `Constraints` property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Resizable`.

{% tabs %}
{% highlight xaml %}
Expand Down
39 changes: 21 additions & 18 deletions wpf/Diagram/Annotation/PositioningAndAppearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ documentation: ug

## How to position node's annotation

Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class.
Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignment properties of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class.

Annotations of a node can be positioned using the following properties of `AnnotationEditorViewModel` class.

Expand Down Expand Up @@ -238,21 +238,21 @@ The following image shows the relationship between the annotation position and L

### Displacement

The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in center of the connector path. When you assign value to the `Displacement` property, annotation will be displaced from its position by displacment value. Default value is 0d.
The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in the center of the connector path. When you assign value to the `Displacement` property, annotation will be displaced from its position by displacement value. Default value is 0d.

{% tabs %}
{% highlight xaml %}
<!--Initialize the Annotation ollection-->
<!--Initialize the Annotation Collection-->
<syncfusion:AnnotationCollection>
<!--Initialize the Annotation with dispalcement property-->
<!--Initialize the Annotation with displacement property-->
<syncfusion:AnnotationEditorViewModel Content="Annotation" Displacement="60" />
</syncfusion:AnnotationCollection>
{% endhighlight %}
{% highlight C# %}
//Initialize the Annotation Collection
Annotations = new ObservableCollection<IAnnotation>()
{
//Initialize the Annotation with dispalcement property
//Initialize the Annotation with displacement property
new AnnotationEditorViewModel()
{
Content = "Annotation",
Expand Down Expand Up @@ -303,7 +303,7 @@ Annotations = new ObservableCollection<IAnnotation>()
|Pivot | (0.5,0.5) | ![Target](Annotation_images/Pivot5.PNG) |
| | (0,0) | ![Source](Annotation_images/Pivot0,0.png) |
| | (0,1) | ![Center](Annotation_images/Pivot0,1.PNG) |
| | 1,0) | ![Target](Annotation_images/Pivot1,0.PNG) |
| | (1,0) | ![Target](Annotation_images/Pivot1,0.PNG) |
| | (1,1) | ![Target](Annotation_images/Pivot1,1.png) |

### Margin
Expand Down Expand Up @@ -350,7 +350,7 @@ Diagram allows you to set size for annotations by using the [`UnitWidth`](https:

<!--Initialize the AnnotationCollection-->
<syncfusion:AnnotationCollection>
<!--Initialize the annotation wih size-->
<!--Initialize the annotation with size-->
<syncfusion:AnnotationEditorViewModel Content="Annotation"
UnitWidth="50" UnitHeight="50" />
</syncfusion:AnnotationCollection>
Expand Down Expand Up @@ -408,7 +408,7 @@ Annotations = new AnnotationCollection()
{% endtabs %}

| Values | Description | Node |
|---|---|---|---|
|---|---|---|
| NoWrap | Text will not be wrapped. | ![NoWrap](Annotation_images/Annotation_img18.png) |
| Wrap | Text-wrapping occurs when the text overflows beyond the available annotation container width. | ![Wrap](Annotation_images/Annotation_img19.png) |
| WrapWithOverflow | Text-wrapping occurs when the text overflows beyond the available annotation container width. However, the text may overflow beyond the annotation container width in the case of a very long word. | ![Overflow](Annotation_images/annotation_img20.png) |
Expand All @@ -419,24 +419,27 @@ Default appearance of the annotations can be customized by using the [`EditTempl

{% tabs %}
{% highlight xaml %}
<Window.Resources>

<!--Template overriding for view template-->
<DataTemplate x:Key="viewTemplate">
<TextBlock Text="{Binding Path=Content, Mode=TwoWay}"
<!--Template overriding for view template-->
<DataTemplate x:Key="viewTemplate">
<TextBlock Text="{Binding Path=Content, Mode=TwoWay}"
FontStyle="Italic" FontSize="12"
FontFamily="TimesNewRomen"
TextDecorations="Underline"
FontWeight="Bold"
Foreground="Black"/>
</DataTemplate>
</DataTemplate>

<!--Template overriding for edit template-->
<DataTemplate x:Key="editTemplate">
<TextBox Text="{Binding Path=Content, Mode=TwoWay}"
<!--Template overriding for edit template-->
<DataTemplate x:Key="editTemplate">
<TextBox Text="{Binding Path=Content, Mode=TwoWay}"
FontStyle="Oblique" FontSize="12"
FontFamily="TimesNewRomen"
FontWeight="Bold" Foreground="Red"/>
</DataTemplate>
</DataTemplate>

</Window.Resources>

<!--Initialize the Annotation Collection-->
<syncfusion:AnnotationCollection>
Expand Down Expand Up @@ -466,7 +469,7 @@ Annotations = new ObservableCollection<IAnnotation>()

![WPF Diagram Annotation Appearance](Annotation_images/wpf-diagram-annotation-appearance.PNG) &ensp;&ensp;&ensp;&ensp;&ensp; ![WPF Diagram Annotation EditTemplate](Annotation_images/wpf-diagram-annotation-edittemplate.png)

Also, diagram have `TextAnnotationViewModel` class to customize the appearance of the annotation directly instead of overriding view and edit templates of the annotation. This class customization will be applied for both view and edit mode of annotation.
Also, diagram has `TextAnnotationViewModel` class to customize the appearance of the annotation directly instead of overriding view and edit templates of the annotation. This class customization will be applied for both view and edit mode of annotation.

{% tabs %}
{% highlight xaml %}
Expand All @@ -486,7 +489,7 @@ Also, diagram have `TextAnnotationViewModel` class to customize the appearance o
//Initialize the Annotation Collection
Annotations = new ObservableCollection<IAnnotation>()
{
//Intialize the Text Annotation View Model class
//Initialize the Text Annotation View Model class
new TextAnnotationViewModel()
{
Text = "Annotation",
Expand Down
Loading