Pagination

Pagination is a component for making navigation through multipage windows more user-friendly. It can be used to display the number of available pages and marking the currently viewed one. The following figure illustrates the use of simple pagination with 5 available pages, of which the first one is displayed currently:

Pagination

Pagination can be customized for size and the background color as well as for using images or solid colors for indicators. Navigation within the pages occurs by attaching it to the window key event as described at the end of this section.

Pagination properties

The following table lists the properties specific to the Pagination class:

Table: Pagination properties

You can scroll this table.
Property Type Description
IndicatorSize Size The absolute size of the indicator.
IndicatorSpacing int The space between the indicators measured in pixels.
IndicatorCount int The count of the indicators.
IndicatorImageUrl Selector<string> The background resource of the indicator.
IndicatorColor Color The color of the indicator.
SelectedIndicatorColor Color The color of the selected indicator.
SelectedIndex int The index of the selected indicator.

Tizen.NUI.BaseComponents.View is the indirect base class of pagination, and you can also use its properties as shown in the examples:

Create with property

To create pagination using property, follow these steps:

  1. Create an instance of a Pagination class using the default constructor:

    groovy
    Copy
    <comp:Pagination x:Name="_pagination"/>
  2. Set the pagination properties:

    routeros
    Copy
    <comp:Pagination x:Name="_pagination" Size="500,150" Name="Pagination1" ParentOrigin="Center" PositionUsesPivotPoint="True" PivotPoint="BottomCenter" IndicatorSize="40,40" IndicatorSpacing="60" IndicatorCount="5" "SelectedIndex="1" BackgroundColor="0.4f, 0.56f, 1.0f, 0.7f"/>
    C#
    Copy
    // Path to the images string _imageUrl = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; // Specific properties of the pagination var _indicatorImageUrlStyle = new PaginationStyle() { IndicatorImageUrl = new Selector<string> { Normal = _imageUrl + "circle_unselected.png", Selected = _imageUrl + "circle_selected.png" } }; _pagination.ApplyStyle(_indicatorImageUrlStyle);

    To set the absolute path of the images that are used, the Tizen.Applications.Application.Current.DirectoryInfo.Resource path is used. For more information, see Class Application and Class DirectoryInfo.

    You can also set a solid color for the indicators, instead of using images:

    ini
    Copy
    IndicatorColor="1.0f, 1.0f, 1.0f, 0.5f" SelectedIndicatorColor="Black"

The following output is generated when the pagination is created using the property:

You can scroll this table.
Indicators with images Solid color indicators
Pagination1a Pagination1b

Create with style

To create pagination using style, follow these steps:

  1. Create a style for pagination:

    C#
    Copy
    string _imageUrl = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; PaginationStyle _style = new PaginationStyle() { IndicatorSize = new Size(100, 100), IndicatorSpacing = 30, IndicatorImageUrl = new Selector<string> { Normal = _imageUrl + "shots.jpg", Selected = _imageUrl + "shots.gif" }, Name = "Pagination2", Size = new Size(600, 200), BackgroundColor = new Color(0.0f, 0.0f, 0.0f, 1.0f) };
  2. Use the style to create a new instance of a Pagination class:

    C#
    Copy
    _pagination.ApplyStyle(_indicatorImageUrlStyle); _pagination.IndicatorCount = 3; _pagination.SelectedIndex = 2;

The following output is generated when the pagination is created using style:

Pagination2

Create with custom styles

You can define a style based on the user experience (UX), and then use the style to create pagination.

  1. Define a custom style inside the namespace:

    C#
    Copy
    internal class CustomPaginationStyle : StyleBase { protected override ViewStyle GetViewStyle() { PaginationStyle _style = new PaginationStyle { IndicatorSize = new Size(100, 100), IndicatorSpacing = 50, IndicatorImageUrl = new Selector<string> { Normal = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/gray.png", Selected = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/blue.png" }, Name = "Pagination3", Size = new Size(500, 200), BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 1.0f), }; return _style; } }
  2. Register your custom style within your namespace:

    C#
    Copy
    Tizen.NUI.Components.StyleManager.Instance.RegisterStyle("CustomPagination", null, typeof(<YOUR_NAME_SPACE>.CustomPaginationStyle));
  3. Use your custom style to create a new Pagination instance:

    C#
    Copy
    _pagination.ApplyStyle(_indicatorImageUrlStyle); _pagination.IndicatorCount = 3; _pagination.SelectedIndex = 1;

The following output is generated when the pagination is created using the defined style:

Pagination2

Respond to window key event

A Window KeyEvent is associated with the pagination by a method that handles the Window_KeyEvent as shown in the following code:

C#
Copy
Window window = NUIApplication.GetDefaultWindow(); window.KeyEvent += Window_KeyEvent;

The method supports pressing the Left or Right keys, which switches the pagination indicator in the appropriate direction:

C#
Copy
private void Window_KeyEvent(object sender, Window.KeyEventArgs e) { if (e.Key.State == Key.StateType.Down) { if (e.Key.KeyPressedName == "Left") { if (_pagination.SelectedIndex > 0) { _pagination.SelectedIndex = _pagination.SelectedIndex - 1; // Add some additional actions associated with the Left key } } else if (e.Key.KeyPressedName == "Right") { if (_pagination.SelectedIndex < _pagination.IndicatorCount - 1) { _pagination.SelectedIndex = _pagination.SelectedIndex + 1; // Add some additional actions associated with the Right key } } } }
  • Dependencies
    • Tizen 6.5 and Higher
Menu
Next Picker
Submit your feedback to GitHub