XAML Progress Bar In Xamarin.Forms

Long-running tasks in any application make the application or software non-responsive. So to keep the user updated about the running task and also keep the application responsive during the long-running tasks, we can use different kinds of loading bar options like:

  • Progress Bar
  • Ring Bar Etc.

Let's discuss XAML Progress Bar in Xamarin.Forms Apps.

  1. What is Progress Bar?
    XAML progress bar represents a control that indicates that an operation is ongoing. It looks like this.

    Progress Bar in Xamarin
  1. Getting started with a Simple Example
    Open Visual Studio and make a cross-platform Xamarin.Forms app.

              Progress Bar in Xamarin

Once you click OK, you’ll see another window for further details.

 Progress Bar in Xamarin

Your application is loading now. Between this is also a progress bar but this WPF progress bar Xamarin Form Progress Bar is a little bit different.

Progress Bar in Xamarin

After loading project you’ll be asked another option like here

Progress Bar in Xamarin

Simply click Okay and more forward.

  1. Now we have 3 Projects in solution Explorer, We’ll be working on Android that’s why I’ve selected Android as startup project.

    Progress Bar in Xamarin
  1. Select shared project and open MainPage.xaml

    Progress Bar in Xamarin

It will look like this, this is the shared UI from all the cross platforms. There is no previewer present here,

Progress Bar in Xamarin

You can add Xamarin Forms Previewer for this XAML to view it from here.

View > Other Windows > Xamarin.Forms Previewer

  Progress Bar in Xamarin

Once you select this previewer you’ll see a mobile preview for your app, in very start you might not get any preview , it’s because you have not build your project yet.

Progress Bar in Xamarin

Build your project and see the output preview for your mobile app.

To build the project Press Ctrl + Shift + B. after building project it will start rendering hour XAML UI.

Progress Bar in Xamarin

Here you go (be patient, it will take some time)

Progress Bar in Xamarin

Following is the main page code for UI.

Progress Bar in Xamarin

Remove this code and add following code which contain a,

  1. Progress Bar
  2. Button
  3. Label

  1. <Grid>  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition></RowDefinition>  
  4.         <RowDefinition></RowDefinition>  
  5.         <RowDefinition></RowDefinition>  
  6.         <RowDefinition></RowDefinition>  
  7.         <RowDefinition></RowDefinition>  
  8.     </Grid.RowDefinitions>  
  9.     <Label x:Name="lbl_Header" Text="Progress Bar - Xamarin Forms" Grid.Row="1" HorizontalOptions="Center"></Label>  
  10.     <ProgressBar x:Name="pb_ProgressBar" Progress="0.6" Grid.Row="2"> </ProgressBar>  
  11.     <Button x:Name="btn_StartLongTask" Grid.Row="3" Margin="50,30" Text="Start Long Task" Clicked="btn_StartLongTask_Clicked"></Button>   
  12. </Grid>  
  1. After this UI will look like this.

    Progress Bar in Xamarin

Now we’ve to add the business logic for progress bar in code behind file on button click event.

Over here

   Progress Bar in Xamarin

Add the following interaction logic in this function

  1. pb_ProgressBar.Progress = 0;  
  2. Task.Run(() => {  
  3.     for (int i = 0; i < 1000; i++) {  
  4.         Thread.Sleep(5);  
  5.         pb_ProgressBar.Progress = Convert.ToDouble("00." + i.ToString());  
  6.     }  
  7. });  

Press Ctrl + . on thread and add necessary namespace for this .

      Progress Bar in Xamarin

You need to use following namespaces to work with Tasks.

using System.Threading.Tasks; 

Build the project and run it. Once you click the button, Progress will appear for 5 seconds.

This is useful when you know the total time a task will take to complete but what if you are not sure about the time left for the task to complete. In that case, we’ll start our task on a different thread and start the progress ring immediately after that and once the task gets done we’ll stop the progress bar as well. I’m going to write about this in my upcoming article. Stay tuned.

Progress Bar in Xamarin

This is fine. But 1 major problem is left. Are we sure the task will take a specific time? If the time for the lengthy task is defined, then it’s ok to work like that. But what if this is not the case?

So for that, we need to run a separate task on button click in the background thread. We'll again use TPL (Task parallel library) for this.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now