用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"的代码，妥妥了。酷~
<Image Grid.RowSpan="3" Source="girl.jpg" ></Image>
<ComboBox Grid.Column="1" Grid.ColumnSpan="2" IsEditable="True" Name="txtUserName" VerticalAlignment="Top" Height="30" Margin="10,0,0,0" Background="White"></ComboBox>
<TextBox Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Name="txtPwd" VerticalAlignment="Top" Height="30" Margin="10,0,0,0"></TextBox> 
<CheckBox Grid.Column="1" Grid.Row="2" VerticalAlignment="Bottom" Margin="10,0,0,0" Name="ckbPwd">记住密码</CheckBox>
<CheckBox Grid.Column="2" Grid.Row="2" VerticalAlignment="Bottom" Margin="10,0,0,0" Name="ckbUser">记住账号</CheckBox>



哈哈，有点样子了。
第四步：下面部分放入一个BUTTON。

遇到的麻烦：放入BUTTON后，定义了它的一些属性。

<Button Grid.Row="1" Width="180"
Height="40" HorizontalAlignment="Center" Background="White" Name="login">登     陆</Button>

我故意把登陆2个字分得很开，以为他们在按钮上也会分得很开，结果没效果！看来将文本写在><之间没法识别空格。
只好老老实实写上属性了。顺便用FONTSIZE修改了文字大小。
<Button Grid.Row="1" Width="180" Height="40" HorizontalAlignment="Center" Background="White" Name="login" Content="登       录" FontSize="14"></Button>



第五步：加上背景，润色润色。

遇到的麻烦：怎么给表格加背景？表格的属性里只有Background，背景色。

没有winform中的BackgroundImage属性。研究过后才发现。
不能直接写在属性里，要单独写<Grid.Background>。这里面有个<ImageBrush>,可以设置背景图片，就是它了！。
 <Grid.Background>

            <ImageBrush ImageSource="bg.jpg"></ImageBrush>
</Grid.Background>

OK，看效果吧。



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



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

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