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 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
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:
-
Create an instance of a
Pagination
class using the default constructor:groovyCopy<comp:Pagination x:Name="_pagination"/>
-
Set the pagination properties:
routerosCopy<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:
iniCopyIndicatorColor="1.0f, 1.0f, 1.0f, 0.5f" SelectedIndicatorColor="Black"
The following output is generated when the pagination is created using the property:
Indicators with images | Solid color indicators |
---|---|
Create with style
To create pagination using style, follow these steps:
-
Create a style for pagination:
C#Copystring _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) };
-
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:
Create with custom styles
You can define a style based on the user experience (UX), and then use the style to create pagination.
-
Define a custom style inside the namespace:
C#Copyinternal 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; } }
-
Register your custom style within your namespace:
C#CopyTizen.NUI.Components.StyleManager.Instance.RegisterStyle("CustomPagination", null, typeof(<YOUR_NAME_SPACE>.CustomPaginationStyle));
-
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:
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#CopyWindow 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
}
}
}
}
Related information
- Dependencies
- Tizen 6.5 and Higher