C# WPF做的漂亮的登陆界面[附源码]

65 阅读 0 评论 43 点赞

我是靠谱客的博主大胆柚子，最近开发中收集的这篇文章主要介绍C# WPF做的漂亮的登陆界面[附源码]，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

登录窗体无论在bs还是cs中都很常见，使用winform或者wpf ui进行设计都相对比较简单，但是如果在WPF框架，比如：Caliburn.Micro下，设计一个符合MVVM思想的登录窗体就相对有了点难度，因为CM框架本身的设计理念是VM first而非View first.接下来开始讲解我的设计.

后台设计

数据模型：定义一个用户登录类，类中囊括三个属性

public class UserInformation
    {
        public UserInformation()
        {
            UserName = "zls20210502";
            Password = "123456";
        }
        /// <summary>
        /// 用户名
        /// </summary>
        public string UserName { get; set; }


        /// <summary>
        /// 密码
        /// </summary>
        public string Password { get; set; }


        /// <summary>
        /// 性别
        /// </summary>
        public int Gender { get; set; }




    }

登录信息验证：这里按理应该增加注册信息，应该是个list，我只是举例写了一组：

public string ValidateLoginData()
        {
            StringBuilder sb = new StringBuilder();
            if (UserInformation.UserName == "zls20210502"
                    && UserInformation.Password == "12345678")
            {
                sb.Append("");
            }
            else
            {
                sb.AppendLine("账号或者密码输入有误,请检查！");
            }
            return sb.ToString();
        }

登录方法：这里首先验证登录信息，验证失败就弹窗提示报错信息，否则通过GetView()方法获取当前view并隐藏，然后通过IOC获取IWindowManager，再通过ShowDialog显示主窗体，这几个方法都CM框架集成的方法.登录窗体需要继承Screen.

public void BtnLogin()
        {
            var str = ValidateLoginData();
            if(!string.IsNullOrEmpty(str))
            {
                MessageBox.Show(str);
 
            }
            else 
            {
                var loginWindow = (Window)this.GetView();
                loginWindow.Hide();


                MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();
                IWindowManager windowManager = IoC.Get<IWindowManager>();
                windowManager.ShowDialog(mainWindowViewModel);
                this.TryClose();
            }


        }

前台设计

前台的密码框采用dev下的PasswordBoxEdit，因为wpf自带的PasswordBox的Password不支持绑定：

全部代码如下：

<Window x:Class="Caliburn.Micro.Hello.LoginView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        WindowStyle="None" AllowsTransparency="True" Background="{x:Null}"
        Title="LoginWindow" Height="320" Width="300" WindowStartupLocation="CenterScreen">
    <Grid  Width="{Binding Width, ElementName=w}" Height="{Binding Height, ElementName=w}">
        <Grid.RowDefinitions>
            <RowDefinition Height="150" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition  />
        </Grid.RowDefinitions>
        <Border Grid.RowSpan="4" BorderBrush="Gray" BorderThickness="3" CornerRadius="20" Margin="10"  Opacity="1"  Background="White"></Border>
        <Button  Name="BtnClose"  Grid.Row="0" Margin="20" 
                 Width="48" Height="48"  BorderBrush="{x:Null}" Background="{x:Null}"
                 HorizontalAlignment="Right" VerticalAlignment="Top">
            <Image Source="/Images/exit1.png"/>
        </Button>
        <Image Grid.Row="0"  VerticalAlignment="Center" Width="120"  Height="120" Source="/Images/login.png" />


        <TextBox x:Name="UserTextBox" Text="{Binding UserInformation.UserName}"  Grid.Row="1"  Width="200" VerticalAlignment="Bottom" BorderThickness="0,0,0,1" Height="25"></TextBox>
        <TextBlock Foreground="DarkGray"  Grid.Row="1"  IsHitTestVisible="False" HorizontalAlignment="Center" Height="25" Text="请输入用户名" VerticalAlignment="Bottom" Width="90" FontFamily="Microsoft YaHei">
            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Text, ElementName=UserTextBox}" Value="">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
</Style>
            </TextBlock.Style>
        </TextBlock>
        <dxe:PasswordBoxEdit  x:Name="PwdTextBox" Text="{Binding UserInformation.Password}"  
                              Grid.Row="2"  Width="200" 
                              VerticalAlignment="Bottom" BorderThickness="0,0,0,1" Height="25"></dxe:PasswordBoxEdit>
        <TextBlock Foreground="DarkGray" Grid.Row="2"  IsHitTestVisible="False" HorizontalAlignment="Center" Height="25" Text="请输入密码" VerticalAlignment="Bottom" Width="90" FontFamily="Microsoft YaHei">
            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Text, ElementName=PwdTextBox}" Value="">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
</Style>
            </TextBlock.Style>
        </TextBlock>


        <Button Name="BtnLogin"  Grid.Row="2"  Width="48" Margin="0,0,20,0"
                BorderBrush="{x:Null}" Background="{x:Null}" 
                Height="48"   HorizontalAlignment="Right" VerticalAlignment="Top">
            <Image Source="/Images/userlogin.png"/>
        </Button>
    </Grid>
</Window>