向 Silverlight2.0 出发（三）

  

注：sil Beta2.0 版是没有密码输入框控件的，只有在正式版中微软才把它放到SDK中，为了使用Beta2.0版所没有的控件，小生狠狠心，用了1天的时间下载了VS2008SP1补丁包和Sil正式测试版，安装使用还一切顺利，目前没什么大问题出现，呵呵！

 

打开VS2008 ，新建SilverLight2.0工程，命名 LoginTest 。

在拆分环境下找到默认打开的 Page.xaml 文件，输入如下xaml：

1. <UserControl x:Class="LoginTest.Page"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="uc1" >
4.     <Grid x:Name="LayoutRoot" Background="#46461F" >
5.         <!-- 表格有三行 -->
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="*" />
8.             <RowDefinition Height="20" />
9.             <RowDefinition Height="*" />
10.         </Grid.RowDefinitions>
11.         
12.         <!-- 设置第一行的列 -->
13.         <Grid Grid.Row="1" ShowGridLines="False">
14.             <Grid.ColumnDefinitions>
15.                 <ColumnDefinition Width="*" />
16.                 <ColumnDefinition Width="70" />
17.                 <ColumnDefinition Width="130" />
18.                 <ColumnDefinition Width="*" />
19.             </Grid.ColumnDefinitions>
20.             <TextBlock x:Name="lbl_uname" Grid.Column="1" Height="15" Width="70"
21.                    TextAlignment="Right" Text="用  户  名："
22.                    VerticalAlignment="Stretch" Foreground="White" />
23.             <TextBox x:Name="txt_uname" Grid.Row="2" Grid.Column="2" Height="20" Width="130"
24.                  TextAlignment="Left" VerticalAlignment="Bottom"  />
25.         </Grid>        
26.     </Grid>
27. </UserControl>

输入完毕可以看到视图设计器出现如下布局：

这一段xaml的意思为：

在UserControl容器内，sil生成了一个3行的表格。第1与第3行的高度为"*"，表示这两行将把除开第2行(height="20")高度20部份以外的空间平均分配，这样在整个浏览器空间中，会刚好把第2行挤压在浏览器垂直高度的中央，它将占据有20px的高度。

接着在表格的第1行(grid.row = '1')设置列，而列的边框显示为不显示(ShowGridLines="False")，列将设置为4列，除去第2、3列列宽有指定外，第1、4列列宽都是自适应(width="*")的。

小生在学用Grid布局时，不自觉的会把Grid当html的<table>来看，可能是以前画table画多了...  不过真的，两者的意思好像差不多一样，本着控件会用就OK的精神，小生决定不深入思考了，继续做试验....

TextBlock是Sil 1.1版本就有的文本显示控件，类似于VB中的Label，用以显示文本或承载一些显示资源。看到这里，会发现各种控件都有个共同的属性，x:Name ，这个属性表示控件名，后台代码就是根据这个属性找到每个控件，继而操作指定的控件。

 

用户名输入框布局完毕，可以同理编写密码输入框、验证码审核等登录基本需求。看下面的xaml：

1. <Grid Grid.Row="3" ShowGridLines="False">
2.             <Grid.ColumnDefinitions>
3.                 <ColumnDefinition Width="*" />
4.                 <ColumnDefinition Width="70" />
5.                 <ColumnDefinition Width="130" />
6.                 <ColumnDefinition Width="*" />
7.             </Grid.ColumnDefinitions>
8.             <TextBlock x:Name="lbl_upwd" Grid.Column="1" Height="15" Width="70"
9.                    TextAlignment="Right" Text="密     码："
10.                    VerticalAlignment="Bottom" Foreground="White" />
11.             <PasswordBox x:Name="txt_upwd" Grid.Column="2" Height="20" Width="130"
12.                   VerticalAlignment="Bottom"  />
13.         </Grid>
15.         <Grid Grid.Row="5" ShowGridLines="False">
16.             <Grid.ColumnDefinitions>
17.                 <ColumnDefinition Width="*" />
18.                 <ColumnDefinition Width="70" />
19.                 <ColumnDefinition Width="70" />
20.                 <ColumnDefinition Width="60" />
21.                 <ColumnDefinition Width="*" />
22.             </Grid.ColumnDefinitions>
24.             <TextBlock x:Name="lbl_uyzm" Grid.Column="1" Height="15" Width="70"
25.                        TextAlignment="Right" Text="验  证  码："
26.                        VerticalAlignment="Bottom" Foreground="White" />
27.             <TextBox x:Name="txt_uyzm" Grid.Column="2" Height="20" Width="70" MaxLength="4"
28.                      TextAlignment="Center" VerticalAlignment="Bottom"  />
29.             <Image x:Name="img_uyzm" Grid.Column="3" Height="20" Width="70"
30.                    VerticalAlignment="Bottom" Source="image/111.jpg" HorizontalAlignment="Center"  />
31.         </Grid>
33.         <Grid Grid.Row="7" ShowGridLines="False">
34.             <Grid.ColumnDefinitions>
35.                 <ColumnDefinition Width="*" />
36.                 <ColumnDefinition Width="100" />
37.                 <ColumnDefinition Width="70" />
38.                 <ColumnDefinition Width="*" />
39.             </Grid.ColumnDefinitions>
40.             <Button x:Name="btn_ok" Grid.Column="1" Content="确定" VerticalAlignment="Center" HorizontalAlignment="Center"
41.                     Width="70" Height="20" Foreground="CadetBlue" />
42.             <Button x:Name="btn_clear" Grid.Column="2" Content="取消" VerticalAlignment="Center" HorizontalAlignment="Center"
43.                     Width="70" Height="20" Foreground="CadetBlue" />
44.         </Grid>

根据用户名输入的编写过程，很容易可以写出一个简单的登录布局界面，当然是还没有后台支持的。把上面的标记代码加入UserControl，运行后如下：

 

明天试着把后台代码糅合进去。