Shine Draw

I believe you will always make use of the scaling tool insider Flash or Blend. However, have you ever thought of achieving image scaling by coding?

That’s not an easy technique. You have to take care of the mouse position, image position, scale factor, cursor look, etc..

But don’t worry, here you could find a very simple demo for manipulating the size of the image. My sample is not intended to give you a complete/portable solution for Image Scaling. Instead, it provides you a basic idea how this is working.

Comparison

Flash implementation: 50 minutes

Silverlight implementation: 70 minutes (Implemented First)

Source codes

•   Image Manipulation - Scale [Flash 9, AS3] (30.7 KiB, 804 hits)
•   Image Manipulation - Scale [Silverlight 2, C#] (20.7 KiB, 1,006 hits)

Silverlight

Silverlight: Create a custom property in XAML definition

If you open the Silverlight Source Code, you will find that the image is passed into the Image Manipulation Class directly in XAML. Here is part of the XAML code:

<custom:ImageManipulationScale VerticalAlignment=”Center” HorizontalAlignment=”Center“>
    <custom:ImageManipulationScale.Source>
        <Image Source=”shinedraw_logo.jpg” Width=”396” Height=”300“/>
   </custom:ImageManipulationScale.Source>
</custom:ImageManipulationScale>

It’s an important technique that everyone must know it. It definitely helps you to write a more professional control.

To start with, we have to define the property name and the property type. In the sample above, the property name is Source and the type is Image. Then, we are going to add some codings behind the Class ImageManipulationScale.

// C#
// create a custom property than can be exported to XAML
public static readonly DependencyProperty SourceProperty =
	DependencyProperty.Register(
	"Source", typeof(Image),
	typeof(ImageManipulationScale), null
	);

// define a public property with the name Source
public Image Source
{
	get { return (Image)GetValue(SourceProperty); }
	set
	{
		 SetValue(SourceProperty, value);
		// do whatever you want here
	}
}

That’s all! Pretty simple, right?

Shares and Enjoy~

Did you like this post?

Subscribe here: