Geek Answers Handbook

Implement image scaling in scrollviewer on a Windows phone

I put the image control in a scrollviewer just like tnis:

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" > <Image Source="/Test/1.jpg" Width="320"> <Image.RenderTransform> <CompositeTransform ScaleX="{Binding Path=Value, ElementName=slider}"/> </Image.RenderTransform> </Image> </ScrollViewer>

As the code showed, I added a slider to control the Compositetransform formula, but when I change the value of the slider, nothing happened?

And I also tried to attach the zoom and pan mode (depending on the tools) to the image, unfortunately, I could scroll up and down, but I could not zoom in / out the image. Scrollviewer seemed to block pinch manipulations.

As you know, the Scrollviewer control had the "ZoomMode" property in WPF, but it is deprecated in Windows Phone. So, how could I implement iamge scaling in scrollviewer, can anyone help me?

+6
source share
1 answer

xaml code:

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer x:Name="scrl" Height="300" Width="300" BorderBrush="red" BorderThickness="2" VerticalScrollBarVisibility="Disabled"> <StackPanel> <Image x:Name="img" Source="Assets/Mountain.jpg" Height="100" Width="150" RenderTransformOrigin="0.5,0.5"> <Image.RenderTransform> <CompositeTransform x:Name="trans"/> </Image.RenderTransform> <toolkit:GestureService.GestureListener> <toolkit:GestureListener PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta" DragDelta="GestureListener_DragDelta"/> </toolkit:GestureService.GestureListener> </Image> </StackPanel> </ScrollViewer> </Grid>

Cs code:

  double _initialAngle, _initialScale; public MainPage() { InitializeComponent(); scrl.ManipulationMode = ManipulationMode.Control; } private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e) { _initialAngle = trans.Rotation; _initialScale = trans.ScaleX; } private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e) { trans.Rotation = _initialAngle + e.TotalAngleDelta; var curZoom = _initialScale * e.DistanceRatio; if (curZoom >= 1 && curZoom <= 3) { trans.ScaleX = _initialScale * e.DistanceRatio; trans.ScaleY = _initialScale * e.DistanceRatio; } } private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e) { trans.TranslateX += e.HorizontalChange; trans.TranslateY += e.VerticalChange; }

This code works for scaling, rotation and scaling.

+6
source

More articles:


All Articles