WPF Control Flip

wpf controls flip
CatBusStop picture CatBusStop · Jun 3, 2011 · Viewed 12.7k times · Source

I've got a control that is mainly comprised of an image and a button. I want to display the image meta data on the back of the image and have the control flip horizontally when the button is pressed:

i.e.

enter image description here

Click the "info" button...

enter image description here

Rotate the image 180 degs around the axis...

enter image description here

Show "back" of image with meta data (or whatever really).

Obviously when the red "close" button is clicked, the image rotates around the final 180 degs so that the image is showing again.

I've not done any 3D really in XAML, but I can't see why this would be too complex...

Answer

Snowbear picture Snowbear · Jun 3, 2011

It can be done without 3D. ScaleEffect with changing horizontal scale from 1 to -1 has the same visual effect: 

<Image RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform ScaleX="-1" />
    </Image.RenderTransform>
</Image>

You can animate ScaleX property to get rotating effect. You should also change it's Viisibility from Visible to Hidden and vice versa. To make image disappearing after rotating 90 degrees. At the same time back panel should become visible.

Related questions

How can I find WPF controls by name or type?

I need to search a WPF control hierarchy for controls that match a given name or type. How can I do this?

Read More
How to make overlay control above all other controls?

I need to make a control appear above all other controls, so it will partially overlay them.

Read More
Where is the WPF Numeric UpDown control?

Getting into the first serious WPF project. It seems like there are a lot of basic controls flat out missing. Specifically, I am looking for the Numeric UpDown control. Was there an out of band release that I missed? Really …

Read More