7 files changed, 83 insertions, 5 deletions
diff --git a/.gitattributes b/.gitattributes
index 365361e6..def0017f 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -229,6 +229,8 @@ demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page -text
 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.php -text
 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page -text
 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.php -text
+demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page -text
+demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php -text
 demos/quickstart/protected/pages/Controls/Samples/config.xml -text
 demos/quickstart/protected/pages/Controls/Simple.page -text
 demos/quickstart/protected/pages/Controls/Standard.page -text
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page
index 05ed32ec..3abf0b5c 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page
@@ -5,7 +5,8 @@
 <com:TWizard ID="Wizard1"
 		BackColor="#FFFBD6"
 		Width="400px"
-		SideBarStyle.Width="100px"
+		SideBarStyle.Width="120px"
+        HeaderText="Please let us know your preference"
 		OnCompleteButtonClick="wizardCompleted" >
 
   <com:TWizardStep Title="Step 1">
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
index ea01e320..2ac672d8 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
@@ -8,13 +8,14 @@
         BackColor="#EFF3FB"
         BorderColor="#B5C7DE"
         BorderWidth="1px"
+        BorderStyle="Solid"
         HeaderText="Please let us know your preference"
 		SideBarStyle.Width="100px"
 		SideBarStyle.Height="100px"
 		SideBarStyle.BackColor="#507CD1"
 		SideBarStyle.HorizontalAlign="Center"
 		StepStyle.HorizontalAlign="Center"
-		NavigationStyle.HorizontalAlign="Right"
+		NavigationStyle.HorizontalAlign="Center"
 		NavigationButtonStyle.BackColor="White"
 		NavigationButtonStyle.BorderColor="#507CD1"
 		NavigationButtonStyle.BorderStyle="Solid"
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page
new file mode 100644
index 00000000..89a2b8b3
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page
@@ -0,0 +1,51 @@
+<com:TContent ID="body">
+
+<h2>Using Templated Wizard Steps</h2>
+
+<com:TWizard ID="Wizard1"
+		BackColor="#FFFBD6"
+		Width="400px"
+		SideBarStyle.Width="120px"
+        HeaderText="Please let us know your preference"
+		OnCompleteButtonClick="wizardCompleted" >
+
+  <com:TWizardStep Title="Step 1">
+    <p>
+    Your favorite color:
+    <com:TDropDownList ID="DropDownList1">
+      <com:TListItem Value="Red" />
+      <com:TListItem Value="Blue" />
+      <com:TListItem Value="Green" />
+      <com:TListItem Value="Purple" />
+      <com:TListItem Value="Black" />
+      <com:TListItem Value="Yellow" />
+      <com:TListItem Value="Orange" />
+      <com:TListItem Value="Pink" />
+      <com:TListItem Value="Cyan" />
+    </com:TDropDownList>
+    </p>
+  </com:TWizardStep>
+
+  <com:TTemplatedWizardStep ID="Step2" Title="Templated Step">
+    <prop:ContentTemplate>
+      <p>
+      Your favorite Sport:
+      <com:TDropDownList ID="DropDownList2">
+        <com:TListItem Value="Baseball" />
+        <com:TListItem Value="Football" />
+        <com:TListItem Value="Tennis" />
+      </com:TDropDownList>
+      </p>
+    </prop:ContentTemplate>
+  </com:TTemplatedWizardStep>
+
+  <com:TWizardStep Title="Complete" StepType="Complete">
+    <h3>Thank you for your answer!</h3>
+    <p>
+    <com:TLabel ID="Result1" /><br/><br/>
+    <com:TLabel ID="Result2" />
+    </p>
+  </com:TWizardStep>
+</com:TWizard>
+
+</com:TContent>
+\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php
new file mode 100644
index 00000000..4ab6d08b
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php
@@ -0,0 +1,12 @@
+<?php
+
+class Sample5 extends TPage
+{
+	public function wizardCompleted($sender,$param)
+	{
+		$this->Result1->Text="Your favorite color is: " . $this->DropDownList1->SelectedValue;
+		$this->Result2->Text="Your favorite sport is: " . $this->Step2->DropDownList2->SelectedValue;
+	}
+}
+
+?>
+\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page
index 0de4a44a..29718930 100644
--- a/demos/quickstart/protected/pages/Controls/Wizard.page
+++ b/demos/quickstart/protected/pages/Controls/Wizard.page
@@ -67,22 +67,33 @@ In this sample, we use wizard to collect user's preference of color. In the firs
 
 <h3>Customizing Wizard Navigation</h3>
 <p>
-Bidirectional,
-Unidirectional,
-Non-linear
+Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of navigation among them:
 </p>
+<ul>
+  <li>Bidirectional - Users can navigate forward and backward along a sequence of wizard steps. User input data is usally collected at the last step. This is also known as commit-at-the-end model. It is the default navigation way that <tt>TWizard</tt> supports.</li>
+  <li>Unidirectional - Users can navigate forward along a sequence of wizard steps. Backward move is not allowed. User input data is usally collected step by step. This is also known as command-as-you-go model. To disallow backward move to a specific step, set its <tt>AllowReturn</tt> property to false.</li>
+  <li>Nonlinear - User input in a step determines which step to go next. To do so, set <tt>ActiveStepIndex</tt> to the step that you want the user to go to. In this case, when a user clicks on the previous button in the navigation panel, the previous step that they visited (not the previous step in the sequential order) will become visible.</li>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample3" />
 
 <h3>Using Templates in Wizard</h3>
 <p>
+<tt>TWizard</tt> supports more concrete control of its outlook through templating. In particular, it provides the following template properties that allow complete customization of the wizard's header, navigation and side bar.
 </p>
 <ul>
   <li>Header - <tt>HeaderTemplate</tt>.</li>
   <li>Navigation - <tt>StartNavigationTemplate</tt>, <tt>StepNavigationTemplate</tt>, <tt>FinishNavigationTemplate</tt>.</li>
   <li>Side bar - <tt>SideBarTemplate</tt>.</li>
 </ul>
+Note about side bar button IDs, navigation button commands
+headertext vs. headertemplate
+tablelayout vs pure div layout
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample4" />
 
 <h3>Using Templated Wizard Steps</h3>
 <p>
+Wizard steps can also be templated. By using <tt>TTemplatedWizardStep</tt>, one can customize step content and navigation through its <tt>ContentTemplate</tt> and <tt>NavigationTemplate</tt> properties, respectively. This is useful for control developers to build specialized wizards, such as user registration, shopping carts, etc.
 </p>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample5" />
 
 </com:TContent>
 \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/wizard.gif b/demos/quickstart/protected/pages/Controls/wizard.gif
index 96765ee8..9faf580d 100644
--- a/demos/quickstart/protected/pages/Controls/wizard.gif
+++ b/demos/quickstart/protected/pages/Controls/wizard.gif