用WPF做一个像QQ登陆界面一样的窗体

------- Windows Phone 7手机开发、 .Net培训、期待与您交流! -------


           这几天开始学习WPF,这东西确实好用。按我的习惯,边学边做,边做边学。听说WPF可以很容易做出精美的UI,刚好看到QQ登陆界面挺好的,就想着模仿着做个,也顺便当我这几天做的项目的登陆界面。下面记录了我做的过程中碰到的种种小麻烦,这些东西虽然小,但是都是亲身体验过,印象深刻。


要做的效果如下图:       


那么就让我们开始吧!

分析: 上面的这个界面我将其化繁为简。
本质上,这个窗体内有一个表格,将其分成了上下2部分。
接着,上面部分内放了个容器,容器内是另一个表格,用于放置头像,账号密码框等小控件。
最后下面部分内放了个按钮。

第一步: 用Grid将窗体划分为2部分




第二步: 上面部分内放置一个容器StackPanel,在容器中再放置一个3行3列的表格。



第三步:表格的第一列用于放头像图片,图片跨3行。
第一行二列放置一个COMBOX,第二行二列放一个TEXTBOX,都是跨2列。
第三行二列放一个CHECKBOX,第三行三列放一个CHECKBOX。
遇到的麻烦:放入控件运行后,COMBOX不能输入东西,只能下拉。
和WINFORM中的COMBOX不一样。
但既然是同种控件,没理由不一样。
在属性里查找后,发现一个IsEditable的属性。
哈哈,就是它了,还好英文好,知道大概是干嘛的,翻译出来就是可编译。
于是加上了IsEditable="True"的代码,妥妥了。酷~

 
记住密码
记住账号



哈哈,有点样子了。
第四步:下面部分放入一个BUTTON。
遇到的麻烦:放入BUTTON后,定义了它的一些属性。

我故意把登陆2个字分得很开,以为他们在按钮上也会分得很开,结果没效果!看来将文本写在><之间没法识别空格。
只好老老实实写上属性了。顺便用FONTSIZE修改了文字大小。


第五步:加上背景,润色润色。
遇到的麻烦:怎么给表格加背景?表格的属性里只有Background,背景色。
没有winform中的BackgroundImage属性。研究过后才发现。
不能直接写在属性里,要单独写。这里面有个,可以设置背景图片,就是它了!。
 
           

OK,看效果吧。

不是很好看。。。。。其实我想做成设计时的那样的边框,不知道怎么弄,这个待以后研究。。。
想做成的窗体边框样式:

这个就好看多了,赶紧学习去,早日牛B起来!

------- Windows Phone 7手机开发、 .Net培训、期待与您交流! -------

你可能感兴趣的:(用WPF做一个像QQ登陆界面一样的窗体)