How to Perform flip between two Pages by 3D Animation using WPF

Question

I am trying to add flip animation between two UIElements(Image/Page).I am trying to do flipping affect on the UIElement Horizontally by keeping the UIElement at the fixed Place(I mean by staying at origin(0,0,0) position ).The issue that I am having the idea about 2D animation only and I did this task using 3D Animation but in 2D it seems as Shrinking and then expanding,for proper flipping I need 3D Animation in my Project.

Please suggest me how Would I go for this 3D Animation by your best answers....

Answer 1

My XAML code:

<Window.Resources>
    <Storyboard >
        <DoubleAnimation Storyboard.TargetName="flip" 
         Storyboard.TargetProperty="Angle" 
         Duration="0:0:04" From="0" To="180" />
    </Storyboard>
</Window.Resources>
<Viewport3D>
        <Viewport3D.Camera>            
            <PerspectiveCamera LookDirection="0,0,-1" 
             UpDirection="0,1,0" Position="0,0,45" FieldOfView="45" />
        </Viewport3D.Camera>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <Model3DGroup x:Name="Scene">
                    <!-- Lights -->
                    <AmbientLight Color="White"/>
                    <DirectionalLight Color="White" Direction="-1,-3,-2"/>
                    <DirectionalLight Color="White" Direction="1,-2,3"/>
                    <Model3DGroup>
                        <Model3DGroup.Transform>
                            <Transform3DGroup>
                                <RotateTransform3D>
                                    <RotateTransform3D.Rotation>
                                        <AxisAngleRotation3D  x:Name="flip" Angle="0" 
                                         Axis="0 1 0"/>
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                            </Transform3DGroup>
                        </Model3DGroup.Transform>
                        <!-- -Y -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D 
                                 Positions="-10,-8,-0.2 10,-8,-0.2 10,-8,0.2 -10,-8,0.2" 
                                 TriangleIndices="0,1,2 0,2,3" 
                                 TextureCoordinates="0,0 0,1 1,1 1,0"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <ImageBrush ImageSource="bark.jpg"/>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                        <!-- +Y -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D 
                                 Positions="10,8,0.2 10,8,-0.2 -10,8,-0.2 -10,8,0.2"  
                                 TriangleIndices="0,1,2 0,2,3" 
                                 TextureCoordinates="0,0 0,1 1,1 1,0"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <ImageBrush ImageSource="metal.jpg"/>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                        <!-- -X -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D 
                                 Positions="-10,8,-0.2 -10,-8,-0.2 -10,-8,0.2 -10,8,0.2"  
                                 TriangleIndices="0,1,2 0,2,3" 
                                 TextureCoordinates="0,0 0,1 1,1 1,0"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <ImageBrush ImageSource="brick.jpg"/>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                        <!-- +X -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D 
                                 Positions="10,8,0.2 10,-8,0.2 10,-8,-0.2 10,8,-0.2" 
                                 TriangleIndices="0,1,2 0,2,3" 
                                 TextureCoordinates="0,0 0,1 1,1 1,0"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <ImageBrush ImageSource="clouds.jpg"/>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                        <!-- -Z -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D 
                                 Positions="10,8,-0.2 10,-8,-0.2 -10,-8,-0.2 -10,8,-0.2" 
                                 TriangleIndices="0,1,2 0,2,3" 
                                 TextureCoordinates="0,0 0,1 1,1 1,0"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <VisualBrush>
                                            <VisualBrush.Visual>
                                                <Image Source="rock.jpg"/>
                                            </VisualBrush.Visual>
                                        </VisualBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                        <!-- +Z -->
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                              <MeshGeometry3D Positions="-10 -8 0.2  10 -8 0.2  -10 8 0.2  10 8 0.2" 
                               Normals="0 0 1  0 0 1  0 0 1  0 0 1" 
                               TextureCoordinates="0 1  1 1  0 0  1 0" 
                               TriangleIndices="0 1 2  1 3 2"/>
                        </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <VisualBrush>
                                            <VisualBrush.Visual>
                                                <Image Source="wood.jpg"/>
                                            </VisualBrush.Visual>
                                        </VisualBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                        </GeometryModel3D>
                    </Model3DGroup>                    
                </Model3DGroup>
            </ModelVisual3D.Content>
        </ModelVisual3D>
    <Viewport2DVisual3D>
        <Viewport2DVisual3D.Geometry>
            <MeshGeometry3D 
             Positions="-5 -11 0  5 -11 0  -5 -9 0  5 -9 0" 
             Normals="0 0 1  0 0 1  0 0 1  0 0 1" 
             TextureCoordinates="0 1  1 1  0 0  1 0" 
             TriangleIndices="0 1 2  1 3 2"/>
        </Viewport2DVisual3D.Geometry>
        <Viewport2DVisual3D.Material>
            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
        </Viewport2DVisual3D.Material>
        <Viewport2DVisual3D.Visual>
            <Button Margin="3" Click="FlipButton_Click">Flip Me</Button>
        </Viewport2DVisual3D.Visual>            
    </Viewport2DVisual3D>
</Viewport3D>

C# code for Button Click Event:

private void FlipButton_Click(object sender, RoutedEventArgs e) { Storyboard st = this.FindResource("FlipFront") as Storyboard; st.Begin();
}