XamarinとPrismを利用して簡単なログインページを作ってみました。

以下の動作環境にて確認済み
  • Visual Studio 2019 Community
  • Android 9.0.99
  • .NETStandard.Library 2.0.3
  • Prism.Unity.Forms 7.1.0.431

※コピペ利用OKです。

View

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="Sample.Views.LoginPage"
             Title="{Binding Title}">

    <StackLayout Orientation="Vertical"
                 VerticalOptions="Center"
                 HorizontalOptions="Center">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0"
                   Grid.Column="0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"
                   Text="ユーザID"/>

            <Entry Grid.Row="0"
                   Grid.Column="1"
                   VerticalOptions="Center"
                   HorizontalOptions="Start"
                   Placeholder="ユーザID"/>

            <Label Grid.Row="1"
                   Grid.Column="0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"
                   Text="パスワード"/>

            <Entry Grid.Row="1"
                   Grid.Column="1"
                   VerticalOptions="Center"
                   HorizontalOptions="Start"
                   Placeholder="パスワード"
                   IsPassword="True"/>
        </Grid>

        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">

            <Button Text="新規登録"
                    Command="{Binding RegisterButtonClicked}"/>

            <Button Text="ログイン"
                    Command="{Binding LoginButtonClicked}"/>

        </StackLayout>

    </StackLayout>
  
</ContentPage>

ViewModel

using Prism.Commands;
using Prism.Navigation;

namespace Sample.ViewModels
{
    public class LoginPageViewModel : ViewModelBase
    {

        public DelegateCommand RegisterButtonClicked { get; set; }
        public DelegateCommand LoginButtonClicked { get; set; }

        public LoginPageViewModel(INavigationService navigationService) : base(navigationService)
        {
            Title = "ログインページ";

            RegisterButtonClicked = new DelegateCommand(() => Register());
            LoginButtonClicked = new DelegateCommand(() => Login());
        }

        private void Register()
        {
            // 登録ボタン押下時の処理
        }

        private void Login()
        {
            // ログインボタン押下時の処理
        }
    }
}

見え方

その他

補足・改善点など
  • 重複しているスタイルが存在するため、別ファイルにて共通管理してしまうのが望ましい。
  • 味気なさすぎるのでもう少しデザインを入れたい。
  • Commandの名称はもう少し短くした方が見やすいか？
  • 活性/非活性を切り替えられるようにしたい。
  • 入力されたユーザID/パスワードを取得できるようにしなければいけない。

以上です。

スポンサーリンク