CSharp - 2D windows form controls in a 3D space

Question

Hi, please forgive me if this is not the proper place to post this question.

I'm new to dotNET and know nothing about Direct3D and WPF. The tutorials I found out there don't seem to be suitable for a beginner like me.

I want to create a simple windows form in CSharp which has its 2D controls placed in a 3D space, please guide me in a simple way.

I'm sorry I'm not good at English, I don't know if the above question is clear enough, please let me explain it with the following picture:

I cannot post images yet, please click this link

(The above picture is not real, it is edited using photoshop, it is just to explain the goal I want to achieve.)

To make it more clear, this is an example project in Flash I worked on a long time ago, I want to create similar thing as a windows application with CSharp:

aveltium.blogspot.com (This is my first post so I cannot put two hyperlinks)

Answer 1

Hi,

I've recreated the scene you described in your picture in WPF - well, i've done the left and right panes - I'll leave the bottom pane for you.

You just need to create a new WPF application in VS2008 and paste the following XAML over the Window1 XAML and run the application ...

Hope this helps.

Cheers,

Andy

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="480" Width="751">
    <Window.Resources>
        <Transform3DGroup x:Key="leftTransform" >
            <TranslateTransform3D OffsetX="-3"></TranslateTransform3D>
            <RotateTransform3D  >
                <RotateTransform3D.Rotation>
                    <AxisAngleRotation3D Axis="0,1,0" Angle="50" />
                </RotateTransform3D.Rotation>
            </RotateTransform3D>
        </Transform3DGroup>
        <Transform3DGroup x:Key="rightTransform" >
            <TranslateTransform3D OffsetX="3"></TranslateTransform3D>
            <RotateTransform3D  >
                <RotateTransform3D.Rotation>
                    <AxisAngleRotation3D Axis="0,1,0" Angle="-50" />
                </RotateTransform3D.Rotation>
            </RotateTransform3D>
        </Transform3DGroup>
        <MeshGeometry3D
                        x:Key="squareMeshFront"
                        Positions="-1.5,-1,1  1.5,-1,1  1.5,1,1  -1.5,1,1"
                        TriangleIndices="0 1 2 0 2 3"
                        TextureCoordinates="0,1 1,1 1,0 0,0" />

        <DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
    </Window.Resources>

    <Viewport3D>

        <Viewport3D.Camera>
            <PerspectiveCamera Position="0,0,10" LookDirection="0,0,-1" />
        </Viewport3D.Camera>

        <Viewport2DVisual3D x:Name="vpLeft" Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFront}" Transform="{StaticResource leftTransform}" >

            <Grid Width="300" Height="200" Background="LightGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Label Content="Panel 1" HorizontalAlignment="Left" FontSize="30"></Label>

                <Label Grid.Row="1" HorizontalAlignment="Left" Margin="0,0,10,0">ComboBox</Label>
                <ComboBox HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Width="100" Margin="0,0,0,4" />

                <Label Grid.Row="2" HorizontalAlignment="Left" Margin="0,0,10,0">Text Box</Label>
                <TextBox HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" Width="100" Margin="0,0,0,4"></TextBox>

                <Button Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" Width="100" Height="25">Button</Button>
            </Grid>

        </Viewport2DVisual3D>

        <Viewport2DVisual3D x:Name="vpRight" Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFront}" Transform="{StaticResource rightTransform}" >

            <Grid Width="300" Height="200" Background="LightGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Label Content="Panel 1" HorizontalAlignment="Left" FontSize="30"></Label>

                <Label Grid.Row="1" HorizontalAlignment="Left" Margin="0,0,10,0">ComboBox</Label>
                <ComboBox HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Width="100" Margin="0,0,0,4" />

                <Label Grid.Row="2" HorizontalAlignment="Left" Margin="0,0,10,0">Text Box</Label>
                <TextBox HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" Width="100" Margin="0,0,0,4"></TextBox>

                <Button Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" Width="100" Height="25">Button</Button>
            </Grid>

        </Viewport2DVisual3D>

        <ModelVisual3D>
            <ModelVisual3D.Content>
                <AmbientLight Color="White" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </Viewport3D>

</Window>