使用美化方法设计通用登录窗体(一)

使用美化方法设计通用登录窗体(一)

真正做企业级开发的话，肯定是有美工来设计效果图的。

效果图：
!

添加新登录窗体，让窗体无边框

• 创建新项目：BeautyWinForm
• 修改默认窗体：FrmAdminLogin.cs
• 窗体的无边框设计：FormBorderStyle：none
• 修改窗体的位置：StartPosition：CenterScreen
• 修改窗体的大小：Size：390*280
• 修改窗体的标题：Text：管理员登录(虽然在无边款模式下看不见，但是在运行后，在任务栏鼠标移入预览时，还是能看到标题的)
• 修改窗体的背景颜色：BackColor：#D7E4F2（可以使用取色器/拾取器）

ps：可以下载 ColorSPY v2.0b.exe 取色器。我已经帮大家下载好了。在 软件 -> ColorSPY.exe。
因为有些电脑的屏幕缩放与布局调整的是 125%，所以可能导致拾取的坐标有偏差。

添加 PictureBox 控件

• 设置 PictureBox 的停靠位置：Dock：Top
• 设置 PictureBox 的背景图片：BackgroundImage：AdminLogin.jpg
• 设置 PictureBox 的背景图片布局方式：BackgroundImageLayout：Stretch
• 拖拽 Label 设置文本：Text：企业级MIS综合平台
• 调整 Label 的 Font 属性： 华文彩云(华文琥珀) 常规 二号
• 修改 Label 的 AutoSize 属性：false，可以自由修改 Label 的尺寸大小
• 修改 Label 的对齐方式：TextAlign：MiddleCenter
• 拾取 AdminLogin.jpg 的颜色，修改 Label 的 BackColor：#009BD5
• 修改 Label 的字体颜色：ForeColor：white

登录表单

• 拖拽一个 Label，修改 Text 属性：管理员账号：， Font 属性：微软雅黑
• 拖拽一个 TextBox，修改边框 BorderStyle：FixedSingle
• 复制一下 Label 和 TextBox
• Label 的 Text：管理员密码：
• TextBox 的 UseSystemPasswordChar：true

复选框

• 拖拽一个 CheckBox 控件
• 修改边框样式 FlatStyle：默认 Standard（标准的），修改为 Flat（扁平化，是一个趋势）
• 修改 Text：记住密码（10天内保存），Font：微软雅黑
• 再拖拽一个按钮 Button，FlatStyle：Flat
• 修改按钮的边框 FlatAppearance：
  • BorderColor：边框颜色
  • BorderSize：边框大小
  • MouseDownBackColor：鼠标按下背景颜色
  • MouseOverBackColor：鼠标移入背景颜色
• 修改按钮的背景颜色 BackColor：#09A3DC
• 修改按钮的字体颜色 ForeColor：white
• 修改按钮的 Font 属性：微软雅黑 5号
• 修改按钮的 Text 属性：登 录 系 统
• 修改 Tab 键按键顺序

关闭按钮

• 拖拽一个按钮 Button，调整大小和位置（右上角）
• 修改按钮的 Text 属性：x，字体颜色 ForeColor：white
• 扁平化设置 FlatStyle：Flat
• 去边框 FlatAppearance：BorderWidth：0
• 修改背景颜色 BackColor：#009BD5（取色器取色）

实现按钮点击事件：

private void btnClose_Click(object sender, EventArgs e)
{
    this.Close();
}

窗体的移动

给窗体、标题图标、标题Label等，都可以添加以下事件三个事件：鼠标按下，鼠标移动，鼠标松开

#region 窗体的移动
// 鼠标移动位置变量
private Point mouseOff;
// 标记是否按下左键
private bool leftFlag;
// 窗体的鼠标按下事件
private void FrmAdminLogin_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        // 按下了鼠标左键
        leftFlag = true;
        // 获取鼠标在产生鼠标事件时的位置（其中包含x和y鼠标坐标，以像素为单位，相对于窗体的左上角。）
        // mouseOff = new Point(e.X, e.Y);
        mouseOff = e.Location;

        // MessageBox.Show(e.Location.X + " " + e.Location.Y);
        // MessageBox.Show(e.X + " " + e.Y);
    }
}
// 窗体的鼠标移动事件
private void FrmAdminLogin_MouseMove(object sender, MouseEventArgs e)
{
    if (leftFlag)
    {
        // 获取鼠标光标的位置(以屏幕坐标表示)。
        Point mouseSet = Control.MousePosition;
        // 如果直接把光标的位置给窗体的 Location 的话，会发现其实是设置给窗体的左上角了
        // 所以需要减去一开始鼠标按下时相对于窗体左上角的偏移量 mouseOff
        mouseSet.Offset(-mouseOff.X, -mouseOff.Y);
        Location = mouseSet;
    }
}
// 窗体的鼠标松开事件
private void FrmAdminLogin_MouseUp(object sender, MouseEventArgs e)
{
    // 松开鼠标左键，把 leftFlag 标记为 false
    if (leftFlag)
    {
        leftFlag = false;
    }
}
#endregion