Skip to main content
InSource Solutions

Hosting a WPF Control in a .Net Control for use in an ArchestrA graphic

  1. Last updated
  2. Save as PDF

Description  

 This TN shows you how to use a WPF control in a Win Form application. You can then use this control in an ArchestrA graphic.  This article assumes you are familiar with the IDE, ArchestrA graphics and Visual Studio .

  • Author: Mario Meza
  • Published: 3/19/2021
  • Applies to: ArchestrA graphic / Industrial Graphic

 

      Using the Element Host control, you can embed a WPF user control  for use in an ArchestrA graphic.

    clipboard_eb81c7fa28151a06036fa8c0ec000c248.png

    Why is this beneficial? For instance a WPF TextBox has a SpellCheck Class built in. 

    clipboard_e05c129a1f1a281440b970632a554be8a.png 

     

    To accomplish this you can create a Visual Studio solution with 3 projects: 

    1. HostWPFControlWinForms  (Windows Forms App)  - This is optional used for testing debugging a control since you can’t start Library project directly.
    2. WindowsFormsControlLibraryElementHost (Windows Forms Control Library) - This is where the Element host control is located. The WPF Text box from step 3 is embedded in this control. This is the actual .dll that gets imported in the IDE 
    3. WpfUserControlLibray  (WPF User Control Library) - This is where the actual TextBox control is located. Once compiled it is added as a reference to             the WpfBrowserBarHost project. 

    *** the default UserControl1 was renamed to match the project name for clarity***

     clipboard_e2eb318b34b19f750cb6e06cb015bd583.png
     

    In the default Visual Studio layout, on the left is the toolbox pane that contains the available ‘controls’ 

    clipboard_e0d4cd6eee04737e2b91a33717b609bb0.png

    The ElementHost Control is one of the listed controls.

    clipboard_e7b22cd1c6e5bc0a3ad5bf4bd8679969d.png

    Drag and drop the control to the WindowsFormsControlLibraryElementHost form in the designer (Windows Forms Control Library). 

     

    clipboard_e5339dd35b1c1b1b0f7c9527a3157eb65.png

     

    Select  WpfUserCtrl.xaml and drag a TextBox control to the designer.

    clipboard_eccc23c2876c6cb117688127f8e4d3afe.png

     

     In WPF you can set properties if the control via the XAML, C# or via the properties window in the bottom right, (similar to the ArchestrA symbol editor). So for example the TextBox was placed on the form, in XAML you can enable the SpellCheck.IsEnabled property ="True". This can also be enabled via the SpellCheckIsEnabled (check box) property (bottom right). 

    clipboard_e4039e687c912d418e30bcb4ad09f4184.png
     
    Resize the TextBox and Canvas / Background to the desired size

    clipboard_eca72e0e61ce2ac79b941751b99deecd7.png

    Once satisfied select the WindowsFormsControlLibraryElementHost project RB and Add Reference

    clipboard_eb007034a7891494cdd8e07d68382d08b.png

    Select the WpfUserControlLibray select OK

    clipboard_e875a7df67dd1daecec50df06083aa283.png

    With the WindowsFormsControlLibraryElementHost  project selected you should see the WPFUserCtrl listed in the Toolbox. Drag it to the canvas and place it in the ElementHost control.

    clipboard_ef450ceff851646e627cd982450c74ea4.png

    Resize the elements, WpfUserCtrl (TextBox), ElementHost, and Canvas / Background.

    To test our control, select the HostWPFControlWinForms project. Drag the ElementHostCtrl  control to the form and resize.

    clipboard_e3e1f79722cd05c81502079c3bab219fb.png

    Back in solution explorer, with the HostWPFControlWinForms project selected, RB and Set as StartUp Project

    clipboard_e7942d71376fa2aeaf537ea035e6d91c0.png

    Start the Debugger.

    clipboard_e75ab53ccb5edb79a7bcc1d670dce4885.png

    You should see similar output.

    clipboard_e5d8d96a3698b5fc3f154716393e78af5.png

    Stop the debugger change from Debug to Release.

    clipboard_ef2ae519d1e98aaa93068bc98fb81cd7d.png

    Build the solution. 

    clipboard_e31700d7e4e1f27e04d694fe4181b2c99.png

     

    With the WindowsFormsControlLibraryElementHost  project selected RB and select Open Folder In File Explorer.

    clipboard_e16cc20dc4328abd9cc79b6184e510454.png

     

    The control we want is in the Release folder.

    clipboard_e1d1940f5fcc18cc2305c58a2f801ffdd.png

    In another TN we will get our control in our AVEVA application.