WPF UI框架界面开发教程（十）

链接铵钮实现了，点击该按钮切换到注册界面，并实现注册和登录界面来回切换。

1627714761265

注册界面和登录差不多，直接给样式代码：

<Page x:Class="Fashion.Word.Pages.RegisterPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Fashion.Word"
      xmlns:pages="clr-namespace:Fashion.Word.Pages"
      xmlns:vm="clr-namespace:Fashion.Word.ViewModel"
      mc:Ignorable="d"
      d:DesignHeight="400" d:DesignWidth="600"
      Title="RegisterPage" Loaded="Page_Loaded">
    
    <Page.DataContext>
        <vm:RegisterPageVm></vm:RegisterPageVm>
    </Page.DataContext>
    
    <Border>
        <Grid>
            <StackPanel
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                TextBlock.TextAlignment="Center">
                <Border Background="{StaticResource ForegroundLightBrush}"
                            CornerRadius="10"
                            Padding="15,50,15,15"
                            Width="330"
                            Margin="50,50,50,0">
                    <StackPanel>
                        <TextBlock Text="注册"
                            FontSize="{DynamicResource Nb.FontSize.20}"
                            Foreground="{StaticResource WordBlueBrush}"/>
                        <TextBlock Text="让您拥有自己帐户"
                            FontSize="{DynamicResource Nb.FontSize.16}"
                            Foreground="{StaticResource ForegroundDarkBrush}"
                            Margin="0 0 0 20"/>
                        <TextBox Tag="用户名" Height="40"/>
                        <PasswordBox Tag="密码" Height="40" />
                        <StackPanel Margin="10,5,0,0" VerticalAlignment="Center" HorizontalAlignment="Left">
                            <CheckBox HorizontalAlignment="Center" Content="记住密码"/>
                        </StackPanel>
                        <Button Content="注册"
                            IsDefault="True"
                            Command="{Binding RegisterCommand}"
                            local:BusyFrameAnimation.IsBusy="{Binding RegisterIsRunning}"
                            CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type pages:RegisterPage}}}" 
                            HorizontalAlignment="Center"/>                        
                    </StackPanel>
                </Border>
                <Button Style="{StaticResource LinkButton}" 
                            Command="{Binding LoginCommand}"
                            Content="已经有帐号，点击登录" 
                            HorizontalAlignment="Center"/>
            </StackPanel>
        </Grid>
    </Border>
   
</Page>

namespace Fashion.Word.ViewModel
{
    public class RegisterPageVm : BaseViewModel
    {
        #region public handle
        public RegisterPage registerPage { set; get; }
        #endregion

        #region Public Properties

        public string UserName { get; set; }

        public SecureString Password { get; set; }

        public bool RegisterIsRunning { get; set; }

        public PageAnimation PageLoadAnimation { get; set; } = PageAnimation.SlideAndFadeInFromRight;

        public PageAnimation PageUnloadAnimation { get; set; } = PageAnimation.SlideAndFadeOutToLeft;

        public float SlideSeconds { get; set; } = 1f;

        public bool ShouldAnimateOut { get; set; }

        #endregion

        #region public methods
        public void Init(RegisterPage page)
        {
            this.registerPage = page;
            LoadedAsync();
        }

        private async void LoadedAsync()
        {
            if (ShouldAnimateOut)
                await AnimationOutAsync();
            else
                await AnimationInAsync();
        }

        public async Task AnimationInAsync()
        {
            if (PageLoadAnimation == PageAnimation.None)
                return;

            switch (PageLoadAnimation)
            {
                case PageAnimation.SlideAndFadeInFromRight:
                    await this.registerPage.SlideAndFadeInAsync(AnimationSlideInDirection.Right, SlideSeconds, size: (int)Application.Current.MainWindow.Width);
                    break;
            }
        }

        public async Task AnimationOutAsync()
        {
            if (this.PageLoadAnimation == PageAnimation.None)
                return;

            switch (this.PageUnloadAnimation)
            {
                case PageAnimation.SlideAndFadeOutToLeft:
                    await this.registerPage.SlideAndFadeOutAsync(AnimationSlideInDirection.Left, SlideSeconds);
                    break;
            }
        }
        #endregion

        #region public commands

        /// <summary>
        /// 注册
        /// </summary>
        public ICommand RegisterCommand
        {
            get
            {
                return new DelegateCommand(async parameter =>
                {
                    await RunCommandAsync(() => this.RegisterIsRunning, async () =>
                    {
                        await Task.Delay(3000);
                    });
                });
            }
        }

        /// <summary>
        /// 返回登录
        /// </summary>
        public ICommand LoginCommand
        {
            get
            {
                return new DelegateCommand(obj =>
                {
                    var vm = ((MainWindow)Application.Current.MainWindow).DataContext as MainWindowVm ?? new MainWindowVm();
                    vm.CurrentPage = ApplicationPage.Login;
                });
            }
        }
        #endregion
    }
}

增加枚举注册页面

 public enum ApplicationPage
    {
        /// <summary>
        /// 无
        /// </summary>
        [Description("无")]
        None = 0,

        /// <summary>
        /// 登录
        /// </summary>
        [Description("登录")]
        Login = 1,

        /// <summary>
        /// 注册
        /// </summary>
        [Description("注册")]
        Register = 2
    }

在类型转换返回注册页面

public class ApplicationPageValueConverter : BaseValueConverter<ApplicationPageValueConverter>
    {
        public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var page = (ApplicationPage)value;
            switch (page)
            {
                case ApplicationPage.Login:
                    return new LoginPage();

                case ApplicationPage.Register:
                    return new RegisterPage();
                default:
                    return null;
            }
        }

        public override object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

接下来重点讲一下加载页面。NavigationUIVisibility="Hidden" 表示隐藏导航栏标签，类似浏览器中前进，后退功能，Navigating导航时加入事件。

 <Frame x:Name="PageContainer" NavigationUIVisibility="Hidden" Navigating="PageContainer_Navigating" Content="{Binding CurrentPage, Converter={StaticResource ApplicationPageValueCv}}"/>

CanGoBack判断能返回，有其它页面就用RemoveBackEntry移除页，再通过循环移除所有页面。

private void PageContainer_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            if (e.NavigationMode == NavigationMode.Refresh)
                e.Cancel = true;
            else if (e.NavigationMode == NavigationMode.Back)
                e.Cancel = true;
            if (this.PageContainer.CanGoBack)
            {
                var entry = this.PageContainer.RemoveBackEntry();
                while (entry != null)
                {
                    entry = this.PageContainer.RemoveBackEntry();
                }
            }
        }

最后需要点注册链接按钮显示注册界面。通过设置CurrentPage＝ApplicationPage.Register

/// <summary>
        /// 注册用户
        /// </summary>
        public ICommand RegisterCommand
        {
            get
            {
                return new DelegateCommand(obj =>
                {
                    var vm = ((MainWindow)Application.Current.MainWindow).DataContext as MainWindowVm ?? new MainWindowVm();
                    vm.CurrentPage = ApplicationPage.Register;
                });
            }
        }