Wizard控件的使用

Wizard控件的使用：

    Wizard控件使用多个步骤来描绘用户的输入信息，该控件内的每个步骤 均会给一个StepType。可以在当步骤到Complete时，对所有的数据进行处理。
   事件：需要隐藏信息的时候，可以在中间步骤中使用WizardStepChanged事件，其它的事件如点击完成、取消、下一步和上一步的时候的事件等。
   TemplateWizardStep，提供一个允许用户自定义模板生成步骤的方法。对它的访问，不能通过像其它步骤一样的直接访问方式，二是要通过它的模板ID来访问。所以，如果在Wizard中的步骤采用这个方式，访问数据的时候，要注意。

   

下边看看一般的做法：

拖控件到设计视图，点击智能标签的Auto Format为其设置格式。这里采用彩色型，Colorful。然后是添加步骤，在智能标签中选择：Add/Remove WizardSteps...，如图：

        步骤中的title表示名字，其余的，AllowReturn:是否运行步骤间通信，EnableTheming：是否允许使用主题，EnableViewState：是否允许保存往返信息，SkinID：使用的皮肤ID，StepType有好几种，一般来讲，Auto会自动检测为开始步骤还是中间步骤，但是完成步骤一定要手动选择Complete。在这里，第三步，我们使用了一个由模板步骤（TemplatedWizardStep）自定义的步骤，由于访问它的数据，需要通过其ID 来访问，使用设置ID为mb。如图：

       在完成步骤，手动选择Complete，如图：

      完成后，步骤算是添加好了，但是每一步骤还没有具体内容。首先解决向导的字体太小的问题。将Wizard控件拖大，但是，这个时候，发现左边的导航和右边的内容同时增大，需要将SideBarStyle下的Width属性指定宽度，根据具体情况而指定，这里指定100px。然后又有个问题，这个字体也太下了，所以呢，将Wizard控件的Font下的Size属性指定大小，这里指定1.2em。这里要注意，是Wizard控件的Font下的Size属性,不是其它任何自控件或子项目的Font属性。因为这个Wizard的属性实在太多了。

        还有一个问题，那就是，使用英语版本的VS，或是VWD时，默认的上一不，下一步，完成，取消这些按钮都是英语的，就像我。这里要比用中文的麻烦点点，要将StartNextButton设置成“下一步”，StepPreviousButtonText设置成“上一步”，
StepNextButtonText设置成“下一步”，FinishPreviousButtonText设置成“上一步”，FinishCompleteButtonText设置成“完成”，如果要在每一步中显示取消按钮，则要将DisplayCancelButton设置为true，并且把CancelButtonText设置为“取消”。

       现在来为每一步添加内容，首先需要编辑Wizard的模板，做个Header，就是添加个欢迎词。这里是通过智能标签的Edit Templated来做的，如图：

       然后，为“基本信息”添加控件，如图：ID分别是tbname和tbpws

   两个TextBox确实很难对齐，最后只好将前天的“用户名”和“密码”做成Label，然后通过设置Label的Width属性来控制。

   为“详细信息”添加控件，如图：ID分别是ddlsf，tbphoto，rdbgk

   再为兴趣爱好添加控件，如图：chk

   为会员等级添加控件，如图：ddldj

     完成步骤中，随便整了些来表示各步骤中的信息：

也就是几个标签和一个PlaceHolder。各步骤分别添加的什么控件和各控件的ID，就只好对照这代码看了，如下：

1. "Wizard1" runat="server" BackColor="#FFFBD6" 
2.             BorderColor="#FFDFAD" BorderWidth="1px" Font-Names="Verdana" Font-Size="1.2em" 
3.             Height="210px" StartNextButtonText="下一步" Width="405px" ActiveStepIndex="0" 
4.             FinishCompleteButtonText="完成" FinishPreviousButtonText="上一步" 
5.             StepNextButtonText="下一步" StepPreviousButtonText="上一步" 
6.             CancelButtonText="取消" DisplayCancelButton="True" 
7.             onactivestepchanged="Wizard1_ActiveStepChanged" 
8.             onfinishbuttοnclick="Wizard1_FinishButtonClick" 
9.             oncancelbuttοnclick="Wizard1_CancelButtonClick">
10.             
11.                 "server" title="基本信息">
12.                     "Label1" runat="server" Text="用户名：" Width="92px">
13.                     "tbname" runat="server">
14.                     
15.                     "Label2" runat="server" Text="密  码：" Width="92px">
16.                     "tbpws" runat="server">
17.                 
18.                 "server" title="详细信息">
19.                                     "Label5" runat="server" Font-Size="Medium" Height="20px" 
20.                         Text="所在省份：" Width="87px">
21.                     "ddlsf" runat="server" Font-Size="Medium" 
22.                         Width="126px">
23.                         重庆
24.                         北京
25.                         天津
26.                         上海
27.                         广东
28.                         广西
29.                         云南
30.                         浙江
31.                         四川
32.                     
33.                     
34.                     "Label6" runat="server" Font-Size="Medium" Height="20px" 
35.                         Text="电话号码：" Width="87px">
36.                     "tbphoto" runat="server">
37.                     
38.                     "Label7" runat="server" Font-Size="Medium" 
39.                         style="text-align: center" Text="是否公开详细信息：">
40.                     
41.                     "rdbgk" runat="server" Font-Size="Medium" 
42.                         RepeatDirection="Horizontal">
43.                         不
44.                         好吧
45.                     
46.                 
47.                 "mb" runat="server" Title="兴趣爱好">
48.                     
49.                         "chk" runat="server" Font-Size="Medium" RepeatColumns="3" 
50.                             RepeatDirection="Horizontal" Width="239px">
51.                             谈天
52.                             说地
53.                             军事
54.                             做梦
55.                             电脑
56.                             想你
57.                         
58.                     
59.                 
60.                 "server" Title="会员等级">
61.                     "ddldj" runat="server" Font-Size="Medium" Width="130px">
62.                         普通会员
63.                         VIP会员
64.                         超级会员
65.                     
66.                 
67.                 "server" StepType="Complete" Title="完成">
68.                     注册成功,您的注册信息如下,请牢记:
69.                     用户名:"lblname" runat="server" Text="Label">
70.                     
71.                     密码:"lblpws" runat="server" Text="Label">
72.                     
73.                     "lblsf" runat="server" Text="Label">
74.                     
75.                     "lblphoto" runat="server" Text="Label">
76.                     
77.                     您目前是"lbldj" runat="server" Text="Label">
78.                     
79.                     您订阅了以下相关期刊:
80.                     "ph" runat="server">
81.                 
82.             
83.             "White" />
84.             "White" BorderColor="#CC9966" 
85.                 BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" 
86.                 ForeColor="#990000" />
87.             "#990000" Font-Size="0.9em" VerticalAlign="Top" 
88.                 Width="100px" />
89.             "#FFCC66" BorderColor="#FFFBD6" BorderStyle="Solid" 
90.                 BorderWidth="2px" Font-Bold="True" Font-Size="0.9em" ForeColor="#333333" 
91.                 HorizontalAlign="Center" />
92.             
93.                 欢迎来到山高月大部落
94.             
95.         

 

      有点长，对照着做一次了，感觉还是比较简单。

 

      最后，要处理各步骤中的数据，这里只用了ActiveStepChanged和FinishButtonClick事件，其它事件可以在属性面板中看到。代码如下：

1.         protected void Wizard1_ActiveStepChanged(object sender, EventArgs e)
2.         {
3.             lblname.Text = tbname.Text;
4.             lblpws.Text = tbpws.Text;
6.             if (rdbgk.SelectedValue == "不")
7.             {
8.                 lblsf.Text = "用户隐藏了身份信息";
9.                 lblphoto.Visible = false;
10.             }
11.             else
12.             {
13.                 lblsf.Text = "省份是：" + ddlsf.SelectedValue;
14.                 lblphoto.Text = "电话号码是：" + tbphoto.Text;
15.             }
17.             //模板控件中的控件，需要经过这个方式，将里边的控件先取出来，然后再取值。
18.             CheckBoxList cb1 = (CheckBoxList)mb.ContentTemplateContainer.FindControl("chk");
19.             for (int i = 0; i < cb1.Items.Count; i++)
20.             {
21.                 if (cb1.Items[i].Selected)
22.                 {
23.                     Label lbl = new Label();
24.                     lbl.ID = "lbl" + i;
25.                     lbl.Text = cb1.Items[i].Text + "
    ";
26.                     ph.Controls.Add(lbl);
27.                 }
28.             }
30.             lbldj.Text = ddldj.SelectedValue;
31.         }
33.         protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
34.         {//完成的时候，在这个函数里边将信息写入数据库
35.             string name = "" + tbname.Text;
36.             Response.Write("");
37.         }

 

步骤太多，过段时间可能会忘，需要时间和实践来巩固和灵活。