In Gagglefish Expeditions we let users add images from our library of images or upload their own images. They can move and resize images, crop images, and apply visual affects to images.

One of the business rules associated with tracking images was keeping track of an images height and width properties as well as the top and bottom properties. The process is very straightforward but it took a few minutes to get it right so I thought I would document it here for others to use.

The sample demo uses an adorner sample from http://nokola.com/blog/post/2009/12/13/Adorners-in-Silverlight-Move-Size-Rotate-Custom-Mouse-Cursor.aspx If you have not already checked out nokola.com, do so. There is a ton of very useful code on the site.

First we need to subscribe to an event so we can get the values we need. There are several events we could have used but the MouseLeftButtonUp event on the adorner works fine so I decided to use it.

_adorner.MouseLeftButtonUp += new MouseButtonEventHandler(_adorner_MouseLeftButtonUp);

 Then we get the values for the image.

void _adorner_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            textBlockWidth.Text = ImageTest.ActualWidth.ToString();
            textBlockHeight.Text = ImageTest.ActualHeight.ToString();
            textBlockTop.Text = Canvas.GetTop(ImageTest).ToString();
            textBlockLeft.Text = Canvas.GetLeft(ImageTest).ToString();
        }

Demo

That's all there is to it. You can then save the values for future sessions either remotely or using local storage. In our case, I wrote a simple compression algorythm so we could store the values in a string in our SQL Server 2008 R2 database.