View

View is the fundamental concept for all the UI components such as Button, Image, 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.

Transforms

Position, Orientation, and Scale of View are known as transforms. View supports hierarchical structure. Therefore, Position, Orientation, and Scale of every View are affected by their parents.

Position of each View is defined as the distance between the position of ParentOrigin and TopLeft position of View. ParentOrigin is a property that defines the reference point in the parent View. For example, if a View object has properties Position (5, 3) and ParentOrigin is Center, then the TopLeft of the object is located (5, 3) away from Center position of its parent View object.

In addition, if the property ParentOrigin is changed to BottomRight, then the position of View is moved to (5, 3) from the BottomRight position of its parent. NUI provides predefined ParentOrigin as shown in the following figure:

Figure: The position of predefined ParentOrigin

The following figure shows three cases of parent View and its child View. Parent View is blue and child View is red. In the following examples, all of the red View is identically located at (3, 5) of its parent coordinate system that is based on ParentOrigin property of the child View.

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.

Orientation of View is the rotation from its default orientation. Scale of 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 PivotPoint. NUI also provides predefined presets of PivotPoint identical to ParentOrigin. Alternatively, you can use custom values.

Orientation and Scale of View are also affected by the transforms of its parent. In the final calculation of View, Orientation and Scale of parents are first applied to the child View with parent’s PivotPoint, and then Orientation and Scale of child are applied.

The following examples demonstrate the rotation and scaling that change Orientation and 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.

Directional Navigation

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:

• View.UpFocusableView

• View.DownFocusableView

• View.LeftFocusableView

• View.RightFocusableView

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 Event

View provides a variety of events that are commonly used by the components. The following table lists the basic events provided by View:

Table: View events

You can create custom callback methods with event handler for each Event.

Input Event such as KeyEvent and 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;
    }
    return true;
}

Figure: TouchEvent example

Related Information

• Dependencies
  • Tizen 4.0 and Higher