How to avoid image getting cut when rotated in WPF

Question

0.00/5 (No votes)

See more:

Hi guys,

I tried many things to avoid my card back image getting cut when rotated.

Here is my code :

XML

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Animation" Height="600" Width="800">
    <Grid>
        <Image Height="120" Margin="12,11,676,430" Name="image1" Source="/Resources/Back.png" Stretch="Fill" Width="90">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
            <Image.LayoutTransform>
                <RotateTransform />
            </Image.LayoutTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="12" To="650" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:1"/>-->
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Width" From="90" To="120" Duration="0:0:1"/>-->
                            <!--<DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Height" From="120" To="90" Duration="0:0:1"/>-->
                            <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="(Image.LayoutTransform).(RotateTransform.Angle)" From="0" To="45" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>
</Window>

Thanks in advance,
Marcelo

Posted 14-Dec-11 4:51am

Pelluso Coder

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2011-12-14T05:56:00

Anything can get cut as a result of transform. This looks like a very usual problem with understanding of order of operation and the center of rotation and nothing else. There are too factors: transforms are not commutative in general case, and the matrix multiplication does not commutative (http://en.wikipedia.org/wiki/Commutative_property[^]): if you do translation and then rotation transform and then switch the order of transforms, the results will be different, but two rotations or two translations are commutative.

So, this is all the matter of right combination of the effect of two transforms, translation and rotation, their order, and the center point of rotation operation and its transform. This case if very simple; you can just get a feeling of what's going on on a simple code sample where you can see the result of each step. Perhaps do it in C# first, not in XAML; and you will clearly see the effect of each transform and find the combination which is right for you.

—SA