SliverLight2 Beta Quick Tip: Implement MultiScaleImage behavior like in Image Control

11 במרץ 2008

2 תגובות

Using MultiScaleImage control we get a vivid user friendly image manipulation experience in this quick tip I will demonstrate how to provide the same experience using Image control in SilverLight 2 Beta.

In the Expression Blend Blog we can find the source code on how to implement Zooming using MultiScaleImage I have used this code and replaced the MultiScaleImage with Image:

<Grid x:Name="LayoutRoot" Background="White">

    <Image Width="770" Height="570" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="MainImage"/>


*Notice* I didn't provided source for our Image.

And in the Code file I have used ScaleTransform:

public Page()




    this.MouseMove += delegate(object sender, MouseEventArgs e)


        this.lastMousePos = e.GetPosition(this.MainImage);


    this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);

    new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)


        if (e.Delta > 0)


            zoom *= 1.2;




            zoom /= 1.2;



        ScaleTransform scaleTransform = new ScaleTransform();

        scaleTransform.CenterY = this.lastMousePos.Y;

        scaleTransform.CenterX = this.lastMousePos.X;

        scaleTransform.ScaleX = zoom;

        scaleTransform.ScaleY = zoom;


        MainImage.RenderTransform = sc;



Using this code you will have the same experience.

In my next post I will try to provide Panning Behavior.

Source Code


הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. Al Pascual22 באפריל 2008 ב 20:54

    Do you know how to override the source property on MultiScaleImage?

  2. Yogev23 באפריל 2008 ב 10:01

    Hey, could please explain a bit more about your requirements?