【wpf】利用wpf写的一个登录界面--美感为零的程序员伤不起

最新推荐文章于 2025-11-10 21:02:34 发布
原创 最新推荐文章于 2025-11-10 21:02:34 发布 · 2.6w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

【前言】

上次用swing来搞客户端，连续几天无法攻克技术难题---说是难题是因为 我感觉swing的机制高深莫测，是菜鸟杀手。所以将客户端的技术换成了wpf，以后可能会用java做服务端，看来现代社会多种语言多种技术构成一个解决方案是必须的，话说假如swing难度低一点的话我也不用同时用两种语音了，因为假如要开发效率上去的话，工具类，组件等等都必不可少，可以说我将同一个工具类用两个不同的版本重写过。

【正文】

好吧，先看看这个登录界面的效果，大家莫怪，这个UI是从网上copy下来的。


ok，得益于wpf的机制，客户端无意外拿下来，但是由于对wpf还是不熟，所以有很多效果，动画都没做出来。过一段时间可能就熟了。下面上代码：

【xaml代码】

<Window x:Class="EasisERP.Login"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="400" Background="#00000000" WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" BorderThickness="1">
    <Grid Background="#a1C6C6C6" Opacity="1">
        <Grid.RowDefinitions>

            <RowDefinition Height="360*" />

        </Grid.RowDefinitions>
        <Border ClipToBounds="True" Margin="10" Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0" CornerRadius="0 0 7 7">

            <Grid Grid.Row="0" Grid.Column="0" Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="43" />
                    <RowDefinition Height="200*" />
                </Grid.RowDefinitions>

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="322" />
                        <ColumnDefinition Width="32" />
                    </Grid.ColumnDefinitions>
                    <Grid.Background>
                        <ImageBrush ImageSource="Images/login_title_bg.png"></ImageBrush>
                    </Grid.Background>
                    <Label Grid.Row="0" Grid.Column="0" Content="请登录" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Padding="20 0 0 0" FontSize="16" Foreground="White"></Label>
                    <Button Grid.Row="0" Grid.Column="1" Width="25" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" Name="btn_close" Click="btn_close_Click">
                        <Button.Template>
                            <ControlTemplate>
                                <Label  Name="tips_close" MouseEnter="tips_close_MouseEnter" MouseLeave="tips_close_MouseLeave"  Foreground="White" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Cursor="Hand">
                                    <Label.Background>
                                        <ImageBrush ImageSource="Images/cancel.png"></ImageBrush>
                                    </Label.Background>
                                </Label>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>


                </Grid>



                <Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch" Background="#FFededed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60*" />
                        <RowDefinition Height="60*" />
                        <RowDefinition Height="60*" />
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Width="334" Height="50">
                        <Label.Background>
                            <ImageBrush ImageSource="Images/UIDA登录_03.gif"></ImageBrush>
                        </Label.Background>
                        <TextBox Margin="45 0 0 0" Width="280" Height="50" Padding="20 0 0 0"  HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Left"  FontSize="24" VerticalContentAlignment="Center"  Background="{x:Null}" BorderThickness="0" Text="" >

                            <!--textbox的样式-->

                            <!--textbox样式结束-->
                        </TextBox>

                    </Label>
                    <Label Grid.Row="1" Grid.Column="0" Width="334" Height="50">
                        <Label.Background>
                            <ImageBrush ImageSource="Images/UIDA登录_06.gif"></ImageBrush>
                        </Label.Background>
                        <PasswordBox Margin="45 0 0 0" Width="280" Height="50" Padding="20 0 0 0"  HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Left"  FontSize="24" VerticalContentAlignment="Center"  Background="{x:Null}" BorderThickness="0" >

                            <!--textbox的样式-->

                            <!--textbox样式结束-->
                        </PasswordBox>

                    </Label>

                    <Button Cursor="Hand" Name="btn_login" Opacity="1" Grid.Column="0" Grid.Row="2" Click="login_Click"  Foreground="#FF7C7C03"  Height="50" Width="320" MouseEnter="btn_login_MouseEnter" MouseLeave="btn_login_MouseLeave">
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border ClipToBounds="True"  CornerRadius="5">
                                    <Label Name="tips_for_login" Content="登  录" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="24" Foreground="White" >
                                        <Label.Background>
                                            <ImageBrush ImageSource="Images/未标题-1_03.gif"></ImageBrush>
                                        </Label.Background>

                                    </Label>
                                </Border>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>







                </Grid>

            </Grid>
        </Border>




    </Grid>
</Window>

【对应的后台代码】 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace EasisERP
{
    /// <summary>
    /// Login.xaml 的交互逻辑
    /// </summary>
    public partial class Login : Window
    {
        public Login()
        {
            InitializeComponent();
            _init();
        }

 

        public void _init() {
            this.WindowStartupLocation=WindowStartupLocation.CenterScreen;
        }



        private void login_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("暂未处理");
            
        }



        private void tips_close_MouseEnter(object sender, MouseEventArgs e)
        {
            Label lb_1 = (Label)sender;
            try
            {
                ImageBrush ib1 = new ImageBrush(new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "Images/cancel_1.png")));
                
                ib1.Stretch = Stretch.Fill;


                lb_1.Background = ib1;
            }
            catch (Exception ef) {
                MessageBox.Show("出现错误！："+ef.ToString());
            }

        }

        private void tips_close_MouseLeave(object sender, MouseEventArgs e)
        {
            Label lb_1 = (Label)sender;
            try
            {
                ImageBrush ib1 = new ImageBrush(new BitmapImage(new Uri(BaseUriHelper.GetBaseUri(this), "Images/cancel.png")));

                ib1.Stretch = Stretch.Fill;


                lb_1.Background = ib1;
            }
            catch (Exception ef)
            {
                MessageBox.Show("出现错误！：" + ef.ToString());
            }
        }

        private void btn_close_Click(object sender, RoutedEventArgs e)
        {
            this.Close();

        }

        private void btn_login_MouseEnter(object sender, MouseEventArgs e)
        {
            Button btn_login = (Button)sender;
            Label lb1 = (Label)btn_login.Template.FindName("tips_for_login", btn_login);
           lb1.Foreground = new SolidColorBrush(Colors.Red);

        }

        private void btn_login_MouseLeave(object sender, MouseEventArgs e)
        {
            Button btn_login = (Button)sender;
            Label lb1 = (Label)btn_login.Template.FindName("tips_for_login", btn_login);
            lb1.Foreground = new SolidColorBrush(Colors.White);

        }
    }
}


【别急，我将相关资源图片及项目文件打包上来】

运行环境：vs20210sp1.

登录页面项目文件下载

WPF登录界面设计
weixin_65414269的博客
08-08 784
【代码】WPF登录界面设计。
WPF实现登录界面
Zzu_zzx的博客
08-12 4450
WPF实现简约登录界面
WPF的登录界面
07-16
使用WPF技术制作的软件登录界面，用户名、密码窗口中显示“请输入用户名”和“请输入密码”
WPF 界面交互：从登录到主窗体的无缝切换（含关闭登录页核心代码）
最新发布
2402_84552939的博客
11-10 318
摘要：WPF应用登录后关闭问题的两种解决方案：1）在App.xaml中设置Startup事件，通过DialogResult控制流程，登录失败时调用Shutdown()退出；2）使用反射动态创建主窗体，通过Unloaded事件处理隐藏的登录窗体问题。提供两种事件处理方式：直接绑定Window_Unloaded事件或通过Microsoft.Xaml.Behaviors.Wpf实现命令绑定。最终可通过Shutdown()或关闭主窗口来退出应用。
WPF登录界面
05-26
WPF界面设计（很帅）+登录验证用户名跟密码固定值123+跳转功能+按钮的键盘快捷键添加（登录用键盘键enter替代）
WPF MVVM完整示例（登录窗口）
09-17
包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
WPF中的登录界面
愿你历尽千帆，归来仍是少年。
11-18 1695
【代码】WPF中的登录界面。
WPF 登录界面
01-08
一星空为主题的比较漂亮的登录界面，在牛人基础上改的
精选资源
C#基于WPF的前端登录UI框架-Win版源码.zip
06-02
基于C#-WPF的前端登录UI框架，流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架，流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架，流畅的动画...
桌面开发 - WPF UI - 组件库wpfui-main - 用于 WPF 应用程序的现代化界面设计与开发
08-20
wpfui-main是一个基于WPF（Windows Presentation Foundation）框架的开源UI组件库，专注于为Windows桌面应用提供现代化、高颜值的界面组件与设计方案，帮助开发者快速构建符合当代设计审美、交互流畅的WPF应用程序。...
精选资源
WPF用户登录界面设计-使用SQLite数据库示例用户
07-31
WPF用户登录界面设计-使用SQLite数据库
一个非常好看登录界面，用WPF完成的
05-24
标题中的“一个非常好看登录界面，用WPF完成的”表明我们将探讨的是一个使用Windows Presentation Foundation（WPF）技术构建的美观的登录界面。WPF是.NET Framework的一部分，是一个用于创建桌面应用程序的强大工具...
简单的wpf制作一个登陆界面
03-13
这是通过两个grid容器进行分割的简单登陆界面的设计,而且限定了界面的大小,可以拖动但是不可以拉伸
WPF做的漂亮的登陆界面[附源码]
11-04
WPF登陆界面美化： 1：账号和密码框都做了美化， 2：关闭按钮和登陆按钮都做了美化，当鼠标移动上去，都做了处理， 3：总体界面四个边角是圆弧形，挺好看的。。。。
wpf登录界面设计
08-23
wpf 直接跑起来的源代码 仿2013登录界面
C# WPF 登录界面设计
m0_47020592的博客
07-10 1926
wpf常用属性设置
WPF-一个简单登录界面
weixin_45131680的博客
11-11 457
工程，创建名为 Login5 的WPF项目。界面的整体布局和样式代码。
wpf 登陆界面
dxm809的博客
08-04 578
<Window x:Class="WpfApp05.MainWindow" 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" .
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值