A progress bar visually represents the progress of any operation,such as downloads,installation or file transfer.A progress bar may be a horizontal or a circular bar that shows the percent value.So here we are going to create a progress bar inside a popup page in xamarin forms application.
Here I already added a popup page using Rg.Plugin.Popup.If you don't know how to create a popup page,then follow this link Modal Popup in Xamarin Forms.
Here is the code for implementing progress bar:
<?xml version="1.0" encoding="utf-8" ?> <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup" xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup" x:Class="ProgressBarSample.ProgressBarPopup"> <pages:PopupPage.Animation> <animations:ScaleAnimation PositionIn="Center" PositionOut="Center" ScaleIn="1.2" ScaleOut="0.8" DurationIn="400" DurationOut="300" EasingIn="SinOut" EasingOut="SinIn" HasBackgroundAnimation="True"/> </pages:PopupPage.Animation> <Frame VerticalOptions="CenterAndExpand" HorizontalOptions="Center" CornerRadius="10" Margin="20" Padding="20" HeightRequest="150"> <StackLayout Margin="20" VerticalOptions="CenterAndExpand"> <Label Text="Progress Bar" FontSize="Large" FontAttributes="Bold"/> <ProgressBar ProgressColor="Green" HeightRequest="20" WidthRequest="400" x:Name="progressbar"/> <Label Text="" HorizontalOptions="EndAndExpand" x:Name="progressLabel" FontAttributes="Bold" FontSize="Medium"/> </StackLayout> </Frame> </pages:PopupPage>
Here I am using a simple logic for increase the progress bar progress,but in reality we should have to implement our own business logic for changing the progress bar progress. Here I am using ProgressColor to show the color of progress.
- Progress takes float value.The min value is 0 and max value is 1.Zero means progress bar not started and One means progress bar progress completed.
- We can also animate our progress by using Animation.In this example we are using Easing.Linear animation.
Here is the sample logic for showing progress.
public partial class ProgressBarPopup : PopupPage { float maxValue = 1; float progressmax = 10; bool istimerRunning = true; float progress = 0; int counter = 1; public ProgressBarPopup() { InitializeComponent(); Device.StartTimer(TimeSpan.FromSeconds(2), () => { if (progress >= 1) { istimerRunning = false; Navigation.PopPopupAsync(); } else { progress += maxValue / progressmax; progressbar.ProgressTo(progress, 500, Easing.Linear); progressLabel.Text = $"{counter}/{progressmax}"; counter += 1; } return istimerRunning; }); } }
To get the source code : Progress Bar Example
You also can watch the video for more details : Progress Bar in Xamarin Forms
You also can watch the video for more details : Progress Bar in Xamarin Forms
Progress Bar in Xamarin Forms
Reviewed by SP Tutorials
on
November 26, 2019
Rating:

Very informative article, which you have shared here about progress bar. After reading your article I got very much information and it is very useful for us. I am thankful to you for sharing this article here. mobile app developers denver
ReplyDeleteIt's a nice article, Which you have shared here about progress bar. Your article is very interesting and I really liked the way you expressed your views in this post. Thank you. Oracle fusion instance access
ReplyDeleteHow can use like progress bar like rating bar like review
ReplyDelete