Skip to main content

Microsoft Silverlight

Answered Question Scrolling and Zooming in SL 2.0RSS Feed

(0)

PaulM360
PaulM360

Member

Member

14 points

13 Posts

Scrolling and Zooming in SL 2.0

Hi All

In WPF I have a Canvas of fixed size sitting inside a ScrollViewer. Elsewhere I have a Slider and the Value of the slider is bound to a ScaleTransform which I use as the LayoutTransform of the Canvas. This is all good.... as I zoom in or out, the scroll bars change appropriately.

 Now, in Silverlight, what to do.... there is no LayoutTransform! I can set the RenderTransform of the Canvas to the ScaleTransform, but the scroll bars do not update to reflect the new scale.

 Any ideas?

 Thanks

David Anson
David Anson

Participant

Participant

1718 points

212 Posts

Microsoft

Re: Scrolling and Zooming in SL 2.0

As you say, this is a scenario for LayoutTransform; I don't believe RenderTransform is expected to update the ScrollBars (even on WPF). Maybe if you can tell us more about the scenario itself, people might have some alternate ideas for you.


http://blogs.msdn.com/delay

This posting is provided "AS IS" with no warranties, and confers no rights.

PaulM360
PaulM360

Member

Member

14 points

13 Posts

Re: Scrolling and Zooming in SL 2.0

As I said, I have a fixed-size canvas inside a scrollviewer, and a slider:

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" x:Name="scrollViewer" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="1">

<Canvas x:Name="canvas" Width="1056" Height="816">

</Canvas>

</ScrollViewer>

<Slider  Grid.Row="1" Grid.Column="0" Height="150" Width="20" Value="50" Maximum="200" Minimum="12.5" x:Name="slider" Canvas.Left="10" Canvas.Top="10"></Slider>

When I change the slider, I create a ScaleTransform based on its value and use that to change the scale of the canvas:

ScaleTransform st = new ScaleTransform(); st.ScaleX = val; st.ScaleY = val; canvas.RenderTransform = st;

Unfortunately the scroll bars don't change size to indicate changes in the needed size of the canvas.

 

 

Yi-Lun Luo - MSFT
Yi-Lun L...

All-Star

All-Star

25052 points

2,747 Posts

Answered Question

Re: Scrolling and Zooming in SL 2.0

Hello, one work round is to add another Canvas with the same size, and manually set its size when the Slider's Value changes. So everything inside the inner Canvas will be affected by its RenderTransform, and the ScrollViewer will be affected by the outer Canvas's size:

<Canvas x:Name="canvasOut" Width="1056" Height="816">

    <Canvas x:Name="canvasIn" Width="1056" Height="816"/>

</Canvas>

ScaleTransform st = new ScaleTransform();

st.ScaleX = slider.Value;

st.ScaleY = slider.Value;

canvasIn.RenderTransform = st;

canvasOut.Height = 816 * slider.Value;

canvasOut.Width = 1056 * slider.Value;

 

shanaolanxing - I'll transfer to the Windows Azure team, and will have limited time to participate in the Silverlight forum. Apologize if I don't answer your questions in time.

ashraful.asif
ashraful...

Member

Member

2 points

1 Posts

Re: Re: Scrolling and Zooming in SL 2.0

thanks. Its really a simple but quite good solution

cozyshri23
cozyshri23

Member

Member

8 points

4 Posts

Re: Re: Scrolling and Zooming in SL 2.0

  <ScrollViewer x:Name="scroller" Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto"   Grid.Row="1" TextWrapping="NoWrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
                            <Grid x:Name="ZoomArea">
                                <Grid Height="Auto" Width="Auto" x:Name="gd">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform x:Name="scaleTransform"></ScaleTransform>
                                        <TranslateTransform x:Name="translateTransform"></TranslateTransform>
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <Image Source="Project Resources/badge_1280.jpg"/>
                            </Grid>
                           </Grid>
      </ScrollViewer>

 

This is my xaml code and below is the c#

           Binding b = new Binding("ActualWidth");

            b.Source = centerCanvas;
            zoomArea.SetBinding(Grid.WidthProperty, b);
            zoomArea.SetBinding(Grid.HeightProperty, b);

            scaleTransform.CenterX = currentMousePosition.X;
            scaleTransform.CenterY = currentMousePosition.Y;

            scaleTransform.ScaleX *= 1.5;
            scaleTransform.ScaleY *= 1.5;

            zoomArea.Width *= 1.5;
            zoomArea.Height *= 1.5

 but it does not work properly, the height of the grid increases but is not proportional to the scaling of the image.

cozyshri23
cozyshri23

Member

Member

8 points

4 Posts

Re: Re: Scrolling and Zooming in SL 2.0

  scaleTransform.CenterX = currentMousePosition.X;
            scaleTransform.CenterY = currentMousePosition.Y;

 basically this what is causing the problem, if I comment this line...everything works fine but after zooming the focus is not to the portion of canvas where user had clicked for zoomed view...

 

how can I solver this ?

ArneHB
ArneHB

Member

Member

18 points

20 Posts

Re: Scrolling and Zooming in SL 2.0

This was most helpfull to me, thanks!

pragati_sd
pragati_sd

Member

Member

52 points

24 Posts

Re: Scrolling and Zooming in SL 2.0

Hi!!

This works fine. But, I need something different, I need the inner canvas to be zoomed, but the outer canvas should remain of same dimentions. Please check this one, with mouse wheel, you will get the idea.

http://finviz.com/map.ashx?t=sec_all 

Waiting for your reply.

Pragati 

  • Unanswered Question
  • Answered Question
  • Announcement
Microsoft Communities