Easily Zoom an Image in Silverlight 3 with slider control

Question

Simple question,

SilverLight 3 application (no toolkit). I want to use an image and a slider. The image is displayed fit to screen on load, and then the slider has to zoom-in and out the image when its value changes. I don't want to use anything else, like deepzoom. How can this be done?

Urgent, Thanks in advance,

Malcolm Malcolm · Accepted Answer · 2010-06-14T09:21:55

The xaml code below :

<ScrollViewer x:Name="scroll"   HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<layout:LayoutTransformer x:Name="layout"  Background="{x:Null}" >
                                <layout:LayoutTransformer.LayoutTransform>
                                    <ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
                                </layout:LayoutTransformer.LayoutTransform>

                                <Image x:Name="img"   Source="../pin.PNG"  >

                                </Image>
                            </layout:LayoutTransformer>
                        </ScrollViewer>

And on the slidervaluechangedevent :

    this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue;
    this.layout.ApplyLayoutTransform();

LayoutTransformer is ther in toolkit, add its reference:

System.Windows.Controls.Layout.Toolkit

Without having a toolkit, u can do it but it doesn't work properly(it will never update the scrollviewer)...try it the below one :

<ScrollViewer x:Name="scroll"   HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Themes:ThemeManager.StyleKey="TreeScrollViewer">

                                <Image x:Name="img"   Source="../charge_chargeline.PNG"  >
                                    <Image.RenderTransform>
                                        <ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
                                    </Image.RenderTransform>
                                </Image>

                        </ScrollViewer>

And on the slidervaluechangedevent :

    `this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue`;

Hope it helps :)....

Easily Zoom an Image in Silverlight 3 with slider control

1 Answers