-
-
Save ChaseFlorell/32e1f5c1187d2a7e4835 to your computer and use it in GitHub Desktop.
Xamarin.Forms ActivityIndicator example - http://forums.xamarin.com/discussion/22309/how-to-show-a-loading-message-in-xamarin-forms-for-all-platforms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System.ComponentModel; | |
using System.Runtime.CompilerServices; | |
using System.Threading.Tasks; | |
using Xamarin.Forms; | |
namespace ActivityIndicatorCase | |
{ | |
public class App | |
{ | |
// the static method used as the entry point into your apps | |
public static Page GetMainPage() | |
{ | |
// return your actual root page | |
// usually this is the point that you wrap it in a NavigationPage | |
// but for this example, we're not doing that. | |
return new ActivityPage(); | |
} | |
} | |
public class ActivityPage : ContentPage | |
{ | |
// this isn't important to the example | |
private int _clickCount; | |
// constructor of the page | |
public ActivityPage() | |
{ | |
// setup your ViewModel | |
ViewModel = new ActivityPageViewModel | |
{ | |
ButtonText = "Click Me!" | |
}; | |
// Set the binding context to the newly created ViewModel | |
BindingContext = ViewModel; | |
// the button is what we're going to use to trigger a long running Async task | |
// we're also going to bind the button text so that we can see the binding in action | |
var actionButton = new Button(); | |
actionButton.SetBinding(Button.TextProperty, "ButtonText"); | |
actionButton.Clicked += async (sender, args) => await SomeLongRunningTaskAsync(); | |
// here's your activity indicator, it's bound to the IsBusy property of the BaseViewModel | |
// those bindings are on both the visibility property as well as the IsRunning property | |
var activityIndicator = new ActivityIndicator | |
{ | |
Color = Color.Black, | |
}; | |
activityIndicator.SetBinding(ActivityIndicator.IsVisibleProperty, "IsBusy"); | |
activityIndicator.SetBinding(ActivityIndicator.IsRunningProperty, "IsBusy"); | |
// return the layout that includes all the above elements | |
Content = new StackLayout | |
{ | |
HorizontalOptions = LayoutOptions.FillAndExpand, | |
VerticalOptions = LayoutOptions.FillAndExpand, | |
BackgroundColor = Color.White, | |
Children = {actionButton, activityIndicator} | |
}; | |
} | |
// you need a view model to bind to | |
private ActivityPageViewModel ViewModel { get; set; } | |
private async Task SomeLongRunningTaskAsync() | |
{ | |
// here's your long running task. | |
// set to busy at the start | |
ViewModel.IsBusy = true; | |
// run your task... and MAKE SURE it's a Task, and NOT on the UI Thread | |
await Task.Delay(2500) | |
.ContinueWith(task => { _clickCount ++; }); | |
// finish updating if necessary | |
ViewModel.ButtonText = string.Format("I've been clicked {0} times!", _clickCount); | |
// make sure you switch the busy indicator back. | |
ViewModel.IsBusy = false; | |
} | |
} | |
// all your view models can inherit from the BaseViewModel | |
public class ActivityPageViewModel : BaseViewModel | |
{ | |
private string _buttonText; | |
public string ButtonText | |
{ | |
get { return _buttonText; } | |
set | |
{ | |
_buttonText = value; | |
// This is very important. It indicates to the app that you've changed the content of this property | |
OnPropertyChanged(); | |
} | |
} | |
} | |
// Your BaseViewModel MUST inherit from INotifyProprtyChanged.. it's what makes everything work | |
public class BaseViewModel : INotifyPropertyChanged | |
{ | |
// here's your shared IsBusy property | |
private bool _isBusy; | |
public bool IsBusy | |
{ | |
get { return _isBusy; } | |
set | |
{ | |
_isBusy = value; | |
// again, this is very important | |
OnPropertyChanged(); | |
} | |
} | |
// this little bit is how we trigger the PropertyChanged notifier. | |
public event PropertyChangedEventHandler PropertyChanged; | |
public virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) | |
{ | |
var handler = PropertyChanged; | |
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); | |
} | |
} | |
} |
Hi there,
When the activity indicator is on how to disable other controls no the page from interaction?Thanks.
Just create a new attribute, ex: "IsEnabled", to work how "IsBusy". And put it in the pages.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi there,
When the activity indicator is on how to disable other controls no the page from interaction?
Thanks.