微信公眾號：Dotnet9，網站：Dotnet9，問題或建議，請網站留言；
如果您覺得Dotnet9對您有幫助，歡迎贊賞，

Xamarin.Forms登錄系統

內容目錄

1. 實作效果
2. 業務場景
3. 編碼實作
4. 本文參考
5. 原始碼下載

1.實作效果

彈出登錄視窗，輸入驗證

2.業務場景

1. 主視窗彈出登錄或者其他小視窗
2. 表單驗證

3.編碼實作

3.1 添加Nuget庫

創建名為 “LoginSystem” 的Xamarin.Forms專案，添加2個Nuget庫

1. Rg.Plugins.Popup 1.2.0.223：彈出框由該插件提供
2. FluentValidation 8.6.1：表單驗證使用

3.2 工程結構

3.3 共享庫中的MainPage

彈出登錄視窗，MainPage.xaml中關鍵代碼

<StackLayout VerticalOptions="Center">
    <Button Text="登錄" BackgroundColor="#2196F3" Clicked="Login_Click"/>
</StackLayout>

后臺彈出登錄視窗 MainPage.xaml.cs

private async void Login_Click(object sender, EventArgs e)
{
    await PopupNavigation.Instance.PushAsync(new LoginPage());
}

3.4 Models中類檔案

3.4.1 LoginUser.cs

namespace LoginSystem.Models
{
    class LoginUser
    {
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

3.4.2 LoginUserValidator.cs

使用FluentValidation進行物體規則驗證

using FluentValidation;

namespace LoginSystem.Models
{
    class LoginUserValidator : AbstractValidator<LoginUser>
    {
        public LoginUserValidator()
        {
            RuleFor(x => x.UserName).NotEmpty().WithMessage("請輸入賬號")
                .Length(5, 20).WithMessage("賬號長度在5到20個字符之間");
            RuleFor(x => x.Password).NotEmpty().WithMessage("請輸入密碼");
        }
    }
}

3.4.3 NotifyPropertyChanged.cs

封裝INotifyPropertyChanged介面

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace LoginSystem.Models
{
    public class NotifyPropertyChanged : INotifyPropertyChanged
    {
        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName]string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

3.5 ViewModel中類檔案

3.5.1 LoginViewModel.cs

登錄視圖的ViewModel，FluentValidation的具體呼叫

using FluentValidation;
using LoginSystem.Models;
using System;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace LoginSystem.ViewModel
{
    class LoginViewModel : NotifyPropertyChanged
    {
        public INavigation Navigation { get; set; }

        public LoginUser LoginUserIns { get; set; }

        string userName = string.Empty;
        public string UserName
        {
            get { return userName; }
            set { SetProperty(ref userName, value); }
        }

        string password = string.Empty;
        public string Password
        {
            get { return password; }
            set { SetProperty(ref password, value); }
        }

        private readonly IValidator _validator;
        public LoginViewModel()
        {
            _validator = new LoginUserValidator();
        }
        private ICommand loginCommand;
        public ICommand LoginCommand
        {
            get
            {
                return loginCommand ?? (loginCommand = new Command(ExecuteLoginCommand));
            }
        }
        private string validateMsg;
        public string ValidateMsg
        {
            get
            {
                return validateMsg;
            }
            set
            {
                SetProperty(ref validateMsg, value);
            }
        }
        private async void ExecuteLoginCommand(object obj)
        {
            try
            {
                if (LoginUserIns == null)
                {
                    LoginUserIns = new LoginUser();
                }
                LoginUserIns.UserName = userName;
                LoginUserIns.Password = password;
                var validationResult = _validator.Validate(LoginUserIns);
                if (validationResult.IsValid)
                {
                    //TODO 作服務端登錄驗證
                    ValidateMsg = "登錄成功!";
                }
                else
                {
                    if (validationResult.Errors.Count > 0)
                    {
                        ValidateMsg = validationResult.Errors[0].ErrorMessage;
                    }
                    else
                    {
                        ValidateMsg = "登錄失敗!";
                    }
                }
            }
            catch (Exception ex)
            {
                ValidateMsg = ex.Message;
            }
            finally
            {

            }
            await Task.FromResult("");
        }
    }
}

3.6 Views中的視圖檔案

3.6.1 LoginPage

登錄視窗LoginPage.xaml，引入彈出插件Rg.Plugins.Popup，設定彈出框影片，系結FluentValidation驗證提示資訊 “ValidateMsg”

<?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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 mc:Ignorable="d"
             x:Class="LoginSystem.Views.LoginPage">
    <pages:PopupPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#2196F3</Color>
        </ResourceDictionary>
    </pages:PopupPage.Resources>

    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="400"
                                   DurationOut="300"
                                   EasingIn="SinOut"
                                   EasingOut="SinIn"
                                   HasBackgroundAnimation="True"
                                   PositionIn="Center"
                                   PositionOut="Center"
                                   ScaleIn="1.2"
                                   ScaleOut="0.8" />
    </pages:PopupPage.Animation>

    <Grid VerticalOptions="Center" Margin="40,20" HeightRequest="400">
        <Frame CornerRadius="20" BackgroundColor="White">
            <StackLayout Spacing="20" Padding="15">
                <Image Source="person.png" HeightRequest="50" VerticalOptions="End"/>
                <Entry x:Name="entryUserName" Text="{Binding UserName}" Placeholder="賬號"
                       PlaceholderColor="#bababa" FontSize="16"/>
                <Entry IsPassword="True" Text="{Binding Password}" Placeholder="密碼" 
                       PlaceholderColor="#bababa" FontSize="16"/>
                <Button Margin="0,10,0,0" Text="登錄" BackgroundColor="{StaticResource Primary}" 
                        TextColor="White" HeightRequest="50" VerticalOptions="Start"
                        Command="{Binding LoginCommand}"/>
                <Label Text="{Binding ValidateMsg}" TextColor="Red" HorizontalOptions="Center"/>
                <Label Text="沒有賬號？請聯系管理員，" HorizontalOptions="Center" FontSize="12"/>
            </StackLayout>
        </Frame>
    </Grid>
</pages:PopupPage>

后臺LoginPage.xaml.cs系結ViewModel LoginViewModel，需要設定Navigation到LoginViewModel的屬性Navigation，用于ViewModel中驗證成功時回傳主視窗使用

using LoginSystem.ViewModel;
using Rg.Plugins.Popup.Pages;
using Xamarin.Forms.Xaml;

namespace LoginSystem.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LoginPage : PopupPage
    {
        LoginViewModel ViewModel = null;
        public LoginPage()
        {
            if (ViewModel == null)
            {
                ViewModel = new LoginViewModel();
            }
            this.BindingContext = ViewModel;
            ViewModel.Navigation = Navigation;
            InitializeComponent();
        }
    }
}

3.7 Android專案中的MainActivity.cs

注冊彈出插件

3.8 iOS專案中的AppDelegate.cs

注冊彈出插件

4.本文參考

Houssem Dellai 大神的學習視頻：Popup in Xamarin Forms

Fluent Validation With MVVM In Xamarin Forms Application

5.代碼下載

文中代碼已經全部提供

除非注明，文章均由 Dotnet9 整理發布，歡迎轉載，

轉載請注明本文地址：https://dotnet9.com/6841.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章

標籤：WPF

上一篇：WPF DataGrid標題Header Binding失效

下一篇：C# WPF 時鐘影片(1/2)