Getting Started – WPF Visual Studio

If you do not have a copy of Visual Studio you can download a free version of Visual Basic Community Edition for VB and C# from If you have no experience with either Visual Basic or C# choose Visual Basic. No programming is required to use WPF HMI .NET.

The following steps can be used to add visualization to a C#, or Visual Basic.NET application. Refer to the VB.NET example for programmatic interface of using the OPC Controls components. All properties are programmatically accessible.

The following example demonstrates the use of OAS WPF HMI .NET with no code required:

Step 1

Load the default DemoTags Tag configuration if you have replaced your tag configuration with your own tags.

Start Visual Studio and select File->New->Project to create a new C#, or VB.

WPF Visual Studio 245

Step 2

Select WPF Application as the project type.

WPF Visual Studio 246

Step 3

Save the project and set the Target Framework to the full 4.0 Version.

Select Project-Properties.

WPF Visual Studio 247

In Visual Basic select the Compile tab and Advanced Compile Options button at the bottom.

WPF Visual Studio 248

In C# the Target Framework will appear in the Application tab.

Set the Target CPU to AnyCPU and the Target framework to .NET Framework 4 or greater.

(Do not use the Client Profile)

WPF Visual Studio 249

Step 4

From the Toolbox if OPCWPF Controls components are not available right click in the Toolbox and select Choose Items.  If it is available go to the next step.

WPF Visual Studio 250

From the WPF Components select all of the OPCWPFDashboard Controls components and then select OK. For 4.0 Framework solutions use OPCWPFDashboard Namespace controls. For 3.5 and 4.0 Framework solutions select OPCWPF Namespace.

WPF Visual Studio 251

Step 5

If you want to make your Window adjustable for different screen resolutions and a sizeable Window with all controls automatically scaling specify a View Box.

When you create a WPF application by default the first container in the window is a Grid. Each container has an opening and closing statement in the XAML file.

For example:

<Window x:Class="MainWindow"
    Title="MainWindow" Height="350" Width="525">

All of your content will be in the grid.

To create a window with resizeable content add a ViewBox to the window and put the grid in the ViewBox.


<Window x:Class="MainWindow"
    Title="MainWindow" Height="350" Width="525">

Select the view box and set the stretch property the way you want the application to respond. The options are None, Fill, Uniform and Uniform to Fill. The default is uniform.

Step 6

Add an OPCWPFLabel component onto the Window.

WPF Visual Studio 252

Right click on the OPCWPFLabel and select Properties.

WPF Visual Studio 253

Select the Content_Tag property and use the browse button at the right to set the Open Automation Software Tag to Ramp.Value.

WPF Visual Studio 254

Note: If you wish to run this application on remote PCs make sure to include the Network Node or IP Address of the OAS Service source.

Note: All Tag names are case sensitive. Ramp.Value is valid, ramp.value is not.

Note: You can use the DirectOPC interface to connect directly to OPC Server Items is you just need to gain access to the server items without having to create Open Automation Software Tags.

Step 7

Add an OPCWPFButton to the Form.

WPF Visual Studio 255

Set the Content_Tag to Pump.Value.  If the Pump Tag does not exist create a Boolean Tag using Configure-Tags with the name Pump.

Set the Format fields as defined below…

WPF Visual Studio 256

Set the Background01_Tag to Pump.Value.

WPF Visual Studio 257

Set the SetValue_Tag to Pump.Value.

WPF Visual Studio 258

Step 8

Add an OPCWPFTextBox to the Form.

WPF Visual Studio 259

Set the Text_Tag property to Pump.Value. The Format properties for Boolean to Off and On.

WPF Visual Studio 260

Step 9

Select the Configuration Manager from the Build Menu.

WPF Visual Studio 261

Set the compile mode in the Configuration Manager to Release.

WPF Visual Studio 262

Step 10

Select Build from the VS menu and select to Build the application.

WPF Visual Studio 263

Step 11

Use Windows Explorer to browse for the application located in the binRelease directory and run the application.

WPF Visual Studio 264

Step 12

To deploy the application to remote nodes first make sure the Tags as described in Steps 4, 5, and 6 are set to a Network Node or IP Address. Then simply copy the files in the binRelease directory to the target systems or follow the Smart Client deployment section in this help file to deploy your application using Click Once Deployment.

Note: You can also use the OPCWPFNetworkNodes component and assign a network node alias to change all “localhost” tags to the desired remote node. This is done with the AddNetworkNodeAlias method. Refer to the WinForm Example Code on the exact syntax of how to use this method. Notice how all OPC Controls data sources for a particular node can be reassigned to a remote node with one simple call.

Step 13

There are many different properties to each control. In WPF you can convert graphics to an Image Brush. The Image Brush can then be used as a background in most OPCWPF and OPCWPFDashboard Controls.

The OPC WPF Data component can be used to access data via code with very simple methods. Refer to the Forms FormReadValues and FormWriteValues in the WinForm Example Code.

Refer to the WPF Example application for demonstration examples of all properties of all controls.