XamarinとPrismを利用して簡単なログインページを作ってみました。
以下の動作環境にて確認済み
- Visual Studio 2019 Community
- Android 9.0.99
- .NETStandard.Library 2.0.3
- Prism.Unity.Forms 7.1.0.431
※コピペ利用OKです。
View
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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/パスワードを取得できるようにしなければいけない。
以上です。
スポンサーリンク