【Xamarin】ログインページのサンプルコード

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>

<?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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

</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()
        {
            // ログインボタン押下時の処理
        }
    }
}

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/パスワードを取得できるようにしなければいけない。

以上です。

View

ViewModel

見え方

その他

関連記事

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル