--- title: "Walkthrough: Mapping Properties Using the ElementHost Control" ms.date: 08/18/2018 dev_langs: - "csharp" - "vb" helpviewer_keywords: - "mapping properties [WPF]" - "ElementHost control [WPF], mapping properties" ms.assetid: bccd6e0d-2272-4924-9107-ff8ed58b88aa --- # Walkthrough: Mapping Properties Using the ElementHost Control This walkthrough shows you how to use the property to map Windows Forms properties to corresponding properties on a hosted [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] element. Tasks illustrated in this walkthrough include: - Creating the project. - Defining a new property mapping. - Removing a default property mapping. - Extending a default property mapping. When you are finished, you will be able to map Windows Forms properties to corresponding [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] properties on a hosted element. ## Prerequisites You need the following components to complete this walkthrough: - Visual Studio 2017 ## Creating the Project ### To create the project 1. Create a **Windows Forms App** project named `PropertyMappingWithElementHost`. 2. In **Solution Explorer**, add references to the following [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] assemblies. - PresentationCore - PresentationFramework - WindowsBase - WindowsFormsIntegration 3. Copy the following code into the top of the `Form1` code file. [!code-csharp[PropertyMappingWithElementHost#10](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#10)] [!code-vb[PropertyMappingWithElementHost#10](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#10)] 4. Open `Form1` in the Windows Forms Designer. Double-click the form to add an event handler for the event. 5. Return to the Windows Forms Designer and add an event handler for the form's event. For more information, see [How to: Create Event Handlers Using the Designer](/previous-versions/visualstudio/visual-studio-2010/zwwsdtbk(v=vs.100)). 6. Declare an field in the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#16](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#16)] [!code-vb[PropertyMappingWithElementHost#16](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#16)] ## Defining New Property Mappings The control provides several default property mappings. You add a new property mapping by calling the method on the control's . ### To define new property mappings 1. Copy the following code into the definition for the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#12](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#12)] [!code-vb[PropertyMappingWithElementHost#12](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#12)] The `AddMarginMapping` method adds a new mapping for the property. The `OnMarginChange` method translates the property to the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] property. 2. Copy the following code into the definition for the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#14](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#14)] [!code-vb[PropertyMappingWithElementHost#14](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#14)] The `AddRegionMapping` method adds a new mapping for the property. The `OnRegionChange` method translates the property to the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] property. The `Form1_Resize` method handles the form's event and sizes the clipping region to fit the hosted element. ## Removing a Default Property Mapping Remove a default property mapping by calling the method on the control's . ### To remove a default property mapping - Copy the following code into the definition for the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#13](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#13)] [!code-vb[PropertyMappingWithElementHost#13](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#13)] The `RemoveCursorMapping` method deletes the default mapping for the property. ## Extending a Default Property Mapping You can use a default property mapping and also extend it with your own mapping. ### To extend a default property mapping - Copy the following code into the definition for the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#15](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#15)] [!code-vb[PropertyMappingWithElementHost#15](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#15)] The `ExtendBackColorMapping` method adds a custom property translator to the existing property mapping. The `OnBackColorChange` method assigns a specific image to the hosted control's property. The `OnBackColorChange` method is called after the default property mapping is applied. ## Initialize your property mappings 1. Copy the following code into the definition for the `Form1` class. [!code-csharp[PropertyMappingWithElementHost#11](~/samples/snippets/csharp/VS_Snippets_Wpf/PropertyMappingWithElementHost/CSharp/PropertyMappingWithElementHost/Form1.cs#11)] [!code-vb[PropertyMappingWithElementHost#11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PropertyMappingWithElementHost/VisualBasic/PropertyMappingWithElementHost/Form1.vb#11)] The `Form1_Load` method handles the event and performs the following initialization. - Creates a [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] element. - Calls the methods you defined earlier in the walkthrough to set up the property mappings. - Assigns initial values to the mapped properties. 2. Press F5 to build and run the application. ## See also - - - - [Windows Forms and WPF Property Mapping](windows-forms-and-wpf-property-mapping.md) - [Design XAML in Visual Studio](/visualstudio/xaml-tools/designing-xaml-in-visual-studio) - [Walkthrough: Hosting a WPF Composite Control in Windows Forms](walkthrough-hosting-a-wpf-composite-control-in-windows-forms.md)