WPF仿TIM登录界面

WPF基于irectX 9/10技术，带来了前所未有的3D界面，而且其图形向量渲染引擎也大大改进了传统的2D界面，今天我就仿TIM，做一个登录界面。

首先我们来分析一下TIM登录界面的结构

既然我们把它分成了三行三列，那么我们就可以用Grid元素来布局。Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。
新建一个WPF项目，准备好项目需要用到的图片素材，设置窗体属性样式

<Window x:Class="WpfDemo.LoginDemo"
   	 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   	 /****省略********/
     Title="登录" //窗体标题
     Height="320" //高度
     Width="420"	//宽度
     Icon="Image/TIM.ico"	//窗体图标
     ResizeMode="NoResize"	//窗体尺寸改变模式（NoResize：不可改变）
     Background="#EBF2F9"	//背景色
     AllowsTransparency="False"	//窗体是否透明
     WindowStyle="none"		//窗体样式类型
     WindowStartupLocation="CenterScreen">	
  </Window>
     //窗体出现时的位置（CenterScreen：在屏幕中心） 

然后我们就可以使用Grid元素来划分网格

<Grid>
	//RowDefinitions和ColumnDefinitions：可以理解为行的集合和列的集合
	<Grid.RowDefinitions>
	    <RowDefinition Height="180" />
	    <RowDefinition Height="*" />
	    <RowDefinition Height="50" />
	</Grid.RowDefinitions>
	//分别在集合中添加了三行和三列，并设置了高度或宽度
	//【*】表示填充剩余部分的空间
	<Grid.ColumnDefinitions>
	    <ColumnDefinition Width="120" />
	    <ColumnDefinition Width="*" />
	    <ColumnDefinition Width="120" />
	</Grid.ColumnDefinitions>
 </Grid>

这个时候我们的界面就变成了这个样子，是不是已经有一个基本的雏形了

接下来就是要将界面上的元素一个个放置到对应的位置上，首先是第一行占了三列的背景图片

<Image Source="Image/title.png" Stretch="UniformToFill" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" />
//Source：图片的路径   Stretch：图片大小格式（居中或者填充）   
//Grid.Row：占据的行（索引）   //Grid.Column：占据的列（索引）   //Grid.ColumnSpan：占据多少列

然后就是第二行的user头像、Text、CheckBox和文本链接

 <!--User头像-->
        <Image Source="Image/user.png" Grid.Row="1" Grid.Column="0" Margin="21,5,0,0" />
        <!--账号密码-->
        <TextBox Height="30" Width="180" FontSize="14" MaxLength="20" TextBlock.LineHeight="22" TextBlock.LineStackingStrategy="BlockLineHeight"
                 Foreground="Black" BorderBrush="#ccc" Grid.Row="1" Grid.Column="1" Margin="0,10,0,50"/>
        <PasswordBox Height="30" Width="180" FontSize="14" MaxLength="20" TextBlock.LineHeight="22" TextBlock.LineStackingStrategy="BlockLineHeight"
                 Foreground="Black" BorderBrush="#ccc" Grid.Row="1" Grid.Column="1" Margin="0,40,0,20"/>
        <!--记住密码等CheckBox-->
        <CheckBox Grid.Row="1" Grid.Column="1" Foreground="#8D9195" BorderBrush="#8d9195" FontSize="11" TextBlock.LineHeight="16"
                  TextBlock.LineStackingStrategy="BlockLineHeight" Margin="0,75,0,-25">
            记住密码
        </CheckBox>
        <CheckBox Grid.Row="1" Grid.Column="1" Foreground="#8D9195" BorderBrush="#8d9195" FontSize="11" TextBlock.LineHeight="16"
                  TextBlock.LineStackingStrategy="BlockLineHeight" Margin="110,75,0,-35" Grid.RowSpan="2">
            自动登录
        </CheckBox>
        <!--注册账号-->
        <AccessText Grid.Column="2" Margin="20,19,-20,-59" FontSize="11" Foreground="#2786E4" Cursor="Hand" Grid.Row="1">
            注册账号
        </AccessText>
        <AccessText Grid.Column="2" Margin="20,50,-20,-59" FontSize="11" Foreground="#2786E4" Cursor="Hand" Grid.Row="1">
            找回密码
        </AccessText>

同样是通过Grid的附加属性Row和Column来调整控件的位置，再通过Margin进行微调，设置好Size、Foreground等属性。

最后就是第三行的控件添加，我们依葫芦画瓢

        <!--添加用户icon-->
        <Image Source="Image/adduser.png" Width="30" Height="30" Margin="10,15,80,10" Grid.Row="2" />
        <!--login按钮-->
        <Button Content="登   录" Height="30" Width="180" FontSize="12"
                Background="SkyBlue" Cursor="Hand" Foreground="White" 
                BorderBrush="SkyBlue" Grid.Column="1" Margin="0,10" Grid.Row="2"/>
        <!--二维码-->
        <Image Source="Image/QRcode.png" Width="30" Height="30" Grid.Column="2" Margin="80,15,10,10" Grid.Row="2" />

这样我们的界面就搭建完成了，启动看看效果

模仿的还是挺成功的！ 当然，只是界面而已，要实现登录等功能还需努力！