Is there a rotation guide somewhere? With impact on height and width?

Hi

I'm having a hell of a time understanding how to effectively use
rotations with Xaml. Is there a resource on the web for this?

Rotation, is easy, however the effect of it on bounding box is really not.

For instance, I get an image from the web which is 100x800 and I want to
show it with a -90 rotation then scaled down to 200 pixels. Actually, I
don't know the exact values of the original image, I just know that 200
pixels is the target.

Simply saying rotate by -90 is useless on the image because the width
and height are not also adjusted by the rotated content.

I had to do the following:


<Canvas Width="190" Height="27"
<Image Canvas.Left="185" Canvas.Top="10" Width="Auto" Height="180"
Source="{Binding Path=ImageUri}" HorizontalAlignment="Stretch"
VerticalAlignment="Center" Grid.RowSpan="1" Grid.ColumnSpan="2"
MinWidth="0" MinHeight="0" ClipToBounds="False" Margin="0,0,0,0"
IsEnabled="True">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Canvas>


Now my problem was that I wanted to improve on my current design. Which
for now simply show a sk product as (where xXXXXXx is the image of a ski
or something like that)

xXXXXXXXXXXXXXXxx
Name $10
Description

To improve on it. I wanted to rotate the whole content of it without a
description.

x $
X 1
X 0
X
X n
X a
X m
x e

Then when the user clicks or hovers, rotate the content to show

xXXXXXXXXXXXXXXxx
Name $10
Description of
product

field A: babd
field B: baddfas

My current approach just doesn't work. The new width, height of the
rotated content are not known by the system (or something) and the
rotated content just doesn't fit inside the new box (without manually
adjusting a Top part and putting everything in a fixed sized canvas).

Please help.

Phil

Since you want layout to respond to your Transform - rather than just
applying a Transform which only affects rendering - consider using
LayoutTransform rather than RenderTransform. This will apply the transform
on the input to the layout process rather than the output. Depending on
what you're doing, you should be good to go.

-Adam Smith [MS]

"Philippe Lavoie" <philippe.lavoie@cactus.ca> wrote in message
news:eQxtRIqTGHA.1672@tk2msftngp13.phx.gbl...
> Hi
>
> I'm having a hell of a time understanding how to effectively use rotations
> with Xaml. Is there a resource on the web for this?
>
> Rotation, is easy, however the effect of it on bounding box is really not.
>
> For instance, I get an image from the web which is 100x800 and I want to
> show it with a -90 rotation then scaled down to 200 pixels. Actually, I
> don't know the exact values of the original image, I just know that 200
> pixels is the target.
>
> Simply saying rotate by -90 is useless on the image because the width and
> height are not also adjusted by the rotated content.
>
> I had to do the following:
>
>
> <Canvas Width="190" Height="27"
> <Image Canvas.Left="185" Canvas.Top="10" Width="Auto" Height="180"
> Source="{Binding Path=ImageUri}" HorizontalAlignment="Stretch"
> VerticalAlignment="Center" Grid.RowSpan="1" Grid.ColumnSpan="2"
> MinWidth="0" MinHeight="0" ClipToBounds="False" Margin="0,0,0,0"
> IsEnabled="True">
> <Image.RenderTransform>
> <TransformGroup>
> <RotateTransform Angle="90"/>
> </TransformGroup>
> </Image.RenderTransform>
> </Image>
> </Canvas>
>
>
> Now my problem was that I wanted to improve on my current design. Which
> for now simply show a sk product as (where xXXXXXx is the image of a ski
> or something like that)
>
> xXXXXXXXXXXXXXXxx
> Name $10
> Description
>
> To improve on it. I wanted to rotate the whole content of it without a
> description.
>
> x $
> X 1
> X 0
> X
> X n
> X a
> X m
> x e
>
> Then when the user clicks or hovers, rotate the content to show
>
> xXXXXXXXXXXXXXXxx
> Name $10
> Description of
> product
>
> field A: babd
> field B: baddfas
>
> My current approach just doesn't work. The new width, height of the
> rotated content are not known by the system (or something) and the rotated
> content just doesn't fit inside the new box (without manually adjusting a
> Top part and putting everything in a fixed sized canvas).
>
> Please help.
>
> Phil
>