[.NET MAUI] LoginPage 만들기

LoginPage 는 FlyoutItem 에 포함시킬것이 아니기 때문에 FlyoutItem 밖에 선언해준다.

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Maui.LoginPage.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Maui.LoginPage.Views"
    Shell.FlyoutBehavior="Disabled">

    <Shell.Resources>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.NavBarHasShadow" Value="False"/>
            <Setter Property="Shell.BackgroundColor" Value="#285083" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="Gray" />
            <Setter Property="Shell.NavBarIsVisible" Value="True" />
            <Setter Property="Shell.TabBarIsVisible" Value="True" />

            <Setter Property="Shell.TabBarBackgroundColor" Value="#376199" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White" />
            <Setter Property="Shell.TabBarTitleColor" Value="White" />
            <Setter Property="Shell.TabBarDisabledColor" Value="Black" />
            <Setter Property="Shell.TabBarUnselectedColor" Value="Gray" />
        </Style>
        
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
        <Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
    </Shell.Resources>

    <ShellContent
        Title="Login"        
        ContentTemplate="{DataTemplate local:LoginPage}"
        Route="LoginPage" />

    <FlyoutItem 
        Title="App" 
        Route="App" 
        FlyoutDisplayOptions="AsMultipleItems">
        
        <ShellContent
            Title="Main"
            Icon="dotnet_bot.png"
            Style="{StaticResource BaseStyle}"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
        
        <ShellContent
            Title="About"
            Icon="kei.png"
            Style="{StaticResource BaseStyle}"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Route="AboutPage" />

    </FlyoutItem>
</Shell>

LoginPage 화면 구성

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Maui.LoginPage.Views.LoginPage" 
             BackgroundColor="#376199">
    
    <Shell.TabBarIsVisible>false</Shell.TabBarIsVisible>
    <Shell.NavBarIsVisible>false</Shell.NavBarIsVisible>
    
    <StackLayout BackgroundColor="#285083">

        <Frame BackgroundColor="Transparent" BorderColor="Transparent" Margin="40">
            <StackLayout>
                <Label LineBreakMode="WordWrap" HorizontalOptions="Center">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="L" TextColor="White" FontAttributes="Bold"  FontSize="50"/>
                            <Span Text="ogin" FontSize="25" TextColor="LightGray"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label LineBreakMode="WordWrap" HorizontalOptions="Center">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Pag" FontSize="25" TextColor="LightGray"/>
                            <Span Text="E" TextColor="White" FontAttributes="Bold"  FontSize="50"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </StackLayout>
        </Frame>
        
        <Frame BorderColor="#376199" Margin="20,10" Padding="0" BackgroundColor="#376199">
            <StackLayout BackgroundColor="#376199" VerticalOptions="Center">

                <Frame Margin="15" Padding="0" BackgroundColor="#376199" CornerRadius="10" BorderColor="White" HeightRequest="45">
                    <Entry Background="#376199" Margin="10,1" Placeholder="Id" PlaceholderColor="LightGray" VerticalOptions="Center" TextColor="White"/>
                </Frame>

                <Frame Margin="15" Padding="0" BackgroundColor="#376199" CornerRadius="10" BorderColor="White" HeightRequest="45">
                    <Entry Background="#376199" Margin="10,1" Placeholder="Password" PlaceholderColor="LightGray" VerticalOptions="Center" TextColor="White" IsPassword="True" MaxLength="10"/>
                </Frame>

                <Button Text="LOGIN" TextColor="White" FontSize="15" BackgroundColor="#1295DB" HorizontalOptions="FillAndExpand" Margin="15,15" HeightRequest="40" FontAttributes="Bold"
                        Command="{Binding MenuCommand}" CommandParameter="MainPage"/>
                
            </StackLayout>
        </Frame>
        <Label Text="Create acount?" HorizontalOptions="Center" TextColor="White" FontAttributes="Bold">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding MenuCommand}" CommandParameter="MainPage"/>
            </Label.GestureRecognizers>
        </Label>

    </StackLayout>
</ContentPage>

LoginPageModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

namespace Maui.LoginPage.ViewModels
{
    public class LoginPageModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public ICommand MenuCommand => new Command<string>(p=>OnMenuCommand(p));

        private void OnMenuCommand(string menu)
        {
            Shell.Current.GoToAsync("//App/" + menu);
        }
    }
}

소스
https://github.com/kei-soft/KJunBlog/tree/master/Maui.LoginPage