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.
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.
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.
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...
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.
PaulM360
Member
14 Points
13 Posts
Scrolling and Zooming in SL 2.0
Mar 11, 2008 06:08 PM | LINK
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
ScrollViewer Scroll Zoom Layout LayoutTransform
David Anson
Participant
1992 Points
249 Posts
Microsoft
Re: Scrolling and Zooming in SL 2.0
Mar 11, 2008 11:02 PM | LINK
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://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.
PaulM360
Member
14 Points
13 Posts
Re: Scrolling and Zooming in SL 2.0
Mar 12, 2008 12:27 AM | LINK
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:
Yi-Lun Luo -...
All-Star
25149 Points
2759 Posts
Microsoft
Re: Scrolling and Zooming in SL 2.0
Mar 13, 2008 04:55 AM | LINK
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;
ashraful.asif
Member
2 Points
1 Post
Re: Re: Scrolling and Zooming in SL 2.0
Jun 25, 2008 01:31 PM | LINK
thanks. Its really a simple but quite good solution
cozyshri23
Member
8 Points
4 Posts
Re: Re: Scrolling and Zooming in SL 2.0
Jul 10, 2008 10:30 AM | LINK
<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
Member
8 Points
4 Posts
Re: Re: Scrolling and Zooming in SL 2.0
Jul 14, 2008 11:03 AM | LINK
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
Member
18 Points
20 Posts
Re: Scrolling and Zooming in SL 2.0
Jan 20, 2009 09:26 AM | LINK
This was most helpfull to me, thanks!
pragati_sd
Member
64 Points
36 Posts
Re: Scrolling and Zooming in SL 2.0
Jun 02, 2009 11:37 AM | LINK
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
Zoom Canvas in Silverlight
simonjohnrob...
Member
18 Points
21 Posts
Re: Re: Scrolling and Zooming in SL 2.0
May 17, 2010 11:00 PM | LINK
Hi,I dont suppose you could let me have a look at your pan and zooming code could you?
I know it's cheeky but you have exactly what i want there.
I have a zoom bug that is driving me crazy.
Many thanks.