Progress

Progress is a common component that is used to show the ongoing status using a long narrow bar.

Following are the instances where Progress is used:

  • To show the processing time
  • To show the number of items in Progress
  • To show the Progress rate depending on the screen layout

Progress

Add namespace

To implement progress, include Tizen.NUI.Components namespace in your application:

using Tizen.NUI;
using Tizen.NUI.Components;

Create with property

To create a Progress using property, follow these steps:

  1. Create Progress using the default constructor:

    utilityBasicProgress = new Progress();
    
  2. Set the Progress property:

    utilityBasicProgress.MaxValue = 100;
    utilityBasicProgress.MinValue = 0;
    utilityBasicProgress.CurrentValue = 45;
    utilityBasicProgress.TrackColor = Color.Green;
    utilityBasicProgress.ProgressColor = Color.Black;
    

Following output is generated when the Progress is created using property:

Progress

Create with style

To create a Progress using style, follow these steps:

  1. Create a style for Progress:

    ProgressStyle style = new ProgressStyle
    {
        Track = new ImageViewStyle
        {
            BackgroundColor = Color.Cyan
        },
        Progress = new ImageViewStyle
        {
            BackgroundColor = Color.Black
        }
    };
    
  2. Use the style to create a Progress and add it to parent:

    utilityBasicProgress = new Progress(style);
    utilityBasicProgress.Size = new Size(140, 4);
    utilityBasicProgress.MaxValue = 100;
    utilityBasicProgress.MinValue = 0;
    utilityBasicProgress.CurrentValue = 45;
    root.Add(utilityBasicProgress);
    

Following output is generated when the Progress is created using style:

Progress

Create with defined styles

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

  1. Define a custom style:

    internal class CustomProgressStyle : StyleBase
    {
        protected override ViewStyle GetViewStyle()
        {
            ProgressStyle style = new ProgressStyle
            {
                Track = new ImageViewStyle
                {
                    BackgroundColor = Color.Cyan
                },
                Progress = new ImageViewStyle
                {
                    BackgroundColor = Color.Black
                }
            };
            return style;
        }
    }
    
  2. Register your custom style:

    StyleManager.Instance.RegisterStyle("CustomProgress", null, typeof(YourNameSpace.CustomProgressStyle));
    
  3. Use your custom style to create a Progress instance:

    utilityBasicProgress = new Progress("CustomProgress");
    utilityBasicProgress.Size = new Size(140, 4);
    utilityBasicProgress.MaxValue = 100;
    utilityBasicProgress.MinValue = 0;
    utilityBasicProgress.CurrentValue = 45;
    root.Add(utilityBasicProgress);
    

Following output is generated when the Progress is created using the defined style:

Progress

  • Dependencies
    • Tizen 5.5 and Higher