Reverse 3D list item in WPF

Remember that there is a cool 3D rotation effect on an Apple computer that can reverse the positive and negative side of an item, which can be easily done in WPF.

Click to view: Http://www.interact-sw.co.uk/wpfapps/FlipList.xaml

You can also paste this code in XAMLPad to view:

<page xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns:s= "Clr-namespace:system;assembly=mscorlib"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" >

<Page.Resources>
<x:array type= "{x:type s:string}" x:key= "src" >
<s:String>Foo</s:String>
<s:String>Bar</s:String>
<s:String>Spong</s:String>
<s:String>One</s:String>
<s:String>Two</s:String>
<s:String>Three</s:String>
<s:String>Four</s:String>
<s:String>Five</s:String>
</x:Array>

<datatemplate x:key= "Fronttemplate" >
<groupbox header= "Front" background= "White" >
<textblock fontsize= "foreground=" "Green" text= "{Binding}"/>
</GroupBox>
</DataTemplate>
<datatemplate x:key= "Backtemplate" >
<groupbox header= "Back" background= "white" >
<StackPanel>
<radiobutton content= "This" ischecked= "True"/>
<radiobutton content= "is"/>
<radiobutton content= "the"/>
<radiobutton content= "Back"/>
</StackPanel>
</GroupBox>
</DataTemplate>

<datatemplate x:key= "Flipitemtemplate" >

<!--note:camera Setup is square. -->
<grid width= "height=" >

<!--provides 3D rotation transition. Hidden except for when animation is
Active. -->
<viewport3d grid.column= "0" x:name= "vp3d" visibility= "Hidden" >
<Viewport3D.Camera>
<perspectivecamera x:name= "Camera" position= "0,0,0.5" lookdirection= "0,0,-1" fieldofview= "the/>"
</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<directionallight color= "#444" direction= "0,0,-1"/>
<ambientlight color= "#BBB"/>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>

<!--simple flat, square surface-->
<GeometryModel3D.Geometry>
<meshgeometry3d
triangleindices= "0,1,2 2,3,0"
texturecoordinates= "0,1 1,1 1,0 0,0"
positions= " -0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0-0.5,0.5,0"/>
</GeometryModel3D.Geometry>

<!--Front of shape shows the content of ' fronthost '-->
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<visualbrush visual= "{Binding elementname=fronthost}"/>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>

<!--back of shape shows the content of ' backhost '-->
<GeometryModel3D.BackMaterial>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<visualbrush visual= "{Binding elementname=backhost}" >
<VisualBrush.RelativeTransform>
<!--By default, this would come out backwards because we ' re on the
Back on the shape. Flip it to make it right. -->
<scaletransform scalex= "-1" centerx= "0.5"/>
</VisualBrush.RelativeTransform>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.BackMaterial>

<!--rotation transform used for transition. -->
<GeometryModel3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<axisanglerotation3d x:name= "Rotate" axis= "0,3,0" angle= "0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>

</Viewport3D>

<!--We Use a pair of nested Borders to wrap the content that's going to go on
Each side of the rotating model.
The reason is, we need to being able to fade this real bits of UI
As we transition from front to but we need to make sure the VisualBrush
In the 3D model doesn ' t also get faded out. So the VisualBrush uses the inner
Border, while the fade was applied to the outer one.
-->
<border x:name= "Frontwrapper" >
<!--note, it's important that this element has visuals that completely fill of the space, as
Otherwise it messes with the VisualBrush ' s size in the 3D model. Setting the background
Has that effect, even a transparent one. -->
<border x:name= "Fronthost" background= "Transparent" >
<Border.Triggers>
<eventtrigger routedevent= "Grid.mousedown" >
<BeginStoryboard>
<Storyboard>
<!--make the Viewport3D visible a for the duration of the rotation. -->
<objectanimationusingkeyframes
Storyboard.targetname= "Vp3d"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:0" value= "{x:static visibility.visible}"/>
<discreteobjectkeyframe keytime= "0:0:1.1" value= "{x:static Visibility.hidden}"/>
</ObjectAnimationUsingKeyFrames>

<!--make the background element visible. (It won ' t actually appear until it is
Faded in the ' end of the ' animation. -->
<objectanimationusingkeyframes
Storyboard.targetname= "Backwrapper"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:1" value= "{x:static visibility.visible}"/>
</ObjectAnimationUsingKeyFrames>

<!--Hide the foreground element. It'll already be invisible by this time
Because we fade it out right at the start of the animation. However, until
We set its Visibility to Hidden, it'll still be visible to the mouse-->
<objectanimationusingkeyframes
Storyboard.targetname= "Frontwrapper"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:0.05" value= "{x:static Visibility.hidden}"/>
</ObjectAnimationUsingKeyFrames>

<!--Fade the front wrapper out. The Viewport3D is behind us and so it ' ll fade into
View at this point. The reason for fading are to avoid a visible step as we
Switch from the "real" UI to the copy projected onto the 3D model. -->
<doubleanimation to= "0" duration= "0:0:0.05"
Storyboard.targetname= "Frontwrapper"
storyboard.targetproperty= "Opacity"/>

<!--Fade the back wrapper in. Once The spin completes, we fade the real back UI
In over the viewport3d-using a fade to avoid a sudden jolt between the
Slightly fuzzy 3D look and the real UI. -->
<doubleanimation begintime= "0:0:1.05" duration= "0:0:0.05" to= "1"
Storyboard.targetname= "Backwrapper"
storyboard.targetproperty= "Opacity"/>

<!--3D Animation. Move the camera out slightly as we spin and so the model fits entirely
Within the field of view. Rotate the model 180 degrees. -->
<point3danimation to= "0,0,1.1" from= "0,0,0.5"
Begintime= "0:0:0.05" duration= "0:0:0.5" autoreverse= "True" decelerationratio= "0.3"
Storyboard.targetname= "Camera"
Storyboard.targetproperty= "(perspectivecamera.position)"/>
<doubleanimation from= "0" to= "180" accelerationratio= "0.3" decelerationratio= "0.3"
Begintime= "0:0:0.05" duration= "0:0:1"
Storyboard.targetname= "Rotate"
storyboard.targetproperty= "Angle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<contentpresenter content= ' {Binding} ' contenttemplate= ' {StaticResource fronttemplate} '/>
</Border>
</Border>
<border x:name= "Backwrapper" grid.column= "0" visibility= "Hidden" opacity= "0" >
<border x:name= "Backhost" background= "Transparent" >
<Border.Triggers>
<eventtrigger routedevent= "Grid.mousedown" >
<BeginStoryboard>
<Storyboard>
<objectanimationusingkeyframes
Storyboard.targetname= "Vp3d"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:0" value= "{x:static visibility.visible}"/>
<discreteobjectkeyframe keytime= "0:0:1.1" value= "{x:static Visibility.hidden}"/>
</ObjectAnimationUsingKeyFrames>

<objectanimationusingkeyframes
Storyboard.targetname= "Frontwrapper"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:1" value= "{x:static visibility.visible}"/>
</ObjectAnimationUsingKeyFrames>
<objectanimationusingkeyframes
Storyboard.targetname= "Backwrapper"
storyboard.targetproperty= "Visibility" >
<discreteobjectkeyframe keytime= "0:0:0.05" value= "{x:static Visibility.hidden}"/>
</ObjectAnimationUsingKeyFrames>

<doubleanimation to= "0" duration= "0:0:0.05"
Storyboard.targetname= "Backwrapper"
storyboard.targetproperty= "Opacity"/>
<doubleanimation begintime= "0:0:1.05" duration= "0:0:0.05"
Storyboard.targetname= "Frontwrapper"
storyboard.targetproperty= "Opacity"/>

<point3danimation to= "0,0,1.1" from= "0,0,0.5"
Begintime= "0:0:0.05" duration= "0:0:0.5" autoreverse= "True" decelerationratio= "0.3"
Storyboard.targetname= "Camera"
Storyboard.targetproperty= "(perspectivecamera.position)"/>
<doubleanimation from= "180" to= "360" accelerationratio= "0.3" decelerationratio= "0.3"
Begintime= "0:0:0.05" duration= "0:0:1"
Storyboard.targetname= "Rotate"
storyboard.targetproperty= "Angle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<contentpresenter content= ' {Binding} ' contenttemplate= ' {StaticResource backtemplate} '/>
</Border>
</Border>

</Grid>
</DataTemplate>

</Page.Resources>

<ScrollViewer>
<itemscontrol itemssource= "{staticresource src}" itemtemplate= "{StaticResource flipitemtemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<wrappanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

</ItemsControl>
</ScrollViewer>

</Page>

For more information please refer here: http://www.interact-sw.co.uk/iangblog/2007/05/17/wpf-flippable-3D-list