Make a 3D cube and rotate it using WPF, XAML, and C#
For a brief overview of WPF, see my blog entry What is WPF and why should you care?. This example displays a blue three-dimensional cube. You can use the scrollbars to rotate the cube to view it from different directions. The following shows the program's XAML code in its entirety. The XAML code handles all of the user interactions including rotating the cube so the example doesn't need any C# code behind the scenes.
<Window x:Class="howto_xaml_rotate_cube.Window1"The window contains a Grid that defines a large row and column and a small row and column. The scrollbars sit in the grid's skinny cells. The large cell in the upper left contains a Viewport3D object that can display a three-dimensional scene. It contains a ModelVisual3D and a Camera. The ModelVisual3D contains a Model3DGroup that defines some lights to illuminate the scene (you can't see anything without lights) and a GeometryModel3D. The GeometryModel3D defines the geometry of a three-dimensional object and the material of which it is made. The MeshGeometry3D object's Positions values give the positions of vertices in three-dimensional space. The TriangleIndices property gives the indices of vertices that should be used to make triangles. In this example, the first three values in TriangleIndices are 0, 1, and 2 meaning the vertices with indexes 0, 1, and 2 should be used to make a triangle. Note that the GeometryModel3D can define only one geometry and only one material. That means if you want to make multiple objects with different materials, such as red and blue cubes or a single cube with differently colored sides, then you need to use more than one GeometryModel3D object. The Viewport3D's Camera property defines the camera used to view the three-dimensional scene. This example uses a perspective camera positioned at (2, 4, 6) looking back at the origin. The UpDirection determines the camera's tilt. In this example, the camera is oriented vertically. The FieldOfView determines how wide an area the camera views. This example uses two transformations to modify the camera's position. The first is a rotation around the Y axis. The angle of rotation is given by the Value property of the horizontal scrollbar hscroll. The second transformation is a rotation around the X axis through the angle given by the vertical scrollbar's Value property. Binding the angles of rotation to the scrollbars' Value properties lets the XAML code handle the rotations without requiring any C# code. When you adjust a scrollbar, the rotations' angles update and the cube automatically rotates.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="howto_xaml_rotate_cube" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<ScrollBar Name="vscroll"
Grid.Row="0" Grid.Column="1"
Orientation="Vertical"
Minimum="-180" Maximum="180"
LargeChange="10" SmallChange="1" Value="0" />
<ScrollBar Name="hscroll"
Grid.Row="1" Grid.Column="0"
Orientation="Horizontal"
Minimum="-180" Maximum="180"
LargeChange="10" SmallChange="1" Value="0" />
<Viewport3D Margin="4,4,4,4" Grid.Row="0" Grid.Column="0">
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<!-- Lights -->
<AmbientLight Color="Gray" />
<DirectionalLight Color="Gray" Direction="1,-2,-3" />
<DirectionalLight Color="Gray" Direction="-1,2,3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<!-- Cube -->
<MeshGeometry3D
Positions="
-1,-1,-1 1,-1,-1 1,-1, 1 -1,-1, 1
-1,-1, 1 1,-1, 1 1, 1, 1 -1, 1, 1
1,-1, 1 1,-1,-1 1, 1,-1 1, 1, 1
1, 1, 1 1, 1,-1 -1, 1,-1 -1, 1, 1
-1,-1, 1 -1, 1, 1 -1, 1,-1 -1,-1,-1
-1,-1,-1 -1, 1,-1 1, 1,-1 1,-1,-1
"
TriangleIndices="
0 1 2 2 3 0
4 5 6 6 7 4
8 9 10 10 11 8
12 13 14 14 15 12
16 17 18 18 19 16
20 21 22 22 23 20
" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Blue" />
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<Viewport3D.Camera>
<PerspectiveCamera
Position = "2, 4, 6"
LookDirection = "-1, -2, -3"
UpDirection = "0, 1, 0"
FieldOfView = "60">
<PerspectiveCamera.Transform>
<Transform3DGroup>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D
Axis="0 1 0"
Angle="{Binding ElementName=hscroll, Path=Value}" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D
Axis="1 0 0"
Angle="{Binding ElementName=vscroll, Path=Value}" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</PerspectiveCamera.Transform>
</PerspectiveCamera>
</Viewport3D.Camera>
</Viewport3D>
</Grid>
</Window>



Comments