How to persist an Image with size, location, and rotation and then restore it?

Question

In WPF, I have an image that is dropped onto an InkCanvas and added as a child:

    ImageInfo image_Info = e.Data.GetData(typeof(ImageInfo)) as ImageInfo;
        if (image_Info != null)
        {
            Image image = new Image();
            image.Width = image_Info.Width * 4;
            image.Stretch = Stretch.Uniform;
            image.Source = new BitmapImage(image_Info.Uri);
            Point position = e.GetPosition(ic);

            InkCanvas.SetLeft(image, position.X);
            InkCanvas.SetTop(image, position.Y);
            ic.Children.Add(image);
     }

Then by way of an adorner, the image is moved and resized. It is then persisted to a database as:

 public List<string> Children;

 var uiList = ic.Children.Cast<UIElement>().ToList();
            foreach (var p in uiList)
            {
                string uis = System.Windows.Markup.XamlWriter.Save(p);
                s.Add(uis);
            }
            Children = s;

Children then being sent on to the database. The resulting record in the database shows as:

"<Image Source="pack://application:,,,/Images/Female - Front.png" Stretch="Uniform" Width="Auto" InkCanvas.Top="296" InkCanvas.Left="695" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" /> "

There is no reference to the new location, size, or rotation of the image--only its initial drop point. Recreating the image with xmlreader restores the image to its initial drop point and size.

foreach (string s in behavior.Children)
            {
                var stringReader = new StringReader(s);
                var xmlReader = System.Xml.XmlReader.Create(stringReader, new System.Xml.XmlReaderSettings());

                Image b = (Image)System.Windows.Markup.XamlReader.Load(xmlReader);
                ic.Children.Add(b);
            }

(The image source is packed as an application resource).

How can I persist the image with its size, location, and rotation and then restore it?

TIA.

You shouldn't be serializing and deserializing XAML at all. Better create a proper model class with all necessary data that describes the current view. Then load and save instances of that model class. — Clemens, Apr 22 '17 at 16:09

score 1 · Accepted Answer · answered Apr 22 '17 at 05:12

1

Either you can add additional fields to your DB Table for Size / Location / Rotation and store info there.
Or, you can add these fields together as comma(,) separated and store in Tag field of your Image control. <Image Tag="(120,230);(50,50);(-30)" ... />

You can also save entire manipulated image as byte[] in DB.

Please tell if this solves your problem at hand.

answered Apr 22 '17 at 05:12

AnjumSKhan

9,647
1
26
38

As it turns out, the above code does work correctly once the adorners are removed. However, I really like your idea of storing additional information in the tag as a string. I believe the xamlwriter will correctly write string data for persistence which will allow for image identification between the frontend and the database. Good idea. Thanks. – Alan Wayne Apr 22 '17 at 14:39

How to persist an Image with size, location, and rotation and then restore it?

1 Answers1