Draw "empty" shapes with SF Diagram

[Pierre-Christophe DUS]

Hello,

I'm interested by the SFDiagram control for drawing basic "empty" shapes on an image.

But I don't know if I can use it: on the sample "Diagram Builder", we can add shapes and define their properties, but the "Fill" property can't be define on empty or transparent...

Is these feasable?

Is there a simpler sample allowing ton drag and drop basic shapes?

[Keerthivasan Ramamoorthy]

Hi Pierre, 

 

Please find the responses to your queries as below. 

 

S.no	Query	Response
1	I'm interested by the SFDiagram control for drawing basic "empty" shapes on an image.  Is there a simpler sample allowing ton drag and drop basic shapes?	Requirement: “Need to drag and Drop a symbol from stencil”,    We have analyzed and created a sample to achieve your requirement. We have provided a sample to represent this. Please refer to the sample link as below.    Sample link:127065__Stencil     Sample details:  In sample, we have adding NodeViewModel to SymbolCollection and this Collection will be the SymbolSource to the Stencil. Based on the SymbolSource, the Stencil will populate the Symbols. For more details about stencil, please refer the below online documentation link.    Online Documentation Link: https://help.syncfusion.com/uwp/sfdiagram/stencil    Note:  In sample, we have set “Fill” property of the Node ShapeStyle to transparent. if we won’t set Fill property, we were unable to select the Dropped Nodes from the Diagram.
2	I don't know if I can use it: on the sample "Diagram Builder", we can add shapes and define their properties, but the "Fill" property can't be define on empty or transparent...  Is these feasable?	There is no way to set “Fill" property can be defining on empty. But we have to check for the transparent if it is needed.

 

 

Regards, 

Keerthivasan R. 

[Pierre-Christophe DUS]

Thanks for your return: this was very helpfull.

But I meet a first problem with 3 basic shapes: Rectangle, Triangle and RightTriangle. I can't select them and drag&drop, whereas there is no problem with the other ones...

In add, why is there a "global container" around the shapes that has been dropped on the diagram? I tried to play with "MainWindow_ItemAdded()" to remove it, but it didn't change anything.

I also need to redefine 2 properties of the nodes thas has been dropped: the foreground color and the thickness. The other properties shouldn't be used. But is it possible to show these properties under the Symbol Collection, so that the user doesn't have to navigate to another page?

And finally is there a way to deactivate 2 items of the context menu? I don't need to use them and this can disrupt the enduser.

Thanks in advance for your feedback.

[Pierre-Christophe DUS]

Finally I can use Rectangle, Triangle and RightTriangle: these shapes are just harder to select.

But I encounter problems for moving shapes on the diagram in tablet mode. With the mouse it is easier as we can select the edges of the shapes. But this is harder with the fingers or the pen in tablet mode. Does this occurs because the background is transparent? In the official samples, I don't meet this case...

I also tried to replace the rounded arrows of your sample with the arrows that we can found in the official sample:

I tried to do this, but I get an exception:

<syncfusion:NodeViewModel OffsetX="100" OffsetY="100" UnitHeight="100"

                UnitWidth="100" Shape="{StaticResource RightArrow}"

                ShapeStyle="{StaticResource shapeStyle}"

                Key="Arrow Shapes">

</syncfusion:NodeViewModel>

Is it normal?

Sorry for my questions, but we need to decide quickly if we bought a Syncfusion license for this client's project.

[Keerthivasan Ramamoorthy]

Hi Pierre, 

 

Please find the responses to your queries as below. 

 

S.no	Query	Response
1	But I meet a first problem with 3 basic shapes: Rectangle, Triangle and RightTriangle. I can't select them and drag&drop, whereas there is no problem with the other ones...	Reported issue: “unable to select and Drag and Drop a Node from Stencil”.    We have tested these scenarios (selection and dragging) with the provided sample. But, we were unable to reproduce the reported issue. We have provided Video to represent this. Please refer to the Video from the following link.       Video Link:Stencil_Video     However, please ensure whether the Fill is set as Transparent in your application.
2	In add, why is there a "global container" around the shapes that has been dropped on the diagram? I tried to play with "MainWindow_ItemAdded()" to remove it, but it didn't change anything.	We assumed your requirement ("global container") is a selector or pagesettings.   1. if it is Selector, we have a support to customize the Selector. We have provided a sample to represent this. Please refer to the sample link as below.    2. if it is PageSettings, we have PageBorderBrush support for PageSettings to set is as Transparent.    Code Example:  diagram.PageSettings.PageBorderBrush = new SolidColorBrush(Colors.Transparent);    Here,diagram is instance of SfDiagram.
3	I also need to redefine 2 properties of the nodes thas has been dropped: the foreground color and the thickness. The other properties shouldn't be used. But is it possible to show these properties under the Symbol Collection, so that the user doesn't have to navigate to another page?	We assumed your requirement is to set foreground color and thickness to the text (Symbol Text) or Diagraming Node.  Please give us more information like screenshot/Video to achieve your requirement at the earliest.
4	And finally is there a way to deactivate 2 items of the context menu? I don't need to use them and this can disrupt the enduser.	We have a support to achieve your requirement.  We have provided an option to remove Quick Command (3 items(Rotator,Connector,Remove)) via Graphs Constraints. If you want to remove the 2 items from Quick Command, we need to customize. We have provided a sample to represent this. Please refer the below sample.
5	Finally I can use Rectangle, Triangle and RightTriangle: these shapes are just harder to select.	Before run the sample, please ensure whether you have set the Fill as Transparent.
6	But I encounter problems for moving shapes on the diagram in tablet mode. With the mouse it is easier as we can select the edges of the shapes. But this is harder with the fingers or the pen in tablet mode. Does this occurs because the background is transparent? In the official samples, I don't meet this case...	In the official sample, we have used Fill as “#FFFFFF” and SymbolCollection as SymbolItems instead of using NodeViewModel. There is no problem for setting background as Transparent. Make sure before run the sample we need to set Fill as Transparent for the Node interaction.
7	I also tried to replace the rounded arrows of your sample with the arrows that we can found in the official sample:	We have added the arrows shapes in Below sample. Please refer to the above sample link.

 

Sample Link:127065__Stencil_Modified
 

 

 

Regards, 

Keerthivasan R. 

 

[Pierre-Christophe DUS]

Hello,

Thanks for your feedback. Through your second sample, the "global container" is well removed, thank you.

I've updated your first sample for adapting it to our needs:

1.  a "background image", on which the users must drag&drop the shapes (that's why we need "transparent" shapes)
   
2.  2 ComboBox that allowing to redefine properties of the current shape: "foreground color" and "thickness size"
   
3. a "Save" button for exporting the result as an image (the background image and the shapes)
   

1 - the "background image" 

It is added as a node, through a DataTemplate:

<DataTemplate x:Key="nodeImageTemplate">

    <Border Background="White" MaxHeight="800" MaxWidth="1200">

            <Image Source="ms-appx:///Assets/Image.jpeg" Stretch="UniformToFill" />

    </Border>

</DataTemplate>

<!--Initializes Node-->

<syncfusion:SfDiagram.Nodes>

    <syncfusion:NodeCollection>

        <syncfusion:NodeViewModel ContentTemplate="{StaticResource nodeImageTemplate}" 

                                    Pivot="0,0" />

    </syncfusion:NodeCollection>

</syncfusion:SfDiagram.Nodes>

Then I try to deactivate all the constraints for this node in the code-behind:

DiagramCollection<NodeViewModel> nodes = (diagram as SfDiagram).Nodes as DiagramCollection<NodeViewModel>;

if (nodes != null && nodes.Count > 0)

{

    int cptNodes = 0;

    foreach (var node in nodes)

    {

        cptNodes++;

        if (cptNodes == 1)

        {

            node.Constraints = ~NodeConstraints.Rotatable & ~NodeConstraints.Menu &

                                ~NodeConstraints.Resizable & ~NodeConstraints.Draggable &

                                ~NodeConstraints.OutConnect & ~NodeConstraints.Connectable &

                                ~NodeConstraints.Selectable;

            node.ZIndex = 0;

        }

    }

}

But there are some problems:

- after having dragged a shape, I can't unselect it by clicking in the background image: the only way to "unseled" a shape is to add another one

- but then, I can't select/Edit  a shape that has been previously added: the focus stays on the current shape

- in add, I need that the background image could adapt to several sizes: I currently use a static image, but this image must come from images that have been captured through the camera

2 - The properties:

I don't see how to bind the shapes properties to the CombBox 

3 - The export of the result:

For this, I based on the code given by Martin Kurek here: export-uwp-diagram-to-image

It seems to work well.

=> Is there a better way to obtaining what we need? (background image + empties shapes + basic properties + export result)

Concerning my previous requests, there is only a problem that isn't solved: the move of shape with the finger.

There is no problem with the mouse, as we can see the "finger" icon:

But it's very difficult or impossible with the finger: I don't know if this come from the background image, the transparent background color or from the foreground size...

I attach you the updated sample so you can test.

Regards,

Attachment: 127065__Stencil__for_Syncfusion_1ff76704.7z

[Pierre-Christophe DUS]

I just make a point with the customer for which I develop the application.

He asks me if it possible to adapt a little more the capacities:

- use transparent color as background color for the basic shapes

- but use a fill color as background color for the arrows

In add, he tells  me that the properties color/size can be affect to all the dropped shapes: it's not necessary to specify properties for each shape separately...

Regards,

[Keerthivasan Ramamoorthy]

Hi Pierre,

 

Thanks for Shared a sample. 

 

Please find the responses to your queries as below. 

S.no	Query	Response
1	- after having dragged a shape, I can't unselect it by clicking in the background image: the only way to "unseled" a shape is to add another one  - but then, I can't select/Edit  a shape that has been previously added: the focus stays on the current shape  - in add, I need that the background image could adapt to several sizes: I currently use a static image, but this image must come from images that have been captured through the camera	In the sample, ZoomPan Constraints is enabled for Diagram so, we can’t able to interact with the Diagraming object. That is the cause of the issue. We have fixed and provided the modified sample as below.
2	I don't see how to bind the shapes properties to the CombBox	Could you please confirm your requirement is “Need to set different fill and Stroke value for the Node via ComboBox”? Please let us know the confirmation from your side to work on this requirement.
3	Then I try to deactivate all the constraints for this node in the code-behind:	Your requirement is need to deactivate the constraints for all the Nodes. In order to iterate and set the constraints to all the Nodes, we have directly deactivate the constraints for the Diagram. We have updated the sample with these changes. Please find the sample as below.
4	Concerning my previous requests, there is only a problem that isn't solved: the move of shape with the finger.  There is no problem with the mouse, as we can see the "finger" icon:  But it's very difficult or impossible with the finger: I don't know if this come from the background image, the transparent background color or from the foreground size...	Please check the updated sample to solve your dragging the Node with Finger issue.

 

Sample Link:127065__Stencil_Modified
 

 

Regards, 

Keerthivasan R. 

[Pierre-Christophe DUS]

Thanks for your answer, but this is always not the comportment expected by our customer.
I'm note sure that your really understand our needs, so I will answer point by point to describe them:

In the sample, ZoomPan Constraints is enabled for Diagram so, we can’t able to interact with the Diagraming object. That is the cause of the issue. We have fixed and provided the modified sample as below. 

=> We can now select the previously dragged shapes, but isn't it possible to set the image as a "static" node, that must not be movable/selectable?

For the user, this must be like a "static background image" on which he will add some shapes. As we need to export the result as a JPEG file, we have used a node to add the background image to the diagram, I don't know if there is a better way...

Could you please confirm your requirement is “Need to set different fill and Stroke value for the Node via ComboBox”? Please let us know the confirmation from your side to work on this requirement.  

=> yes it's that: the user must be able to  change easily the forground color or the stroke value for the dragged shapes (that are in Node) through the 2 ComboBox that I have added in the view.

if it's more easy for you (and for us), our client accepts that the same color is setted  to all the shapes through the ComboBox, instead of setting one to one.

in add, he would like that arrows shapes are "filled" (with the same color that the foreground color), but the other shapes must always be "empties" (or transparent) I don't know if this is easily feasable.

Your requirement is need to deactivate the constraints for all the Nodes. In order to iterate and set the constraints to all the Nodes, we have directly deactivate the constraints for the Diagram. We have updated the sample with these changes. Please find the sample as below. 

=> It's not really that: as I have mentioned in my previous reply, we would like only deactivate the constraints for the node that contains the background image. For the other nodes, that contain the shapes, the user must be able to resize them, change the color or the stroke value.

Please let me know if all is clear for your, and thank you again for your response.

Regards,

[Keerthivasan Ramamoorthy]

Hi Pierre, 

 

Thanks for the update. 

 

Please find the responses to your queries as below. 

 

S.no	Query	Response
1	We can now select the previously dragged shapes, but isn't it possible to set the image as a "static" node, that must not be movable/selectable?  For the user, this must be like a "static background image" on which he will add some shapes. As we need to export the result as a JPEG file, we have used a node to add the background image to the diagram, I don't know if there is a better way...	Requirement: “Need to disable all the constraints to the Background Image (Added to the Node)”.    We have provided the Constraints property to Node to enable/disable the behavior/interactions over the Node. We have Modified the sample to represent this.    Sample link:127065__Stencil_Modified     Sample Details:  We have disabled all interactions on the Node which has the background Image.
2	=> yes it's that: the user must be able to  change easily the forground color or the stroke value for the dragged shapes (that are in Node) through the 2 ComboBox that I have added in the view.  if it's more easy for you (and for us), our client accepts that the same color is setted  to all the shapes through the ComboBox, instead of setting one to one.  in add, he would like that arrows shapes are "filled" (with the same color that the foreground color), but the other shapes must always be "empties" (or transparent) I don't know if this is easily feasable.	Requirement: “Need to set different fill and StrokeThickness value for the selected Node via ComboBox”.    We have support to customize the appearance of the Node by using Shape Style Property. In order to change the Style Properties (Fill and Stroke Thickness), we have created custom properties to achieve the reported requirement. Please refer the above sample.    Sample Details:  Whenever the Fill and StrokeThickness properties changes, we need to create a new Style and assign to ShapeStyle property of Node.
3	=> It's not really that: as I have mentioned in my previous reply, we would like only deactivate the constraints for the node that contains the background image. For the other nodes, that contain the shapes, the user must be able to resize them, change the color or the stroke value.	Question 1 and 3 both are same. Please refer the Question no 1.

 

 

Regards, 

Keerthivasan R. 

[Pierre-Christophe DUS]

Thank you again: this time the comportment responds to our needs.
I've reorganized the properties to make the screen cleaner:

But I still have some requests:

- is it possible to remove/to hide  the "empty" area between "Shapes" title and the "Basic Shapes" group?

- in a previous sample, you gived me the xaml code of 7 arrows: could you give me the code of the "missing" arrow?


- I need that the user can remove a dropped shape: so I have removed a line of your code:

//(diagram.SelectedItems as SelectorViewModel).SelectorConstraints &= ~SelectorConstraints.QuickCommands;

but then, the menu also allows to copy a shape or add a connector, and I don't need this:

=> Is there a way to authorize only the "Delete" but deactivate the connectors and copy options?

- Finally, I have updated your code to distinguish 2 cases: basic shapes and arrows:

private void colorList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

var color = (Colors)e.AddedItems[0];

if (diagram.Nodes != null)

{

foreach (NodeViewModel node in diagram.Nodes as DiagramCollection<NodeViewModel>)

{

if (node.IsSelected)

{

if (node.Key != null)

{

if (node.Key.ToString().ToLower().Contains("arrow"))

{

Fill = color.ColorBrush;

Stroke = color.ColorBrush;

node.ShapeStyle = GetCustomStyle();

}

else

{

Stroke = color.ColorBrush;

node.ShapeStyle = GetCustomStyle();

}

}

}

}

}

//myGrid.Background = color.ColorBrush;

}

The basic shapes are always empties, and the color property only affect the stroke (foreground).

The arrows shapes are always filled, and color property affect both the stroke and the fill.

But sometimes, the basic shapes are also filled: this occurs when I have changed the color of a arrow, and that I change the color of the basic shape.

=> Would you have any idea?

[Pierre-Christophe DUS]

As it's not possible to edit a post, here are the missing screenshots:

- I need that the user can remove a dropped shape: so I have removed a line of your code:

//(diagram.SelectedItems as SelectorViewModel).SelectorConstraints &= ~SelectorConstraints.QuickCommands;

but then, the menu also allows to copy a shape or add a connector, and I don't need this:

=> Is there a way to authorize only the "Delete" but deactivate the connectors and copy options?

- Finally, I have updated your code to distinguish 2 cases: basic shapes and arrows:

private void colorList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

var color = (Colors)e.AddedItems[0];

if (diagram.Nodes != null)

{

foreach (NodeViewModel node in diagram.Nodes as DiagramCollection<NodeViewModel>)

{

if (node.IsSelected)

{

if (node.Key != null)

{

if (node.Key.ToString().ToLower().Contains("arrow"))

{

Fill = color.ColorBrush;

Stroke = color.ColorBrush;

node.ShapeStyle = GetCustomStyle();

}

else

{

Stroke = color.ColorBrush;

node.ShapeStyle = GetCustomStyle();

}

}

}

}

}

//myGrid.Background = color.ColorBrush;

}

The basic shapes are always empties, and the color property only affect the stroke (foreground).

The arrows shapes are always filled, and color property affect both the stroke and the fill.

But sometimes, the basic shapes are also filled: this occurs when I have changed the color of a arrow, and that I change the color of the basic shape:

=> Would you have any explanation?

I've attached an updated version of the sample.

Regards,

Pierre-Christophe

Attachment: 127065__Stencil_950dad4e.7z

[Pierre-Christophe DUS]

It's me again...
In fact, I meet another problem. In the sample, I affect a static background image in the XAML through a DataTemplate:

<DataTemplate x:Key="nodeImageTemplate">

    <Border Background="White" MaxHeight="800" MaxWidth="1200">

        <Image Source="ms-appx:///Assets/Image.jpeg" Stretch="UniformToFill" />

    </Border>

</DataTemplate>

Then I use this DataTemplate in the NodeViewModel:

<syncfusion:SfDiagram.Nodes>

    <syncfusion:NodeCollection>

        <syncfusion:NodeViewModel ContentTemplate="{StaticResource nodeImageTemplate}" Pivot="0,0" />

    </syncfusion:NodeCollection>

</syncfusion:SfDiagram.Nodes>

But I don't found a way to specify this image dynamically. Is it easily feasable?
In our project the background image will come from the camera.

[Keerthivasan Ramamoorthy]

Hi Pierre, 

Please find the responses to your queries as below. 

S.no	Query	Response
1	- is it possible to remove/to hide the "empty" area between "Shapes" title and the "Basic Shapes" group?	Requirement: Need to remove/hide the "empty" area between "Shapes" title and the "Basic Shapes" group.    Yes, we have a support to achieve your requirement by enabling ShowPreview Constraints to Stencil. We have added this requirement in the Sample. Please refer to the sample as below.
2	could you give me the code of the "missing" arrow?	We have added 11 arrows to stencil in the sample. Please refer the sample as below.
3	but then, the menu also allows to copy a shape or add a connector, and I don't need this:      => Is there a way to authorize only the "Delete" but deactivate the connectors and copy options?	Currently, we don’t have direct way to deactivate the Connector and Copy options from the QuickCommands. We have option to customize the Selector. We have provided code example to represent this. Please refer to the code example from the below document.    Document link: http://www.syncfusion.com/downloads/support/forum/127065/ze/SelectorCustomization-335895943
4	The basic shapes are always empties, and the color property only affect the stroke (foreground).  The arrows shapes are always filled, and color property affect both the stroke and the fill.  But sometimes, the basic shapes are also filled: this occurs when I have changed the color of a arrow, and that I change the color of the basic shape.	Requirement: Need to apply stroke only for Basic shapes and stroke and fill apply for Arrow shapes.    We have modified the sample as per your requirement. Please refer to the modified sample as below.
5	But I don't found a way to specify this image dynamically. Is it easily feasable? In our project the background image will come from the camera.	We have added the image path in code behind and bind in Xaml. Please refer the sample as below.

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127065/ze/127065__Stencil_Modified1307573018 

 

 

Regards, 

Keerthivasan R. 

 

[Pierre-Christophe DUS]

I come back to you cause I have finally managed to pass the image dynamically through a Binding:

<DataTemplate x:Key="nodeImageTemplate">

    <Border MaxWidth="1024">

        <Viewbox Stretch="Uniform" StretchDirection="DownOnly">

            <Image Source="{Binding ElementName=Root, Path=DataContext.PhotoBitmapImage}" 

                         HorizontalAlignment="Left" VerticalAlignment="Top"

                         Stretch="None" />

        </Viewbox>

    </Border>

</DataTemplate>

=> this problem is so solved!

But I encounter a problem for "preserving" the ratio of the background image. This background images will always come from the camera and will have an original size of 1920x1024.

In most cases, the app will be used on tablets having a resolution of 1920x1200.
So I try to find the best compromise for this screen for "maximizing" the space taken by the image in the SfDiagram...

I have limited the size of the "Shapes" column to a width of 175, so that 3 items are displayed per line. The rest of the space is allocated to the diagram:

<ColumnDefinition Width="175" />

<ColumnDefinition Width="*" />

Then I have affected a background color to SfDiagram to seen the available space:

<syncfusion:SfDiagram x:Name="diagram" Background="Red">

And finally I use the DataTemplate of the background image:

<syncfusion:SfDiagram.Nodes>

<syncfusion:NodeCollection>

<syncfusion:NodeViewModel ContentTemplate="{StaticResource nodeImageTemplate}" 

 Pivot="0,0" />

</syncfusion:NodeCollection>

</syncfusion:SfDiagram.Nodes>

But we can see that there is an "empty" space that is lost:

=>In add, when I export this result, all the SfDiagram is exported: so the same "empty" space is exported...

So I tried another solution: use an image as background of the SfDiagram, instead of using a Node for the bacground image.

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

    <syncfusion:SfDiagram.Background>

        <ImageBrush ImageSource="/Assets/BackgroundImage.jpg" Stretch="Uniform"

                    AlignmentX="Left" AlignmentY="Top" 

        />

    </syncfusion:SfDiagram.Background>

    ...

I've removed the nodeImageTemplate from the Nodes:

<syncfusion:SfDiagram.Nodes>

    <syncfusion:NodeCollection>

    </syncfusion:NodeCollection>

</syncfusion:SfDiagram.Nodes>

The rendering is globally better, but there is always a problem if the image used as background doesn't fill all the available height:

This empty space is exported with the original image:

=> So the ratio of the original image is no longer preserved in each cases... 

=> Which solution is more adapted to our needs:

- use of the Background image through a Node

- use of the Background image through the Background property of the SfDiagram

Thanks in advance for your feedback,

I've attached the latest version of my tests.

Attachment: 127065__Stencil_d6d9dd4.7z

[Pierre-Christophe DUS]

I just see that you come to respond to my previous responses, so I will study your sample and come back to you.

[Pierre-Christophe DUS]

So I come to study your last sample and all is working fine: thank you so much!

Concerning your return about the QuickCommands, I've applied your solution: but now, as nothing is visible, the user can't resize or rotate the shapes. Is it possible to get the "default" template code? So I could make a mix between the default values and the null values, to get the expected behavior.

This is the last point for which I encounter a problem, with the background image management, for which you can look at my previous answer.

Thank you again,

Regards,

Pierre-Christophe

[Keerthivasan Ramamoorthy]

Hi Pierre, 

Please find the responses to your query as below. 

S.no	Query	Response
1	Is it possible to get the "default" template code? So I could make a mix between the default values and the null values, to get the expected behavior.	We have provided Selector Template in the Document. Please refer the Document as below.    Document link: http://www.syncfusion.com/downloads/support/forum/127065/ze/Selector_template_code-47506655
2	This is the last point for which I encounter a problem, with the background image management,	We have set the image(BackgroundImage.jpg) as ContentTemplate of the Node. We were unable to see any empty spaces here. We have provided a video to represent this. Please refer to the Video link as Below.    Video Link: http://www.syncfusion.com/downloads/support/forum/127065/ze/BackGroundImage-1764558591

 

 

Regards, 

Keerthivasan R. 

 

 

[Pierre-Christophe DUS]

Thanks for your return.
But for the BackgroundImage, I don't think that you're understand my problem. In your video, the BackgroundImage is not completly visible, and the user must use horizontal and vertical scrollers. As I need to export the result of shapes + background image as an image, this solution is not acceptable.

The expceted workflow is as follows:

1. The user takes a photo through the camera
2. The photo is resized to 1920x1080 and is saved as a byte array in SQLite
3. The byte array is send to this editor page and is converted as a BitmapImage
4. The BitmapImage is used as a Node (or as the Background) of the SfDiagram
5. The user drops some shapes
6. The user exports the result as a ByteArray
7. The byte array is send to a "main" page, converted as a BitmapImage 
8. The image is displayed

I know that I can't preserve the default size (1920x1080) of the photo initially taken by the user, as the "Export" capability is not yet supported by Syncufsion.

So I used the method given by Martin Kurek here : Export UWP Diagram as Image

That's why I need to keep the original ratio of the image in the SfDiagram, and to export the SfDiagram without empty space.

=> Is it more clear for you? Do you now understand my request about the use of a Node or the Background of the SfDiagram for the BackgroundImage? Is there a better alternative to export the result as an image?

Regards,

[Pierre-Christophe DUS]

I finally found a way to keep the ratio when I export the image:

IRandomAccessStream stream = new InMemoryRandomAccessStream();

var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);

//1920 x 1080 = ratio 1.777

var resHeight = renderTargetBitmap.PixelWidth / 1.777;

encoder.SetPixelData(

    BitmapPixelFormat.Bgra8,

    BitmapAlphaMode.Straight,

    (uint)renderTargetBitmap.PixelWidth,

        //(uint)renderTargetBitmap.PixelHeight,

        (uint)resHeight,

    DisplayInformation.GetForCurrentView().LogicalDpi,

    DisplayInformation.GetForCurrentView().LogicalDpi,

    pixelBytes);

=> so this problem is solved by using this and the background image as background of the SfDiagram!

But I didn't understand the relation between the Selector Template that you've provided in your last Document, and the Selector Template that you gived me in a previous document: I didn't found the same elements in the code!

=> On wich one should I base myself to disable copying and relations in the Quick Access Menu, while retaining deletion, rotation and resizing?

[Keerthivasan Ramamoorthy]

Hi Pierre, 

 

Please find the responses to your queries as below. 

S.no	Query	Response
1	Need to set image as Diagram Background	Requirement: Need to set image as Diagram Background.    We have a support to achieve your requirement by using PageBackground property of the PageSettings to change the appearance of the Diagram Page.  In the previous sample, we have set the image as Background property of the Diagram. Instead of that, please to set the image as PageBackground property of the PageSettings to the Diagram and also please to adjust the PageWidth and PageHeight as per your requirement. We have provided code example to represent this. Please refer to the code example as below.     Code Example:  <!--#Add the Below code into the Page.Resources-->  <!--#Image Brush -->  <ImageBrush x:Key="bgimage" ImageSource="/Assets/BackgroundImage.jpg" Stretch="Fill"/>  <!--# PageSettings -->  <syncfusion:PageSettings x:Key="diagrampage" PageWidth="1000" PageHeight="1000" PageBorderBrush="Red" PageBackground="{StaticResource bgimage}" />    <!--# Initializes Diagram and Bind the PageSettings properties-->  <syncfusion:SfDiagram x:Name="diagram" PageSettings="{StaticResource diagrampage}">
2	On wich one should I base myself to disable copying and relations in the Quick Access Menu, while retaining deletion, rotation and resizing?	Requirement: Need to deactivate QuickCommand (Connector and Copy) from the Selector.    We have a support to achieve your requirement by customize the Selector. We have provided Sample and Screenshot to represent this. Please refer to the sample and screenshot as below.      Sample Link: http://www.syncfusion.com/downloads/support/forum/127065/ze/127065__Stencil_Modified_Selector1123478315      Screenshot:

 

 

Regards, 

Keerthivasan R. 

[Pierre-Christophe DUS]

Hello,

I tried your solution for the background image:

<!--#Add the Below code into the Page.Resources--> 

<!--#Image Brush --> 

<ImageBrush x:Key="bgimage" ImageSource="/Assets/BackgroundImage.jpg" Stretch="Fill"/> 

<!--# PageSettings --> 

<syncfusion:PageSettings x:Key="diagrampage" PageWidth="1000" PageHeight="1000" PageBorderBrush="Red"PageBackground="{StaticResource bgimage}" /> 

 

<!--# Initializes Diagram and Bind the PageSettings properties--> 

<syncfusion:SfDiagram x:Name="diagram" PageSettings="{StaticResource diagrampage}"> 

=> but it doesn't work at all: no image is displayed.

In add, I meet a bug that I can't understand with the solution that I have previously mentioned:

[Pierre-Christophe DUS]

In add, I meet a bug that I can't understand with the export's way that I have previously mentioned:
- set the background image to the diagram's background:

<helpers:selectorDiagram  x:Name="diagram">

    <syncfusion:SfDiagram.Background>

        <ImageBrush ImageSource="/Assets/BackgroundImage.jpg" Stretch="Uniform"

                    AlignmentX="Left" AlignmentY="Top" 

        />

    </syncfusion:SfDiagram.Background>

- export the diagram through this code:

protected async Task<IRandomAccessStream> GenerateImage(UIElement diagram)

{

// Render to an image at the current system scale and retrieve pixel contents

var renderTargetBitmap = new RenderTargetBitmap();

DiagramCollection<NodeViewModel> nodes = (diagram as SfDiagram).Nodes as DiagramCollection<NodeViewModel>;

if (nodes != null && nodes.Count > 0)

{

foreach (var node in nodes)

{

node.IsSelected = false;

}

}

await renderTargetBitmap.RenderAsync(diagram);

var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

var pixelBytes = new byte[pixelBuffer.Length];

using (var reader = DataReader.FromBuffer(pixelBuffer))

{

reader.ReadBytes(pixelBytes);

}

IRandomAccessStream stream = new InMemoryRandomAccessStream();

var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);

//1920 x 1080 = ratio de 1.777

var resHeight = renderTargetBitmap.PixelWidth / 1.777;

encoder.SetPixelData(

BitmapPixelFormat.Bgra8,

BitmapAlphaMode.Straight,

(uint)renderTargetBitmap.PixelWidth,

 //(uint)renderTargetBitmap.PixelHeight,

 (uint)resHeight,

DisplayInformation.GetForCurrentView().LogicalDpi,

DisplayInformation.GetForCurrentView().LogicalDpi,

pixelBytes);

await encoder.FlushAsync();

return stream;

}

In the sample project, there is no problem and I can "export" my diagram easily

But when I use this code to my full project, I meet this exception:

"The buffer allocated is insufficient"

Is there any reason? Would you have any idea?

Is there a way to send you my full project to investigate on this exception?

Attachment: 127065__Stencil__Export_bf2c2d64.7z

[Ramya Thirugnanam]

Hi Pierre, 

Reported issue: Out of memory exception (Buffer allocated is insufficient). 

After analyzing the reported query, the taken photo is render to an image at the current system scale and retrieve pixel contents by using RenderTargetBitMap. It has some limitations to process the Image that is it maximum size is (11764, 11764).  If the image size is larger than the maximum size, it throws out of memory exception. 

Regards, 

Ramya 

[Pierre-Christophe DUS]

For sure, I have not exceeded the size limit: my original image was 1920x1080, and the export function is based on the SfDiagram's size: the resolution of the screen...

But I think I made a mistake in calculating the ratio to remove the black / white stripes.

I opened a new topic to solve this, it will be clearer:

new topic

[Keerthivasan Ramamoorthy]

Hi Pierre,  

Yes, we could see the new thread. 

Please follow the new thread for further assistance. 

 

Regards,  

Keerthivasan R.