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.
   
   
   

2. Getting started with a Simple Example
   Open Visual Studio and make a cross-platform Xamarin.Forms app.
   
            
   

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

 

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.

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

Simply click Okay and more forward.

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

4. Select shared project and open MainPage.xaml
   
   
   

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

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

View > Other Windows > Xamarin.Forms Previewer

  

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.

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.

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

Following is the main page code for UI.

Remove this code and add following code which contain a,

1. Progress Bar
2. Button
3. Label

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Label x:Name="lbl_Header" Text="Progress Bar - Xamarin Forms" Grid.Row="1" HorizontalOptions="Center"></Label>
    <ProgressBar x:Name="pb_ProgressBar" Progress="0.6" Grid.Row="2"> </ProgressBar>
    <Button x:Name="btn_StartLongTask" Grid.Row="3" Margin="50,30" Text="Start Long Task" Clicked="btn_StartLongTask_Clicked"></Button>
</Grid>

5. After this UI will look like this.
   
   
   

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

Over here

  

Add the following interaction logic in this function

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

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

     

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.

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.