One Days wpf 分享登录-login

最新推荐文章于 2023-12-13 16:23:53 发布

来杯卡布奇诺哦

最新推荐文章于 2023-12-13 16:23:53 发布

阅读量243

点赞数

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.csdn.net/qq_41511678/article/details/123873222

版权

WPF 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、序言

这里使用的工具是VS2019，.net版本使用的是4.5版本。素材插件使用的是materialDesign。分享是随缘更新。

二、前期准备

1、现在Nuget里安装MaterialDesignColors，MaterialDesignThemes两个插件包。

2、在App.xaml文件里更改成下面代码部分

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
                <!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

3、在所需要使用的界面里引用materialDesign，在这个位置添加如下代码：

 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

三、前端界面

前期工作做好了，开始写前端。

前端代码如下：

<Window x:Name="login_view" x:Class="ShellLogin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        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"
        xmlns:local="clr-namespace:ShellLogin"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None" MouseLeftButtonDown="Window_MouseLeftButtonDown" Background="White" Loaded="login_view_Loaded">
    <materialDesign:DialogHost x:Name="Dial" DialogOpened="DialogHost_DialogOpened" DialogClosing="DialogHost_DialogClosing">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!--右侧图-->
            <materialDesign:TransitioningContent Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <materialDesign:TransitioningContent.OpeningEffects>
                    <materialDesign:TransitionEffect Kind="SlideInFromRight" Duration="0:0:2"/>
                </materialDesign:TransitioningContent.OpeningEffects>
                <Image Source="./Images/bg_pic.png" Stretch="Uniform"  StretchDirection="Both"/>
            </materialDesign:TransitioningContent>

            <Grid Grid.Column="0" VerticalAlignment="Center" Height="450">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ToggleButton x:Name="btn_Close" Style="{StaticResource MaterialDesignFlatToggleButton}" HorizontalAlignment="Left" VerticalAlignment="Top" ToolTip="关闭" Height="AUTO" Width="AUTO" Click="btn_Close_Click">
                    <materialDesign:PackIcon Kind="Close" Height="20" Width="24" Foreground="#FFD42525"/>
                </ToggleButton>
                <!--抬头-->
                <materialDesign:TransitioningContent Grid.Row="0" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                    <materialDesign:TransitioningContent.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="ExpandIn" Duration="0:0:2"/>
                    </materialDesign:TransitioningContent.OpeningEffects>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Label x:Name="label1" Grid.Row="0" Content="Login"   FontWeight="Bold" FontSize="20"/>
                        <Label x:Name="label2" Grid.Row="1" Content="This is a login screen. Yeah, login." FontWeight="Bold" FontSize="18"/>
                        <Label x:Name="label3" Grid.Row="2" Content="Label" HorizontalContentAlignment="Left"  Width="60" Height="5" Background="#FF4346D3" Margin="0,0,272,0"/>
                    </Grid>
                </materialDesign:TransitioningContent>

                <!--账号-->
                <materialDesign:TransitioningContent Grid.Row="1" Margin="90,20,00,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                    <materialDesign:TransitioningContent.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:2"/>
                    </materialDesign:TransitioningContent.OpeningEffects>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="7*"/>
                            <ColumnDefinition Width="15*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="49" VerticalAlignment="Top" Width="220" Grid.ColumnSpan="2"/>
                        <materialDesign:PackIcon Kind="Account" Width="33" Height="26" Foreground="{Binding ElementName=txt_UserName,Path=BorderBrush}" VerticalAlignment="Bottom" Margin="-16,0,0,-1">
                        </materialDesign:PackIcon>
                        <TextBox  x:Name="txt_UserName" materialDesign:HintAssist.Hint="请输入登录名或邮箱"  Style="{StaticResource MaterialDesignFloatingHintTextBox}"  VerticalAlignment="Bottom" Margin="20,0,0,0" Height="44" BorderBrush="#FF6969D3" Grid.ColumnSpan="2" />
                    </Grid>
                </materialDesign:TransitioningContent>

                <!--密码-->
                <materialDesign:TransitioningContent Grid.Row="2" Margin="90,20,00,0" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <materialDesign:TransitioningContent.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:2"/>
                    </materialDesign:TransitioningContent.OpeningEffects>
                    <Grid>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="49" VerticalAlignment="Top" Width="220"/>
                        <materialDesign:PackIcon Kind="key" Width="30" Height="24" Foreground="{Binding ElementName=txt_PassWord,Path=BorderBrush}" VerticalAlignment="Bottom" Margin="-10,0,0,0">
                        </materialDesign:PackIcon>
                        <PasswordBox  x:Name="txt_PassWord"  materialDesign:HintAssist.Hint="请输入密码"  Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" Height="44" VerticalAlignment="Bottom" Grid.RowSpan="2" Margin="20,0,0,0" BorderBrush="#FF6969D3" Grid.ColumnSpan="2" />
                    </Grid>
                </materialDesign:TransitioningContent>

                <materialDesign:TransitioningContent Grid.Row="3" RenderTransformOrigin="0.612,0.5">
                    <materialDesign:TransitioningContent.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:2"/>
                    </materialDesign:TransitioningContent.OpeningEffects>
                    <Grid Margin="105,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <!--<CheckBox Grid.Column="0" x:Name="CheckPassword" >
                            记住密码
                        </CheckBox>-->
                        <RepeatButton Grid.Column="1" x:Name="Login"  materialDesign:ButtonAssist.CornerRadius="20" Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}" Width="100"  ToolTip="Login"  Content="登录" Click="Login_Click" HorizontalAlignment="Right" Background="#FF2745E3" Height="Auto" Margin="0,25,75,25" FontWeight="Bold">
                            <RepeatButton.CommandParameter>
                                <StackPanel Margin="16">
                                    <ProgressBar Style="{DynamicResource MaterialDesignCircularProgressBar}" HorizontalAlignment="Center" Margin="16"
                                                 IsIndeterminate="True" Value="0"/>
                                    <RadioButton Style="{StaticResource MaterialDesignFlatButton}" IsChecked="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="Sample2Cancel" HorizontalAlignment="Center" IsEnabled="False">
                                        登录中
                                    </RadioButton>
                                </StackPanel>
                            </RepeatButton.CommandParameter>
                        </RepeatButton>
                        <!--<RepeatButton Grid.Column="1" x:Name="Register" Width="100"  ToolTip="Register"  Content="Register" Click="Register_Click" Background="#FF2745E3" Margin="106,29,89,29"/>-->
                    </Grid>
                </materialDesign:TransitioningContent>

                <materialDesign:TransitioningContent Grid.Row="4">
                    <materialDesign:TransitioningContent.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:2"/>
                    </materialDesign:TransitioningContent.OpeningEffects>
                    <Grid>
                        <Label x:Name="label4" Content="——应该是有其他登录方式的，但是我们现在不支持!——" HorizontalAlignment="Center" VerticalAlignment="Top"/>
                    </Grid>
                </materialDesign:TransitioningContent>
            </Grid>
        </Grid>

    </materialDesign:DialogHost>
</Window>

四、后台代码部分

窗台移动的代码

        /// <summary>
        /// 点击鼠标左键窗体移动.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

窗体关闭代码

        /// <summary>
        /// 窗体关闭.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_Close_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

登录部分代码及异常处理显示

        /// <summary>
        /// 登录.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private async void Login_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                //ui显示初始化.
                btnClose.Content = "等待";
                TxtLogo.Text = "登录中......";
                btnClose.IsEnabled = false;
                
                //判断事件.
                if (this.txt_UserName.Text == null || this.txt_UserName.Text == "")
                {
                    FunctionalClass.EorrMessages("账号不能为空!");//自定义的信息提示面板，可忽略。
                    return;
                }
                if (this.txt_PassWord.Password == null || this.txt_PassWord.Password == "")
                {
                    FunctionalClass.EorrMessages("密码不能为空!");
                    return;
                }
                else
                {
                    await Task.Delay(TimeSpan.FromSeconds(2));
                    var gen = new Random(DateTime.Now.Millisecond);
                    T_UserManager t_UserManager = new T_UserManager();
                    string strPassword = MD5Helper.Md5Encrypt(this.txt_PassWord.Password);//密码Md5加密,可忽略。
                    int id;
                    string UserName;
                    if (判断你的登录是否成功)
                    {
                        //这里是你的登录成功后的事件
                    }
                    else
                    {
                        btnClose.Content = "取消";
                        TxtLogo.Text = "数据异常登录失败";
                        btnClose.IsEnabled = true;
                    }
                }
            }
            catch (Exception)
            {
                btnClose.Content = "取消";
                TxtLogo.Text = "服务器异常登录失败";
                btnClose.IsEnabled = true;
            }
        }

关闭遮挡层代码.

下列代码中的Dial是遮挡层的Name.

        /// <summary>
        /// 关闭遮挡层.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            Dial.IsOpen = false;
        }