ログイン画面のXAML実装

Avaloniaにおけるログイン画面の実装例を示します。画像とアイコンフォントを使用するため、リソースへの追加とApp.axamlの設定が必要です。

<Window xmlns="https://github.com/avaloniaui" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" 
        x:Class="LoginApp.Views.LoginView"
        xmlns:vm="using:LoginApp.ViewModels"
        x:DataType="vm:LoginViewModel"
        Title="ユーザー認証" 
        Width="800" 
        Height="500" 
        WindowStartupLocation="CenterScreen" 
        Icon="/Assets/app-icon.ico">

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

        <!-- 認証フォーム -->
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" 
                       Text="システムログイン"
                       FontSize="28"
                       HorizontalAlignment="Center"
                       Margin="0,40"/>

            <Image Grid.Row="1" 
                   Source="/Assets/LoginIcon.png"
                   Width="80"
                   HorizontalAlignment="Center"
                   Margin="0,20"/>

            <StackPanel Grid.Row="2" Margin="20,30">
                <TextBox Name="UsernameInput" 
                         Watermark="ユーザー名"
                         Text="{Binding Username}"
                         Height="40"
                         FontSize="18"/>
                <TextBox Name="PasswordInput" 
                         Watermark="パスワード"
                         PasswordChar="*"
                         Text="{Binding Password}"
                         Margin="0,15,0,0"
                         Height="40"
                         FontSize="18"/>
            </StackPanel>

            <StackPanel Grid.Row="3">
                <CheckBox Content="認証情報を保存"
                          Margin="20,10"/>
                <Button Content="ログイン実行"
                         Command="{Binding LoginCommand}"
                         Background="#0066CC"
                         Foreground="White"
                         FontSize="20"
                         Height="45"
                         CornerRadius="5"
                         Margin="40,20"/>
            </StackPanel>
        </Grid>

        <!-- サイドバナー -->
        <Border Grid.Column="1" 
                BorderThickness="1,0,0,0" 
                BorderBrush="#0099FF">
            <Image Source="/Assets/LoginBanner.png"/>
        </Border>
    </Grid>
</Window>

ビューモデルの実装

using Avalonia.Controls;
using System.Collections.ObjectModel;

namespace LoginApp.ViewModels
{
    public class LoginViewModel : ViewModelBase
    {
        public string Username { get; set; }
        public string Password { get; set; }
        
        public ObservableCollection<UserAccount> Accounts { get; }

        private readonly Window _currentWindow;
        
        public LoginViewModel(Window window)
        {
            Accounts = new ObservableCollection<UserAccount>
            {
                new UserAccount { Id = 1001, Name = "user1", Passcode = "pass1" },
                new UserAccount { Id = 1002, Name = "user2", Passcode = "pass2" }
            };
            
            Username = Accounts[0].Name;
            Password = Accounts[0].Passcode;
            
            LoginCommand = new RelayCommand(ExecuteLogin);
            _currentWindow = window;
        }

        public ICommand LoginCommand { get; }

        private void ExecuteLogin(object parameter)
        {
            // 認証処理
            var mainWindow = new MainWindow();
            mainWindow.Show();
            _currentWindow.Close();
        }
    }
}

ユーザーエンティティクラス

namespace LoginApp.Models
{
    public class UserAccount
    {
        public long Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Passcode { get; set; } = string.Empty;
    }
}

コマンド実装

using System;
using System.Windows.Input;

namespace LoginApp.Core
{
    public class RelayCommand : ICommand
    {
        private readonly Action<object> _executeAction;
        
        public event EventHandler CanExecuteChanged;

        public RelayCommand(Action<object> execute)
        {
            _executeAction = execute;
        }

        public bool CanExecute(object parameter) => true;

        public void Execute(object parameter)
        {
            _executeAction?.Invoke(parameter);
        }
    }
}