Prevent image crop when rotating using transform

Question

I'm binding following XAML to RotateAngle property and it works great with one "but". Image displays cropped. Image control doesn't seem to be refreshing/resizing after rotation. Is there any way to force resize on image and scrollviewer?

<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" BorderThickness="0" HorizontalScrollBarVisibility="Auto">
            <Image 
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  
                Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
                RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="{Binding RotateAngle}"></RotateTransform>
                </Image.RenderTransform>
            </Image>
        </ScrollViewer>

score 1 · Answer 1 · answered May 29 '12 at 05:42

http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html

Go to this page, there is a control called LayoutTransformer. See the sample of that control. It handles rotation, scaling and skewing of images, textbox, listbox, etc. You will get the code there. Hope that helps.!

score 0 · Answer 2 · answered May 29 '12 at 06:50

0

You can try:

<Image x:name="ctrl"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  
                Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
                RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="{Binding DataContext.RotateAngle, ElementName=ctrl}"></RotateTransform>
                </Image.RenderTransform>
            </Image>

answered May 29 '12 at 06:50

Vitaliy Gerasymiuk

236
1
9

I don't have problem wit binding and actual rotation. Problem is - rectangular image crops when rotated 90 degree. Your XAML works exactly the same – katit May 29 '12 at 11:33

score 0 · Answer 3 · answered May 29 '12 at 06:56

Or you can use:

<Image 
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  
                Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
                RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="{Binding DataContext.RotateAngle, RelativeSource={RelativeSource Self}}"></RotateTransform>
                </Image.RenderTransform>
            </Image>

score 0 · Answer 4 · edited May 23 '17 at 10:30

0

Assuming you want to scale your image down to fit the original image space, you could use my CalculateConstraintScale method from here: Silverlight Rotate & Scale a bitmap image to fit within rectangle without cropping to scale the image down based on the rotation.

Click here for a working testbed app created for that answer (looks like the image below):

example app image

edited May 23 '17 at 10:30

Community

1
1

answered May 29 '12 at 10:04

iCollect.it Ltd

92,391
25
181
202

I want Image control to become size of an image when I rotate. Thats why I wrap it into ScrollViewer. – katit May 29 '12 at 14:21
@katit: Can you add a screen-shot, sketch, or *something* to clarify what you want it to look like. If you want the opposite, the inverse of the CalculateConstraintScale value would give you the new desired sizing factor for resizing the image container. Thanks :) – iCollect.it Ltd May 30 '12 at 12:49

Prevent image crop when rotating using transform

4 Answers4