Edit

Share via


Walkthrough: Host a 3D WPF Composite Control in Windows Forms

This walkthrough demonstrates how you can create a WPF composite control and host it in Windows Forms controls and forms by using the ElementHost control.

In this walkthrough, you will implement a WPF UserControl that contains two child controls. The UserControl displays a three-dimensional (3D) cone. Rendering 3D objects is much easier with the WPF than with Windows Forms. Therefore, it makes sense to host a WPF UserControl class to create 3D graphics in Windows Forms.

Tasks illustrated in this walkthrough include:

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2017

Create the UserControl

  1. Create a WPF User Control Library project named HostingWpfUserControlInWf.

  2. Open UserControl1.xaml in the WPF Designer.

  3. Replace the generated code with the following code:

    <UserControl x:Class="HostingWpfUserControlInWf.UserControl1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        >
      
        <Grid>
    
          <!-- Place a Label control at the top of the view. -->
          <Label 
                    HorizontalAlignment="Center" 
                    TextBlock.TextAlignment="Center" 
                    FontSize="20" 
                    Foreground="Red" 
                    Content="Model: Cone"/>
    
          <!-- Viewport3D is the rendering surface. -->
          <Viewport3D Name="myViewport" >
    
            <!-- Add a camera. -->
            <Viewport3D.Camera>
              <PerspectiveCamera 
                            FarPlaneDistance="20" 
                            LookDirection="0,0,1" 
                            UpDirection="0,1,0" 
                            NearPlaneDistance="1" 
                            Position="0,0,-3" 
                            FieldOfView="45" />
            </Viewport3D.Camera>
    
            <!-- Add models. -->
            <Viewport3D.Children>
    
              <ModelVisual3D>
                <ModelVisual3D.Content>
    
                  <Model3DGroup >
                    <Model3DGroup.Children>
    
                      <!-- Lights, MeshGeometry3D and DiffuseMaterial objects are added to the ModelVisual3D. -->
                      <DirectionalLight Color="#FFFFFFFF" Direction="3,-4,5" />
    
                      <!-- Define a red cone. -->
                      <GeometryModel3D>
    
                        <GeometryModel3D.Geometry>
                          <MeshGeometry3D 
        Positions="0.293893 -0.5 0.404509  0.475528 -0.5 0.154509  0 0.5 0  0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 0.154509  0.475528 -0.5 -0.154509  0 0.5 0  0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 -0.154509  0.293893 -0.5 -0.404509  0 0.5 0  0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  0.293893 -0.5 -0.404509  0 -0.5 -0.5  0 0.5 0  0 -0.5 -0.5  0 0.5 0  0 0.5 0  0 -0.5 -0.5  -0.293893 -0.5 -0.404509  0 0.5 0  -0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  -0.293893 -0.5 -0.404509  -0.475528 -0.5 -0.154509  0 0.5 0  -0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 -0.154509  -0.475528 -0.5 0.154509  0 0.5 0  -0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 0.154509  -0.293892 -0.5 0.404509  0 0.5 0  -0.293892 -0.5 0.404509  0 0.5 0  0 0.5 0  -0.293892 -0.5 0.404509  0 -0.5 0.5  0 0.5 0  0 -0.5 0.5  0 0.5 0  0 0.5 0  0 -0.5 0.5  0.293893 -0.5 0.404509  0 0.5 0  0.293893 -0.5 0.404509  0 0.5 0  0 0.5 0  " 
        Normals="0.7236065,0.4472139,0.5257313  0.2763934,0.4472138,0.8506507  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  -0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.5308242,0.4294462,0.7306172  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.7236065,0.4472139,0.5257313  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.858892,0.429446,0.279071  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.8944269,0.4472139,0  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.858892,0.429446,-0.279071  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.7236065,0.4472139,-0.5257313  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.5308242,0.4294462,-0.7306172  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.2763934,0.4472138,-0.8506507  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.5308249,0.4294459,-0.7306169  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.7236068,0.4472141,-0.5257306  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8588922,0.4294461,-0.27907  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8944269,0.4472139,0  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.858892,0.429446,0.279071  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.7236065,0.4472139,0.5257313  0.858892,0.429446,0.279071  0.7236065,0.4472139,0.5257313  0.5308242,0.4294462,0.7306172  0.858892,0.429446,0.279071  "                   TriangleIndices="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 " />
                        </GeometryModel3D.Geometry>
    
                        <GeometryModel3D.Material>
                          <DiffuseMaterial>
                            <DiffuseMaterial.Brush>
                              <SolidColorBrush 
                                Color="Red" 
                                Opacity="1.0"/>
                            </DiffuseMaterial.Brush>
                          </DiffuseMaterial>
                        </GeometryModel3D.Material>
    
                      </GeometryModel3D>
    
                    </Model3DGroup.Children>
                  </Model3DGroup>
    
                </ModelVisual3D.Content>
    
              </ModelVisual3D>
    
            </Viewport3D.Children>
    
          </Viewport3D>
        </Grid>
      
    </UserControl>
    

    This code defines a System.Windows.Controls.UserControl that contains two child controls. The first child control is a System.Windows.Controls.Label control; the second is a Viewport3D control that displays a 3D cone.

Create the host project

  1. Add a Windows Forms App (.NET Framework) project named WpfUserControlHost to the solution.

  2. In Solution Explorer, add a reference to the WindowsFormsIntegration assembly, which is named WindowsFormsIntegration.dll.

  3. Add references to the following WPF assemblies:

    • PresentationCore

    • PresentationFramework

    • WindowsBase

  4. Add a reference to the HostingWpfUserControlInWf project.

  5. In Solution Explorer, set the WpfUserControlHost project to be the startup project.

Host the UserControl

  1. In the Windows Forms Designer, open Form1.

  2. In the Properties window, click Events, and then double-click the Load event to create an event handler.

    The Code Editor opens to the newly generated Form1_Load event handler.

  3. Replace the code in Form1.cs with the following code.

    The Form1_Load event handler creates an instance of UserControl1 and adds it to the ElementHost control's collection of child controls. The ElementHost control is added to the form's collection of child controls.

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Text;
    using System.Windows.Forms;
    
    using System.Windows.Forms.Integration;
    
    namespace WpfUserControlHost
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
            }
    
            private void Form1_Load(object sender, EventArgs e)
            {
                // Create the ElementHost control for hosting the
                // WPF UserControl.
                ElementHost host = new ElementHost();
                host.Dock = DockStyle.Fill;
    
                // Create the WPF UserControl.
                HostingWpfUserControlInWf.UserControl1 uc =
                    new HostingWpfUserControlInWf.UserControl1();
    
                // Assign the WPF UserControl to the ElementHost control's
                // Child property.
                host.Child = uc;
    
                // Add the ElementHost control to the form's
                // collection of child controls.
                this.Controls.Add(host);
            }
        }
    }
    
    Imports System.Collections.Generic
    Imports System.ComponentModel
    Imports System.Data
    Imports System.Drawing
    Imports System.Text
    Imports System.Windows.Forms
    
    Imports System.Windows.Forms.Integration
    
    Public Class Form1
        Inherits Form
    
        Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            ' Create the ElementHost control for hosting the
            ' WPF UserControl.
            Dim host As New ElementHost()
            host.Dock = DockStyle.Fill
    
            ' Create the WPF UserControl.
            Dim uc As New HostingWpfUserControlInWf.UserControl1()
    
            ' Assign the WPF UserControl to the ElementHost control's
            ' Child property.
            host.Child = uc
    
            ' Add the ElementHost control to the form's
            ' collection of child controls.
            Me.Controls.Add(host)
        End Sub
    
    End Class
    
  4. Press F5 to build and run the application.

See also