This is a migrated thread and some comments may be shown as answers.

import image example

5 Answers 134 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Kidder
Top achievements
Rank 1
Kidder asked on 29 Nov 2012, 11:47 AM
Hi,

Please, give me example of import image to diagram.

Best regards,

5 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 29 Nov 2012, 11:52 AM
Hi Kiddler,

 Please refer to the file Example.xaml.cs (you can see it both in the online example (SL) and the WPF example. Then the import logic is defined in the ImportImageButton's Click event handler:

private void ImportImageButtonClick(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
#if WPF
            openFileDialog.Filter = "Image Files (*.png, *.jpg, *.bmp)|*.png;*.jpg;*.bmp";
#else
            openFileDialog.Filter = "Image Files (*.png, *.jpg)|*.png;*.jpg";
#endif
            bool? dialogResult = openFileDialog.ShowDialog();
            if (dialogResult.HasValue && dialogResult.Value == true)
            {
                Image image = new Image();
#if WPF
                image.Source = new BitmapImage(new Uri(openFileDialog.FileName, UriKind.Absolute));
#else
                    using (var fileOpenRead = openFileDialog.File.OpenRead())
                    {
                        BitmapImage bitmap = new BitmapImage();
                        bitmap.SetSource(fileOpenRead);
                        image.Source = bitmap;
                    }
#endif
                Viewbox viewBox = new Viewbox() { Stretch = Stretch.Fill, Margin = new Thickness(-4) };
                viewBox.Child = image;
                RadDiagramShape imageShape = new RadDiagramShape()
                {
                    Content = viewBox
                };
                this.diagram.Items.Add(imageShape);
            }
        }
On the other hand, the initially loaded pictures are defined in XAML like so:
<telerik:RadDiagramShape Position="50 50" Padding="0">
                <Image Stretch="Fill" Source="../Images/Diagrams/Drawing/pic3.png" />
            </telerik:RadDiagramShape>
            <telerik:RadDiagramShape Position="250 50" Padding="0">
                <Image Stretch="Fill" Source="../Images/Diagrams/Drawing/pic2.png" />
            </telerik:RadDiagramShape>
            <telerik:RadDiagramShape Position="50 250" Padding="0">
                <Image Stretch="Fill" Source="../Images/Diagrams/Drawing/pic1.png" />
            </telerik:RadDiagramShape>
            <telerik:RadDiagramShape Position="250 250" Padding="0"
                    Geometry="M671,494C671,527 667,510 665,539C663,568 668,581 668,592C668,603 666,619 668,625C670,631 670,632 670,632L714.998,631C714.998,631 777.995,638 802.993,636C827.992,634 812.993,577 813.993,559C814.993,541 817.992,531 817.992,516C817.992,501 816.992,497 816.992,497z"
                    Background="Transparent" StrokeThickness="4" BorderBrush="#FFE00505"/>

All the best,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Kidder
Top achievements
Rank 1
answered on 29 Nov 2012, 12:57 PM
Hi Petar,

Thank you very much, now, i can add image to diagram,
but how can i save the diagram to xml file with these added image?

 StreamWriter writer = new StreamWriter(stream, Encoding.UTF8);
                string xml = this.diagram.Save().ToString();
                writer.WriteLine(xml);
                writer.Flush();
                writer.Dispose();
              
0
Petar Mladenov
Telerik team
answered on 04 Dec 2012, 01:49 PM
Hello Kidder,

Saving an Image among with RadDiagramShapes and RadDiagramConnections to a XML string is not supported. You can have Images folder in your Application and save a Uri / String property pointing to an Image in this folder.

Regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Kidder
Top achievements
Rank 1
answered on 04 Dec 2012, 08:17 PM
Hi Petar,

Please, give me example of saving diagram with imported image to diagram

Best regards,
0
Petar Mladenov
Telerik team
answered on 07 Dec 2012, 07:48 AM
Hi Kidder,

Attached you can find a sample showing how a ViewModels's string property representing a path to Image (located in the solution) i serialized among with the Shapes.
The RadDiagramShape's and RadDiagramConnection's properties that are automatically serialized are listed in this help article - Diagram Serialization (section Extending Diagram Serialization). However, in MVVM scenarios you need lots of additional properties in your ViewModels that you use in your ShapeTemplates ConnectionTemplates, EditTemplates and so on. Similar to static scenarios when you use ShapeSerialized, ShapeDeserialized, ConnectionSerialized, ConnectionDeserialized (as it is explained in the article) in MVVM scenarios with SerializableGraphSourceBase you have to override theSerializeNodeDeserializeNodeSerializeLinkDeserializeLink methods in order to save and  load ViewModel's properties. 

public override void SerializeNode(OrgItem node, Telerik.Windows.Diagrams.Core.SerializationInfo info)
{
    base.SerializeNode(node, info);
    info["Label"] = node.Label;
    info["ImgUriString"] = node.ImageSource.UriSource.OriginalString;
}
  
public override OrgItem DeserializeNode(Telerik.Windows.Diagrams.Core.IShape shape, Telerik.Windows.Diagrams.Core.SerializationInfo info)
{
    base.DeserializeNode(shape, info);
    if (info["Label"] != null && info["ImgUriString"] != null)
    {
        OrgItem item =  new OrgItem(info["Label"].ToString())
        {
            ImageSource = new BitmapImage(new Uri(info["ImgUriString"].ToString(), UriKind.RelativeOrAbsolute))
        };
        return item;
    
    return null;
}
Let us know if this helps you proceed further.

All the best,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Diagram
Asked by
Kidder
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Kidder
Top achievements
Rank 1
Share this question
or