继上一篇高仿QQ即时聊天软件开发系列之一开端之后，开始做登录窗口

废话不多说，先看效果，只有界面

可能还有一些细节地方没有做，例如那个LOGO嘛，不要在意这些细节

GIF虽短，可是这做起来真难，好吧因为我没玩过WPF所以难，因为感觉做出来之后也就那样

整体布局

整体是上下分，下面是左中右分

 <Grid>

         <Grid.RowDefinitions>

             <RowDefinition Height="27"><!--用于放窗口右上角关闭、最小化按钮--></RowDefinition>

             <RowDefinition Height="153"><!--和上一行共同用于放LOGO--></RowDefinition>

             <RowDefinition Height="150"><!--窗口下半部分--></RowDefinition>

         </Grid.RowDefinitions>

         <Grid.ColumnDefinitions>

             <ColumnDefinition Width="340"><!--占地方--></ColumnDefinition>

             <ColumnDefinition><!--放最小化关闭按钮--></ColumnDefinition>

         </Grid.ColumnDefinitions>

        <Grid Background="#EBF2F9" Grid.Row="2" Grid.ColumnSpan="2">

             <Grid.RowDefinitions>

                 <RowDefinition Height="10"></RowDefinition>

                 <RowDefinition Height="80"><!--窗口左下方的图片--></RowDefinition>

                 <RowDefinition><!--登录按钮--></RowDefinition>

             </Grid.RowDefinitions>

             <Grid.ColumnDefinitions>

                 <ColumnDefinition Width="30"></ColumnDefinition>

                 <ColumnDefinition Width="80">

                     <!--窗口左下方的图片-->

                 </ColumnDefinition>

                 <ColumnDefinition><!--用户名密码输入框--></ColumnDefinition>

                 <ColumnDefinition Width="80"><!--注册账号找回密码--></ColumnDefinition>

                 <ColumnDefinition Width="30"></ColumnDefinition>

             </Grid.ColumnDefinitions>

       </Grid>

 </Grid>

整体布局

无边框

这个很简单，只需设置WindowStyle就行

 <Window xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"  xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit"

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     x:Class="XC.LoginWindow"

         Title="LoginWindow" Height="330" WindowStyle="None" ResizeMode="NoResize" Width="421" Icon="Resources/images/app_big.ico" WindowStartupLocation="CenterScreen" MouseDown="Window_MouseDown" Name="login" Loaded="login_Loaded">

 </Window>

无边框

右上角关闭最小化按钮、可拖动效果

代码都比较简单，认真看一下都能看懂，不过多解释

 <StackPanel Panel.ZIndex="1" Grid.Column="1" Orientation="Horizontal" FlowDirection="RightToLeft">

             <Button Name="btnClose" Click="btnClose_Click" Width="30" Style="{DynamicResource styleBtnClose}"></Button>

             <Button Name="btnMin" Click="btnMin_Click" Width="30" Style="{DynamicResource styleBtnMin}"></Button>

         </StackPanel>

 <Style x:Key="styleBtnClose" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <StackPanel>

                             <Image Name="imgNormal" Source="Resources/images/sysbtn_close_normal.png" Visibility="Visible"></Image>

                             <Image Name="imgHover" Source="Resources/images/sysbtn_close_hover.png" Visibility="Collapsed"></Image>

                             <Image Name="imgDown" Source="Resources/images/sysbtn_close_down.png" Visibility="Collapsed"></Image>

                         </StackPanel>

                         <ControlTemplate.Triggers>

                             <Trigger Property="Button.IsMouseOver" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                             <Trigger Property="Button.IsPressed" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                         </ControlTemplate.Triggers>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

         <Style x:Key="styleBtnMin" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <StackPanel>

                             <Image Name="imgNormal" Source="Resources/images/sysbtn_min_normal.png" Visibility="Visible"></Image>

                             <Image Name="imgHover" Source="Resources/images/sysbtn_min_hover.png" Visibility="Collapsed"></Image>

                             <Image Name="imgDown" Source="Resources/images/sysbtn_min_down.png" Visibility="Collapsed"></Image>

                         </StackPanel>

                         <ControlTemplate.Triggers>

                             <Trigger Property="Button.IsMouseOver" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                             <Trigger Property="Button.IsPressed" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                         </ControlTemplate.Triggers>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>
  private void btnClose_Click(object sender, RoutedEventArgs e)

         {

             Close();

         }

         private void btnMin_Click(object sender, RoutedEventArgs e)

         {

             WindowState = System.Windows.WindowState.Minimized;

         }

         private void Window_MouseDown(object sender, MouseButtonEventArgs e)

         {

             if(e.LeftButton== MouseButtonState.Pressed)

             {

                 DragMove();

             }

         }
密码输入框

做到这个地方的时候，我就一直在想，微软你就不能支持一下placeholder效果吗？

为了能实现placeholder效果，疯狂谷歌，选择了一种看起来最简单的方案

 <Border CornerRadius="0,0,4,4" Grid.Row="1"  BorderBrush="#B5B5B5" BorderThickness="1,1,1,1">

                     <PasswordBox Margin="1" KeyUp="pbPassword_KeyUp" Name="pbPassword" BorderBrush="Transparent" Grid.Row="1" VerticalContentAlignment="Center" Background="{DynamicResource burshPassword}">

                     </PasswordBox>

                 </Border>

 <VisualBrush x:Key="burshPassword" AlignmentX="Left" AlignmentY="Center" Stretch="None">

             <VisualBrush.Visual>

                 <Label Content="密码" Foreground="Gray" />

             </VisualBrush.Visual>

         </VisualBrush>

最终代码就这么几行，可当时找这个方案差点没气死

解释一下，那Border是用于让密码框的边框为圆角，CornerRadius是指定圆角的半径，密码框只需要下边两个角是圆角，所以像代码中那样写。

重点在Background，这个是实现placeholder的关键。代码中为Background指定了一个动态资源，Key为brushPassword，而下面定义了这个资源也就是VisualBrush，这个东东可以把一个控件显示成为另一个控件的背景，像上面那样，把Label控件显示成为了PasswordBox的背景，然后Label上写个“密码”，设置一下颜色，placeholder效果就实现了

但这还不够，因为这样的话就算用户输入了字符，那个背景仍然会存在，所以

 private void pbPassword_KeyUp(object sender, KeyEventArgs e)

         {

             if (string.IsNullOrEmpty(pbPassword.Password))

             {

                 pbPassword.Background = (VisualBrush)Resources["burshPassword"];

             }

             else

             {

                 pbPassword.Background = null;

             }

         }

隐藏背景

这代码就简单多了，不多解释。这样，一个很简单的placeholder方案就出来了。在谷歌上面找的其他方案看着就晕了，不过下面这个还真的要晕过去。

用户名/邮箱输入组合框

这个是登录框的重头戏，因为ComboBox居然不支持Background属性，设置了半天一点效果都没有，我#@*&$^#@，吐槽完毕，详见另一篇文章高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

登录按钮
 <Button Name="btnLogin" Click="btnLogin_Click" Content="登录" Grid.Column="" Grid.Row="" Style="{DynamicResource styleBtnLogin}" Margin="0,13,0,0"></Button>

         <Style x:Key="styleBtnLogin" TargetType="Button">

             <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <StackPanel>

                             <Grid Name="imgNormal">

                                 <TextBlock Text="登  录" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="">

                                 </TextBlock>

                                 <Image Panel.ZIndex="" Source="Resources/images/button_login_normal.png" Visibility="Visible"></Image>

                             </Grid>

                             <Grid Name="imgHover" Visibility="Collapsed">

                                 <TextBlock Text="登  录" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="">

                                 </TextBlock>

                                 <Image Panel.ZIndex="" Source="Resources/images/button_login_hover.png" Visibility="Visible"></Image>

                             </Grid>

                             <Grid Name="imgDown" Visibility="Collapsed">

                                 <TextBlock Text="登  录" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Panel.ZIndex="">

                                 </TextBlock>

                                 <Image Panel.ZIndex="" Source="Resources/images/button_login_down.png" Visibility="Visible"></Image>

                             </Grid>

                         </StackPanel>

                         <ControlTemplate.Triggers>

                             <Trigger Property="Button.IsMouseOver" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgNormal" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                             <Trigger Property="Button.IsPressed" Value="True">

                                 <Trigger.Setters>

                                     <Setter Property="Visibility" TargetName="imgHover" Value="Collapsed"></Setter>

                                     <Setter Property="Visibility" TargetName="imgDown" Value="Visible"></Setter>

                                 </Trigger.Setters>

                             </Trigger>

                         </ControlTemplate.Triggers>

                     </ControlTemplate>

                 </Setter.Value>

             </Setter>

         </Style>

登录按钮

其他
<StackPanel Grid.Column="" Grid.Row="">

                <TextBlock Margin="0,8,0,0" Height="" VerticalAlignment="Center">

                    <Hyperlink TextDecorations="None">

                       注册账号

                    </Hyperlink>

                </TextBlock>

                <TextBlock  Height="">

                    <Hyperlink TextDecorations="None">

                       找回密码

                    </Hyperlink>

                </TextBlock>

            </StackPanel>

好了，整个界面就是这样了，除了用户组合框有点难（其实我感觉是特别难）以外，其他的都没什么。图片啥的到QQ安装路径找rdb文件解包吧

高仿QQ即时聊天软件开发系列之二登录窗口界面的更多相关文章

  1. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  2. 高仿QQ即时聊天软件开发系列之一开端

    前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...

  3. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  4. 仿QQ局域网聊天软件

    1 目的   想复习一下TCP/IP协议,再结合一下以前学的Qt的知识,加上前段时间学的MySQL数据库操作,所以写了个"仿QQ局域网聊天软件"小项目,只实现了一部分功能,还没写完 ...

  5. Android 高仿微信即时聊天 百度云为基础的推

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天最终有幸利用百 ...

  6. “仿QQ局域网聊天软件”项目-常用编程技巧总结

    1 信号槽篇 qqLogin loginDialog; QQ mainDialog; loginDialog.show(); //连接登陆窗口和主窗口 QObject::connect(&lo ...

  7. 高仿QQ的即时通讯应用带服务端软件安装

    Android 基于xmpp协议,smack包,openfire服务端(在下面)的高仿QQ的即时通讯实现.实现了注册,登录,读取好友列表,搜索好友,添加分组,添加好友,删除好友,修改心情,两个客户端之 ...

  8. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  9. 基于环信的仿QQ即时通讯的简单实现

    代码地址如下:http://www.demodashi.com/demo/11645.html 我的博客地址 之前一直想实现聊天的功能,但是感觉有点困难,今天看了环信的API,就利用下午的时间动手试了 ...

随机推荐

  1. Struts2 文件下载

    使用Struts2做一个简单的文件下载. 首先,导包,写配置文件就不说了. 进入主题. 文件下载操作类:FileDownload.java import java.io.InputStream; im ...

  2. flask开发restful api系列(6)-配置文件

    任何一个好的程序,配置文件必不可少,而且非常重要.配置文件里存储了连接数据库,redis的用户密码,不允许有任何闪失.要有灵活性,用户可以自己配置:生产环境和开发环境要分开,最好能简单的修改一个东西, ...

  3. runtime 运行时机制 完全解读

    runtime 运行时机制 完全解读   目录[-] import import 我们前面已经讲过一篇runtime 原理,现在这篇文章主要介绍的是runtime是什么以及怎么用!希望对读者有所帮助! ...

  4. Deep Residual Learning for Image Recognition（MSRA-深度残差学习）

    转自:http://blog.csdn.net/solomonlangrui/article/details/52455638   ABSTRACT:           神经网络的训练因其层次加深而 ...

  5. 磁盘IO单线程顺序写时最快的，如果多线程写，磁盘的磁头要不断重新寻址，所以写入速度反而会慢

    (1) 读写最好还是不要多线程,硬盘读写的速度有限,单线程时已经满负荷了,多线程又会增加线程之间的切换,会增加时间. 如果想增加读写速度,应该增加硬盘,做raid (2)首先是硬盘的写入是串行的,CP ...

  6. Mysql时间戳开始时间1970-01-01 00:00:00和PHP date慢8小时

    mysql> select unix_timestamp('1970-01-01 00:00:01');+---------------------------------------+| un ...

  7. 【HDOJ】1500 Chopsticks

    DP. #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm ...

  8. xcode教程,MAC常用命令

    Vmware中为Mac Os安装vmtools 开机后,在Finder中就可以找到Darwin.iso,进行安装. 附件:vmtools for macos下载地址 https://softwareu ...

  9. COJ 0801 非传统题（一）

    非传统题(一) 难度级别:A: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 大家好!我是COJ第一道非传统题,是不是感觉非常的excite ...

  10. Android 5.0 之SwipeRefreshLayout

    金田 下拉刷新是一种比较常用的效果,Android 5.0之前官方并未提供类似的控件,App中主要是用的第三方库,例如PullToRefresh,ActionBar-PullToRefresh等.刚好 ...