Xamarin. Forms + Prism (3) -- a simple reminder for UI use, xamarin. formsprism

Xamarin. Forms + Prism (3) -- a simple reminder for UI use, xamarin. formsprism

This time we will introduce two useful tip plug-ins, such as success, waiting, and error messages.

 

Preparation:

1. Create a Prism Xamarin. Forms project;

2. Right-click the solution and add the NuGet package:

1) Acr. UserDialogs (all installed );

2) AndHUD (Android project installation) and BTProgressHUD (iOS project installation );

 

Design:

1. First, we will introduce the first Acr. userDialogs, this prompt plug-in is actually based on AndHUD and BTProgressHUD, that is, Acr. userDialogs encapsulates and calls the two controls by implementing DependencyService. It is easy to use and can be called at any location in the PCL,Register in MainActivity of the Android project before use (not required for iOS)If the reference in MainActivity is unsuccessful or cannot be intelligently indicated, re-open,

After registration, we can use it.

Write code:

1) Add a test button in MainPage and bind it to the TestCommand operation.

<StackLayout HorizontalOptions = "Center" VerticalOptions = "Center"> <Button Text = "test" x: name = "testBtn" Command = "{Binding TestCommand}"> </Button> </StackLayout>

2) In MainPageViewModel, add a TestCommand attribute, which calls several common prompts. Others can try it.

Private DelegateCommand _ testCommand; public DelegateCommand TestCommand {get {if (_ testCommand = null) {_ testCommand = new DelegateCommand (async () => {UserDialogs. instance. showLoading ("Please wait"); await Task. delay( 2000); UserDialogs. instance. hideLoading (); UserDialogs. instance. showSuccess ("successful"); await Task. delay( 2000); UserDialogs. instance. toast ("hello") ;});} return _ testCommand ;}}

View Code

 

2. Second, because AndHUD only supports Android, and BTProgressHUD supports iOS (due to BTProgressHUD and Acr. userDialogs uses the BigTed namespace at the same time, which may conflict with each other. userDialogs uninstall) Therefore, you must use DependencyService to register the control before using it:

1) Create an IHUDProvider interface under PCL. The Code is as follows:

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace AlertDemo{    public interface IHUDProvider    {        void ShowToast(string message=null);        void ShowSuccess(string message = null);        void ShowLoading(string message = null);        void Dismiss();        }}

View Code

2) create a HUDProvider class under the Android directory to implement the IHUDProvider interface. The Code is as follows:

using System;using System.Collections.Generic;using System.Linq;using System.Text;using Android.App;using Android.Content;using Android.OS;using Android.Runtime;using Android.Views;using Android.Widget;using Xamarin.Forms;[assembly: Dependency(typeof(AlertDemo.Droid.HUDProvider))]namespace AlertDemo.Droid{    public class HUDProvider : IHUDProvider    {        public void Dismiss()        {            AndroidHUD.AndHUD.Shared.Dismiss(Forms.Context);        }        public void ShowLoading(string message = null)        {            AndroidHUD.AndHUD.Shared.Show(Forms.Context, message);        }        public void ShowSuccess(string message = null)        {            AndroidHUD.AndHUD.Shared.ShowSuccess(Forms.Context, message, AndroidHUD.MaskType.Black, TimeSpan.FromSeconds(1));        }        public void ShowToast(string message = null)        {            AndroidHUD.AndHUD.Shared.ShowToast(Forms.Context,message,AndroidHUD.MaskType.Black,new TimeSpan(0,0,2));        }    }}

View Code

3) create a HUDProvider class under the iOS project to implement the IHUDProvider interface. The Code is as follows:

using System;using System.Collections.Generic;using System.Text;using Xamarin.Forms;[assembly: Dependency(typeof(AlertDemo.iOS.HUDProvider))]namespace AlertDemo.iOS{    public class HUDProvider : IHUDProvider    {        public void Dismiss()        {            BigTed.BTProgressHUD.Dismiss();        }        public void ShowLoading(string message = null)        {            BigTed.BTProgressHUD.Show(message);        }        public void ShowSuccess(string message = null)        {            BigTed.BTProgressHUD.ShowSuccessWithStatus(message);        }        public void ShowToast(string message = null)        {            BigTed.BTProgressHUD.ShowToast(message,BigTed.ProgressHUD.ToastPosition.Center);        }    }}

View Code

4) return to MainPage, add a new test button, and bind the TestCommand2 command.

<StackLayout HorizontalOptions = "Center" VerticalOptions = "Center"> <Button Text = "test" x: name = "testBtn" Command = "{Binding TestCommand}"> </Button> <Button Text = "Test 2" x: name = "testBtn2" Command = "{Binding TestCommand2}"> </Button> </StackLayout>

5) Add the TestCommand2 command under MainPageViewModel.

Private DelegateCommand _ testCommand2; public DelegateCommand TestCommand2 {get {if (_ testCommand2 = null) {_ testCommand2 = new DelegateCommand (async () => {var service = DependencyService. get <IHUDProvider> (); service. showLoading ("Please wait"); await Task. delay( 2000); service. dismiss (); service. showSuccess ("successful"); await Task. delay( 2000); service. showToast ("hello") ;});} return _ testCommand2 ;}}

View Code

6) Generate and run the android AVD Simulator

 

 

As we can see, except for style differences, the basic prompts are consistent. Therefore, in actual development projects, we may recommend Acr. userDialogs control, but we can also try to use DependencyService. get <> to implement custom controls for Android and iOS