CODEWITHSUNDEEP
imagewinrt-xamlscrollviewerimage-rotation
Philip Colmer
Philip Colmer

Reputation: 1674

Putting together image pan, zoom and rotation (C#, XAML)

I want to display images that the user has provided. These images are likely to be larger than the screen resolution (so need zoom and pan capability) plus the image may not be orientated correctly for the screen (so need to be able to rotate).

Implementing pan and zoom seems to be somewhat straightforward:

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" />
</ScrollViewer>

This works well and meets my needs, although I would like to be able to set the initial zoom factor so that if the image is larger than the screen, the zoom factor is set so that it fills the screen and if the image isn't larger than the screen, the zoom factor is set so that the image is shown at its full size, i.e. not zoomed in.

However, I'm struggling to get rotation to work acceptably. I've tried this:

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" >
      <Image.Projection>
         <PlaneProjection RotationZ="{Binding ImageRotation}"/>
      </Image.Projection>
    </Image>
 </ScrollViewer>

Although this does rotate the image, the problem is that the ScrollViewer then gets the scrolling wrong. I've also tried putting the Projection onto the ScrollViewer instead of the Image and that is even worse.

Putting the project onto the image seems to make the most sense since the ScrollViewer should then get the dimensions of the projected image but that doesn't quite seem to be the case.

What am I misunderstanding here, please?

Thanks.

Philip

Upvotes: 2

Views: 1508

Answers (1)

Philip Colmer
Philip Colmer

Reputation: 1674

The solution was to use a RenderTransform instead of a Projection:

            <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" ManipulationMode="All" Loaded="pannableImage_Loaded" IsDoubleTapEnabled="False" IsHitTestVisible="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ScrollViewer.VerticalScrollBarVisibility="Disabled" LayoutUpdated="pannableImage_LayoutUpdated">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="Scale" />
                        <RotateTransform x:Name="Rotate" />
                        <TranslateTransform x:Name="Translate" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>

Upvotes: 1

Related Questions