A little while ago, I wrote an article for www.codeproject.com about using 3D meshes in WPF that were hosting 2D controls, such as Grids, Lists, and User controls. The article can be found right here if you are interested.
The problem with the way that I did things in that article was that I used some fairly complicated DataTemplates within the actual 3D model XAML. These DataTemplates also had to include ContentControls that would also look at resources for their own content.
It did work, but now that .NET 3.5 has been released, there is a much better way. This better way comes in the form of a new class, called Viewport2DVisual3D. What this new class allows you to do is to create a 3D model, but it also allows you to host a 2D UIElement on a 3D Material, and the 2D UIElement is fully interactive. It's probably best if I show you an example, so I'll do that now.
<Window x:Class="Viewport2DVisual3D.Window1″
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Viewport2DVisual3D" Height="300″ Width="300″>
<DockPanel Background="White">
<DockPanel.Resources>
<!– UI Mesh –>
<MeshGeometry3D x:Key="uiMesh" TriangleIndices="0,1,2 3,4,5″
Positions="-1,-1,2 1,-1,2 1,1,2 1,1,2 -1,1,2 -1,-1,2 "
TextureCoordinates="0,1 1,1 1,0 1,0, 0,0 0,1″/>
<!– UI Mesh Rotation –>
<Storyboard x:Key="uiSpin" RepeatBehavior="Forever">
<DoubleAnimation BeginTime="00:00:00″ Duration="00:00:15″
Storyboard.TargetName="uiRotate"Storyboard.TargetProperty="Angle"
From="0″ To="360″/>
</Storyboard>
</DockPanel.Resources>
<DockPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource uiSpin}"/>
</EventTrigger>
</DockPanel.Triggers>
<Viewport3D>
<!– Camera –>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4″/>
</Viewport3D.Camera>
<!– Button on 3D –>
<Viewport2DVisual3D >
<!– Give the plane a slight rotation –>
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="uiRotate" Angle="40″ Axis="0, 1, 0″ />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!– The Geometry, Material, and Visual for the Viewport2DVisual3D –>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0″
TextureCoordinates="0,0 0,1 1,1 1,0″ TriangleIndices="0 1 2 0 2 3″/>
</Viewport2DVisual3D.Geometry>
<!– Setup the Material"You can use any material you want. For the material
that you want to have the Visual be placed on, you simply
need to set the Viewport2DVisual3D.IsVisualHostMaterial
attached property to true.
–>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Visual>
<!– The 2D UI–>
<StackPanel Orientation="Vertical">
<Button Background="Yellow" Click="Button_Click">Button1</Button>
<Button Background="Aqua" Click="Button_Click">Button2</Button>
<Button Background="Beige" Click="Button_Click">Button3</Button>
<Button Background="Coral" Click="Button_Click">Button4</Button>
</StackPanel>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
<!– Lights –>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1″/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel></Window>
This small example is a simple 3D mesh, with a StackPanel filled with 4 * Button. When one of the buttons is clicked, a MessageBox is shown with the content of the clickedButton as the Message.
Here is a small demo project if you would like to try this out for yourself.
