View is the fundamental concept for all the UI components such as
Text, and so on.
View provides Properties, Methods, and Events that are commonly used on every components. To render
View, you must add it on Window as a child.
View are known as transforms.
View supports hierarchical structure. Therefore,
Scale of every
View are affected by their parents.
Position of each
View is defined as the distance between the position of ParentOrigin and PivotPoint of the
ParentOrigin is a property that defines the reference point in the parent
View, whereas the
PivotPoint is a property that defines the anchor point of the child. The default value for both
ParentOrigin is TopLeft. For instance, if the
Position property of the
View is set to (5, 3) coordinates, the
ParentOrigin property is set to Center, and the
PivotPoint property is set to TopLeft, then the TopLeft of the object is located (5, 3) coordinates away from the Center position of its parent’s
In addition, if the
ParentOrigin property is changed to BottomRight, then the position of the TopLeft corner of the
View will be located (5, 3) coordinates from the BottomRight corner.
NUI provides predefined
ParentOrigin as well as
PivotPoint positions as shown in the following figure, and you can also use custom values for setting the position:
Figure: Predefined positions for ParentOrigin and PivotPoint
The following figure shows three cases of parent
View and its child
View. The parent
View is represented by blue color and child
View is represented by red color.
In the following examples, all of the red-colored
View coordinates are identically located at (3, 5) of its parent coordinate system, which is based on the
ParentOrigin property of the child
PivotPoint is set to default TopLeft:
Figure: The final position with different ParentOrigin
Alternatively, you can use an arbitrary
Position type value defined in the unit coordinates to set
ParentOrigin without predefined values.
View is the rotation from its default orientation.
View is the size ratio between the size to be rendered and the default size. For these two transforms,
View is rotated and scaled around
View are also affected by the transforms of its parent. In the final calculation of
Scale of parents are first applied to the child
View with parent’s
PivotPoint, and then
Scale of child are applied.
The following examples demonstrate the rotation and scaling that change
Scale respectively. View A is a child of View B. Therefore, transforms of A only affects A. However, the transforms of parent B influences its child A. The black dot in the figure is
PivotPoint that is used by the transforms.
Figure: Rotation and Scaling.
NUI also provides directional navigation between each
View using arrow keys on the keyboard. You can simply set the following properties to specify the next
FocusableView for each direction:
When an arrow key is pressed and the current
View has next
FocusableView for that direction, the system passes focus to the next
FocusableView. However, if the current
View does not have the next
FocusableView for the direction or the next
ForcusableView is not on the window, the property returns
NULL and no change occurs.
View provides a variety of events that are commonly used by the components. The following table lists the basic events provided by
Table: View events
|Triggered when the key input is received.
|Triggered when the touch input is received.
|Triggered when the hover input is received.
|Triggered when the wheel input is received.
|Triggered when the control gets the key input focus.
|Triggered when the control loses key input focus.
|Triggered after the size has been set on View during relayout.
|Triggered when the layout direction property of View or its parent View is changed.
|Triggered after View has been connected to the window.
|Triggered after View has been disconnected from the window.
|Triggered when the visible property of View or parent View is changed.
|Triggered after all the resources required by View are loaded and ready.
You can create custom
callback methods with event handler for each
Event such as
TouchEvent is first received on the current focused
View to be handled. However, if the focused
View is not having a proper event handler, then the
Event is delivered to its parent
View iteratively until it can be consumed.
The following code explains how to handle
Event with a simple example of
TouchEvent. If you touch the blue
View then the background color is changed:
View touchedView = new View();
touchedView.BackgroundColor = Color.Blue;
// Attach callback method
touchedView.TouchEvent += ViewTouchEventCallBack;
// Custom callback method
private bool ViewTouchEventCallBack(object sender, View.TouchEventArgs e)
View touchedView = sender as View;
if (e.Touch.GetState(0) == PointStateType.Down)
touchedView.BackgroundColor = Color.Red;
Figure: TouchEvent example
- Tizen 4.0 and Higher