Create a fixed-size graphic for a ViewApp pane with a known size

This topic describes the general sequence of steps to create a fixed size graphic designed to fit a ViewApp pane with a known size. This workflow is typical of creating content that will fit exactly within a pane while editing a ViewApp with the ViewApp Editor.

Important:

The size of a graphic in runtime is affected by the resolution of the screen that will show the running ViewApp and the specified width and height of the layout pane in which the graphic is placed. Also, the layout Display Mode property includes a set of options that determines how content is resized during runtime to fit within the size of a layout pane.

The following procedure describes the steps to create a fixed size graphic that will fit within a pane of a known size. You should create a fixed size graphic whose width and height matches the resolution of the screen profile.You should set the the dimensions of the hosting pane to the same size as the graphic.

To create a fixed size graphic that fits within a pane of a known size

1. Open the ViewApp in the ViewApp Editor that will contain the fixed size graphic.

2. Right-click the pane that will contain the fixed size graphic and select Create Graphic.

   A dialog box appears requesting a name for the graphic to be created.

3. Assign a name to the graphic.

   The Industrial Graphic Editor opens. and the white portion of the canvas shows the dimensions of the pane where you created a graphic. The Size property is set to Fixed and the FixedWidth and FixedHeight properties show the dimensions of the pane in pixels.

   

4. Place graphic elements and graphic to create a graphic.

5. Save and close the graphic to return to the ViewApp Editor.

   The graphic you created appears in the pane where you created the graphic. The graphic should fit into the pane at the same size as it was designed in the Industrial Graphic Editor.

6. Save the ViewApp and deploy it.

7. Open the deployed ViewApp

   In runtime, the ViewApp will show the graphic you created at the same size as it was originally designed.

   The rendered graphic shows:

   • The graphic fits in the pane at the same size as it was designed in the Industrial Graphic Editor.

   • The graphic's size does not change in runtime.

   • Any blank spaces around the graphic are maintained and appear in the graphic during runtime.