Setting the Screen node

The Screen node in a Kanzi application describes the metrics and the content of the screen of the target device on which the Kanzi application is shown. You can:

• Set the Screen size of your application so that its size is fixed or dynamically resizable. See Setting the size of the Screen node.
• Set the color of the areas outside the Screen node. See Setting the color of areas outside the Screen node.
• Make your application fill the entire device screen. See Making an application that fills the entire screen.

Setting the size of the Screen node

To set the size of the Screen node, in the Project select the Screen node and in the Properties set:

• For a fixed size window, set either:
  • Screen Resolution to a specific resolution
    
  • Metrics Type to Absolute, and define the absolute Width and Height
    
• For a resizable window, set Metrics Type to Relative and define the relative Width and Height.
  

Setting the color of areas outside the Screen node

When the resolution of the device screen is larger than the resolution of an application with a fixed size of the Screen node, you can set the color of the areas outside of the Screen node with the Screen Clear Color property.

When you use the Screen Clear Color property, and you have Viewport 2D nodes in the scene graph, you can render them with a render pass that does not perform color clear. The Screen performs the color clear already.

Set the Screen Clear Color when your Kanzi application does not use copy swap behavior, and:

• Target hardware uses tile-based architecture

or

• Target hardware does not use tile-based architecture, but significant screen area is not filled with opaque rendering, such as with a background image.

To set the color of areas outside the Screen node:

1. In the Project select the Screen node.
   
2. In the Properties add the Screen Clear Color property and set the color you want to use for the areas outside of the Screen node.
   When you set the Screen Clear Color property, Kanzi clears the screen outside of the Screen node with the color you set before it renders anything else.
   

Making an application that fills the entire screen

To make a Kanzi application that fills the entire device screen, in the Project select the Screen node, and in the Properties set:

• Screen Resolution property to Custom
• Metrics Type to Relative
• Width and Height to 1

When you need to override the above settings in the root node of your application, such as RootPage:

1. In the Project select the root node.
2. In the Properties add these properties:
   • Layout Width
   • Layout Height
   • Aspect Ratio

Using the Screen node in the API

For details, see the Screen class in the API reference.

See also

Tutorial: Making applications with dynamic layout

Open topic with navigation