import image example

[Kidder]

Hi,

Please, give me example of import image to diagram.

Best regards,

[Petar Mladenov]

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

[Kidder]

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();
              

[Petar Mladenov]

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

[Kidder]

Hi Petar,

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

Best regards,

[Petar Mladenov]

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 theSerializeNode, DeserializeNode, SerializeLink, DeserializeLink 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