WPF実践学習ノート 28ログインインターフェース

ログインインターフェースUIの追加

ファイルloginview.xamlを追加します。このインターフェイスは md のアイコンを使用することに注意してください。ログイン画面の画像はありません

<UserControl
    x:Class="Mytodo.Views.LoginView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:local="clr-namespace:Mytodo.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:prism="http://prismlibrary.com/"
    mc:Ignorable="d">
    <prism:Dialog.WindowStyle>
        <Style TargetType="Window">
            <Setter Property="Width" Value="600" />
            <Setter Property="Height" Value="400" />
            <Setter Property="SizeToContent" Value="WidthAndHeight" />
            <Setter Property="ResizeMode" Value="NoResize" />
            <Setter Property="prism:Dialog.WindowStartupLocation" Value="CenterScreen" />
        </Style>
    </prism:Dialog.WindowStyle>
    <Grid Width="350" Height="400">
        <DockPanel Margin="15,5,15,20" VerticalAlignment="Center">
            <md:PackIcon
                Width="100"
                Height="80"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                md:ThemeAssist.Theme="Dark"
                DockPanel.Dock="Top"
                Foreground="SpringGreen"
                Kind="AccountOutline" />
            <TextBlock
                Margin="0,10"
                DockPanel.Dock="Top"
                FontSize="22"
                FontWeight="Bold"
                Text="欢迎使用" />

            <TextBox
                Margin="0,10"
                md:HintAssist.Hint="请输入账号"
                DockPanel.Dock="Top"
                Text="{Binding UserName}" />
            <PasswordBox
                Margin="0,10"
                md:HintAssist.Hint="请输入密码"
                DockPanel.Dock="Top">
                <!--  pass:PassWordExtensions.PassWord="{Binding PassWord, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  -->
                <!--<i:Interaction.Behaviors>
                    <pass:PasswordBehavior />
                </i:Interaction.Behaviors>-->
            </PasswordBox>

            <Button
                Command="{Binding ExecuteCommand}"
                CommandParameter="Login"
                Content="登录系统"
                DockPanel.Dock="Top" />

            <DockPanel Margin="0,5" LastChildFill="False">
                <TextBlock Text="注册账号">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonDown">
                            <i:InvokeCommandAction Command="{Binding ExecuteCommand}" CommandParameter="ResgiterPage" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </TextBlock>
                <TextBlock DockPanel.Dock="Right" Text="忘记密码?" />
            </DockPanel>
        </DockPanel>
    </Grid>
</UserControl>

対応するビューモデルを追加します

ファイル Mytodo.ViewModels.LoginViewModel.cs を追加します。

using Prism.Mvvm;
using Prism.Services.Dialogs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Mytodo.ViewModels
{
    public class LoginViewModel : BindableBase, IDialogAware
    {
        public string Title { get; set; } = "TOdo";
            
            
       public event Action<IDialogResult> RequestClose;

        public bool CanCloseDialog()
        {
            return true;
        }

        public void OnDialogClosed()
        {
           
        }

        public void OnDialogOpened(IDialogParameters parameters)
        {
            
        }
    }
}

サインアップビュー

containerRegistry.RegisterForNavigation<LoginView, LoginViewModel>();

スタートアップを追加

ファイルを変更します: App.xmal.cs

protected override void OnInitialized()
{
    var dialog = Container.Resolve<IDialogService>();

    dialog.ShowDialog("LoginView", callback =>
                      {
                          if (callback.Result != ButtonResult.OK)
                          {
                              Environment.Exit(0);
                              return;
                          }

                          var service = App.Current.MainWindow.DataContext as IConfigureInterface;

                          if (service != null)
                          {
                              service.Configure();
                          }

                          base.OnInitialized();
                      });
}