import image example

6 posts, 0 answers
  1. Kidder
    Kidder avatar
    13 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    Hi,

    Please, give me example of import image to diagram.

    Best regards,
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 29 Nov 2012 Link to this post

    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.

  3. DevCraft banner
  4. Kidder
    Kidder avatar
    13 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    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();
                  
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 04 Dec 2012 Link to this post

    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.

  6. Kidder
    Kidder avatar
    13 posts
    Member since:
    Nov 2012

    Posted 04 Dec 2012 Link to this post

    Hi Petar,

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

    Best regards,
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Dec 2012 Link to this post

    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.

Back to Top
DevCraft banner