SliverLight2 Beta Quick Tip: Implement MultiScaleImage behavior like in Image Control
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"/>
</Grid>
*Notice* I didn't provided source for our Image.
And in the Code file I have used ScaleTransform:
public Page()
{
InitializeComponent();
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;
}
else
{
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
Enjoy!