wpfimagexamlxamlwriter

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


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.


Solution

    1. Either you can add additional fields to your DB Table for Size / Location / Rotation and store info there.

    2. 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.