Improving the Test Drive section

docs/get-started/test-drive/add-a-control.md

@@ -14,17 +14,58 @@ So far, the main window of your application displays only a text string. On this
 Avalonia contains a built-in control that creates a button. Follow this procedure to replace the text string currently in the `Window`'s content zone with a button control.
 
 - Stop the app if it is running.
-- Locate
+- Locate the highlighted line of XAML in the `MainWindow.xaml` file. 
 ```xml title='XAML' 
-<TextBlock Text="text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:vm="using:GetStartedApp.ViewModels"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
+        x:Class="GetStartedApp.Views.MainWindow"
+        x:DataType="vm:MainWindowViewModel"
+        Icon="/Assets/avalonia-logo.ico"
+        Title="GetStartedApp">
+
+    <Design.DataContext>
+        <!-- This only sets the DataContext for the previewer in an IDE,
+             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
+        <vm:MainWindowViewModel/>
+    </Design.DataContext>
+
+    // highlight-next-line
+    <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+
+</Window>
 ```
-in the `MainView.axaml` file.. 
-- Delete the entire line.
-- Insert a `Button` tag as shown:
+
+- Replace the entire line with the following:
 ```xml title='XAML'
   <Button>Calculate</Button>
 ```
-<img className="center" src={CalculateButton} alt="" />
+- Your XAML should now look like this: 
+```xml title='XAML'
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:vm="using:GetStartedApp.ViewModels"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
+        x:Class="GetStartedApp.Views.MainWindow"
+        x:DataType="vm:MainWindowViewModel"
+        Icon="/Assets/avalonia-logo.ico"
+        Title="GetStartedApp">
+
+    <Design.DataContext>
+        <!-- This only sets the DataContext for the previewer in an IDE,
+             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
+        <vm:MainWindowViewModel/>
+    </Design.DataContext>
+
+    // highlight-next-line
+    <Button>Calculate</Button>    
+</Window>
+```
 
 :::tip
 If you're using the previewer, you will see the button appear in the preview pane as soon as the XAML is valid. You can 

docs/get-started/test-drive/add-some-layout.mdx

@@ -0,0 +1,85 @@
+---
+id: add-some-layout
+title: Add Some Layout
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import StackPanelZonesDiagram from '/img/get-started/test-drive/stackpanel-zones.png';
+
+Avalonia provides a range of built-in controls to help you layout the visual elements of an application. On this page, 
+you will see how to use some of these layout controls.
+
+At this stage, your application has a single button located in the content zone of the main window.
+
+In fact, an Avalonia `Window` allows only one control in its content zone. To show multiple visual elements, you 
+must use a layout control that allows multiple controls within its content zone.
+
+## StackPanel
+
+The `StackPanel` control lays out a sequence of controls in the order they are defined in XAML. By default, it lays out 
+in a vertical stack but this can be changed to horizontal with its `Orientation` property.
+
+<img src={StackPanelZonesDiagram} alt="" />
+
+```xml
+<StackPanel>
+    <TextBlock>1</TextBlock>
+    <TextBlock>2</TextBlock>
+</StackPanel>
+```
+
+## TextBlock
+
+The `TextBlock` control allows extensive styling of its contained text.
+
+To take the example forward, add a `StackPanel` as follows (include the preexisting `Button` XAML):
+
+```xml
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:vm="using:GetStartedApp.ViewModels"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
+        x:Class="GetStartedApp.Views.MainWindow"
+        x:DataType="vm:MainWindowViewModel"
+        Icon="/Assets/avalonia-logo.ico"
+        Title="GetStartedApp">
+
+    <Design.DataContext>
+        <!-- This only sets the DataContext for the previewer in an IDE,
+             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
+        <vm:MainWindowViewModel/>
+    </Design.DataContext>
+
+// highlight-start
+    <StackPanel>
+        <Border Margin="5" CornerRadius="10" Background="LightBlue">
+            <TextBlock Margin="5"
+                       FontSize="24" 
+                       HorizontalAlignment="Center"
+                       Text="Temperature Converter">
+            </TextBlock>
+        </Border>
+
+        <Button HorizontalAlignment="Center">Calculate</Button>
+    </StackPanel>
+    // highlight-end
+</Window>
+
+```
+
+<ThemedImage
+        alt="Tempature StackPanel"
+        className="center"
+        sources={{
+            light: useBaseUrl('/img/get-started/test-drive/temperature-stackpanel-light.png'),
+            dark: useBaseUrl('/img/get-started/test-drive/temperature-stackpanel-dark.png'),
+        }}
+        />
+
+:::info
+You can explore the other layout controls in Avalonia using the reference [here](../../reference/controls/layout-controls.md).
+:::
+
+On the next page, you will add some inputs to the middle of the window.

docs/get-started/test-drive/create-a-project.md → docs/get-started/test-drive/create-a-project.mdx

@@ -3,11 +3,8 @@ id: create-a-project
 title: Create and Run a Project
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
-import RiderSplashScreenshot from '/img/get-started/test-drive/rider-splashscreen.png';
-import RiderSolutionScreenshot from '/img/get-started/test-drive/rider-solution.png';
 import VsFindAvaloniaTemplateScreenshot from '/img/get-started/test-drive/vs-find-avalonia-template-screenshot.png';
 import VsNewAvaloniaProjectScreenshot from '/img/get-started/test-drive/vs-new-avalonia-project-screenshot.png';
 import RiderRunScreenshot from '/img/get-started/test-drive/rider-run.png';
@@ -22,45 +19,43 @@ import vscode7 from '/img/get-started/test-drive/vscode-launch-app.png';
 import vscode8 from '/img/get-started/test-drive/vscode-app-running.png';
 
 
-## Install Templates
-
-Before starting, ensure that you have [installed the Avalonia templates](../install.md):
-
-```bash title='Bash'
-dotnet new install Avalonia.Templates
-```
-
 ## Create the Project
 
 To get started, we're going to use the MVVM Avalonia template: `Avalonia MVVM Application` (or `avalonia.mvvm` in the CLI).
 
-<Tabs groupId="ide">
-  <TabItem value="cli" label="Command Line" default>
-Run the command:
-
-```bash title='Bash'
-dotnet new avalonia.mvvm -o GetStartedApp
-```
-
-This will create a new folder called `GetStartedApp` containing the new project.
-  </TabItem>
+<Tabs groupId="ide">  
   <TabItem value="rider" label="Rider">
 
-- On the Rider startup screen, select **New Solution**
-
-<img className="center" src={RiderSplashScreenshot} width="600"/>
-
-- In the sidebar, scroll down and select **Avalonia .NET MVVM App**
-- Type `GetStartedApp` in the **Solution Name** field
-- Click **Create**
+1. On the Rider startup screen, select **New Solution** to bring up the `New Solution` Wizard. If you have installed the [Avalonia Templates](../install.md), then you will see three options.
+    * **Avalonia .NET App:** A template for desktop apps (Windows, macOS & Linux) that uses code-behind rather than MVVM.
+    * **Avalonia .NET MVVM App:** A template for desktop apps (Windows, macOS & Linux) that uses MVVM (by default with RxUI).
+    * **Avalonia Cross-Platform Application:** A template for all supported platforms (Windows, macOS, Linux, iOS, Android and WASM). This template requires additional workloads. 
+
+2. In the sidebar, scroll down and select `Avalonia .NET MVVM App`
+<ThemedImage
+            alt="Create Avalonia Solution with JetBrains Rider"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/rider-new-solution-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/rider-new-solution-dark.png'),
+            }}
+            />
+3. Type `GetStartedApp` in the **Solution Name** field
+4. Click **Create**
 
 The template will create a new solution and project.
 
-<img className="center" src={RiderSolutionScreenshot} width="600"/>
+<ThemedImage
+            alt="Create Avalonia Solution with JetBrains Rider"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/rider-solution-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/rider-solution-dark.png'),
+            }}
+            />
 
   </TabItem>
   <TabItem value="vs" label="Visual Studio">
-
 - In **Visual Studio**, click **Create a new project**.
 - Type `Avalonia` in the search box.
 - Click **Avalonia Application** then click **Next**.
@@ -78,7 +73,6 @@ The template will create a new solution and two new projects. `GetStartedApp` is
 <img className="center" src={VsNewAvaloniaProjectScreenshot} />
 
   </TabItem>
-
   <TabItem value="vsc" label="Visual Studio Code">
      * Bring up the Command Palette using `⇧ ⌘ P` and then type ".NET" and find and select the **.NET: New Project** command.
      <img className="center" src={vscode1} />
@@ -89,20 +83,22 @@ The template will create a new solution and two new projects. `GetStartedApp` is
     * You'll need to provide a path for where the project should be created. Do this, and then press **Create project**
     <img className="center" src={vscode4} />
   </TabItem>
+  <TabItem value="cli" label="Command Line" default>
+Run the command:
+
+```bash title='Bash'
+dotnet new avalonia.mvvm -o GetStartedApp
+```
+
+This will create a new folder called `GetStartedApp` containing the new project.
+  </TabItem>
 </Tabs>
 
 ## Run the Project
 
 We're now ready to run the project!
 
-<Tabs groupId="ide">
-  <TabItem value="cli" label="Command Line" default>
-Go into the `GetStartedApp` directory and run:
-
-```bash title='Bash'
-dotnet run
-```
-  </TabItem>
+<Tabs groupId="ide">  
   <TabItem value="rider" label="Rider">
 
 Press the **Run** button in the Rider toolbar:
@@ -117,17 +113,30 @@ Press the **Run** button in the Rider toolbar:
   Hit `F5` to run the project.
 
   </TabItem>
-
   <TabItem value="vsc" label="Visual Studio Code">
    * Hit `F5` to run the project and Select `C#` as the debugger
     <img className="center" src={vscode6} />
   * Select **C#: GetStartedApp Demo** to launch the application with the debugger connected.
     <img className="center" src={vscode7} />
   </TabItem>
+  <TabItem value="cli" label="Command Line" default>
+Go into the `GetStartedApp` directory and run:
+
+```bash title='Bash'
+dotnet run
+```
+  </TabItem>
 </Tabs>
 
 The solution will build and run.
 
 You should now be running your first Avalonia application!
 
-<img className="center" src={InitialWindowScreenshot} />
+<ThemedImage
+  alt="Application running"
+  className="center"
+  sources={{
+      light: useBaseUrl('/img/get-started/test-drive/main-window-app-running-light.png'),
+      dark: useBaseUrl('/img/get-started/test-drive/main-window-app-running-dark.png'),
+  }}
+  />