updates to test drive

updates to the get started - test drive section to match current templates and conventions.

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.vs/VSWorkspaceState.json

@@ -0,0 +1,16 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\docs",
+    "\\docs\\get-started",
+    "\\docs\\get-started\\test-drive",
+    "\\docs\\guides\\styles-and-resources",
+    "\\static",
+    "\\static\\img",
+    "\\static\\img\\basics\\user-interface",
+    "\\static\\img\\get-started",
+    "\\static\\img\\get-started\\add-a-control"
+  ],
+  "SelectedNode": "\\static\\img\\get-started\\add-a-control\\calculate-button.png",
+  "PreviewInSolutionExplorer": false
+}

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

@@ -5,6 +5,7 @@ title: Add a Control
 
 import Highlight from '@site/src/components/Highlight';
 import AvaloniaPropertyIntellisenseScreenshot from '/img/get-started/add-a-control/image (1) (2) (1).png';
+import CalculateButton from '/img/get-started/add-a-control/calculate-button.png';
 
 So far the main window of your application displays only a text string. On this page, you will learn how to add some of the built-in controls that are part of Avalonia.
 
@@ -13,14 +14,15 @@ 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 you currently have in the content zone of the window, with a button control.
 
 - Stop the app if it is running.
-- Locate the `Welcome to Avalonia!` message in the XAML pane, and delete the text.
-- Insert a `Button` tag as shown:
-
+- Locate the 
+`<TextBlock Text="text" HorizontalAlignment="Center" VerticalAlignment="Center"/>`	
+in the `MainView.axaml` file.. 
+- Delete the entire line.
+- Insert a 'Button' tag as shown:
 ```xml
-<Window .... >
   <Button>Calculate</Button>
-</Window>
 ```
+<img className="center" src={CalculateButton} alt="" />
 
 :::tip
 If you're using a previewer, you will see the button appear in the preview pane as soon as the XAML is valid. You can also try out a mouse move-over and click on the button to see the different colors it displays in different states.

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

@@ -8,8 +8,8 @@ import TabItem from '@theme/TabItem';
 
 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/choose-a-solution-template/image (31) (1) (1).png';
-import VsNewAvaloniaProjectScreenshot from '/img/get-started/choose-a-solution-template/image (27) (1).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';
 import InitialWindowScreenshot from '/img/get-started/test-drive/initial-window.png';
 
@@ -60,7 +60,11 @@ The template will create a new solution and project.
 
 - Name the project `GetStartedApp`, and click **Create**.
 
-The template will create a new solution and project.
+- The next screen allows selecting the platforms you wish to target: click **Desktop** then click **Next**.
+
+- The next screen allows selecting a design pattern: click **ReactiveUI** then click **Create**.
+
+The template will create a new solution and two new projects. `GetStartedApp` is the main project that is shared between each platform. `GetStartedApp.Desktop` is the platform-specific project for the desktop platform.
 
 <img className="center" src={VsNewAvaloniaProjectScreenshot} />
 
@@ -88,21 +92,15 @@ Press the **Run** button in the Rider toolbar:
   </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**.
-
-<img className="center" src={VsFindAvaloniaTemplateScreenshot} />
-
-- Name the project `GetStartedApp`, and click **Create**.
+  Right-click on the `GetStartedApp.Desktop` project and select **Set as Startup Project**.
 
-The template will create a new solution and project.
-
-<img className="center" src={VsNewAvaloniaProjectScreenshot} />
+  Hit `F5` to run the project.
 
   </TabItem>
 </Tabs>
 
+The solution will build and run.
+
 You should now be running your first Avalonia application!
 
 <img className="center" src={InitialWindowScreenshot} />

docs/get-started/test-drive/main-window.md

@@ -4,8 +4,9 @@ title: The Main Window
 ---
 
 import LayoutZonesDiagram from '/img/gitbook-import/assets/image (25) (2) (1).png';
-import MainWindowScreenshot from '/img/get-started/the-main-window/image (15) (1) (1).png';
-import VsDesignerScreenshot from '/img/get-started/the-main-window/image (22) (1).png';
+import MainWindowScreenshot from '/img/get-started/the-main-window/main-window-screenshot.png';
+import RunningAppWindowScreenshot from '/img/get-started/the-main-window/runningrapp-window-screenshot.png';
+import VsDesignerScreenshot from '/img/get-started/the-main-window/vs-designer-screenshot.png';
 import VsPreviewPaneScreenshot from '/img/get-started/the-main-window/image (6) (2).png';
 
 You can now start your tour of an Avalonia project. We'll start with the main application window. Open the **MainWindow.axaml** file.
@@ -20,11 +21,19 @@ In the **MainWindow.axaml** XAML file, the `<Window>...</Window>` XAML tag repre
 
 <img className="center" src={LayoutZonesDiagram} alt="" />
 
-In your current application, the content zone of the window has only a simple string comprising your latest message; so that is what is displayed.
+In the current application, the content zone of the window references another view: **<views:MainView />**. This is a reference to the **MainView.axaml** file, which is a user control that will be displayed in the content zone of the window.
 
-<img className="center" src={MainWindowScreenshot} alt="" />
+## The MainView User Control
+
+Inside this user control, you will see a `<TextBlock>...</TextBlock>` XAML tag. This represents a text block control. The `Text` property of the text block is bound to the **Greeting** property of the **MainViewModel** class. This is a property that will be set in the constructor of the view model class.
+```
+<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+```
 
-At this stage, you do not have a margin, border or any padding defined, so the message appears right up against the top left corner of the window. 
+You can change the text in the file **MainViewModel.cs** to see the change reflected in the user interface.
+
+<img className="center" src={MainWindowScreenshot} alt="" />
+<img className="center" src={RunningAppWindowScreenshot} alt="" />
 
 :::info
 For more information about the concept of control layout zones, see [here](../../concepts/layout/layout-zones).
@@ -33,19 +42,20 @@ For more information about the concept of control layout zones, see [here](../..
 ## The Visual Studio Designer
 
 If you're using Visual Studio you should see the XAML code and preview pane.
+Navigate to the **MainWindow.axaml** file and click the **Design View** button at the top of the editor window.
 
 <img className="center" src={VsDesignerScreenshot} alt="" />
 
 :::info
-Notice the red exclamation icon (top left) and the message **The designer is loading...**. This indicates that the project must be built before the preview pane will respond.
+There may be a red exclamation icon (top left) and the message **The designer is loading...**. This indicates that the project must be built before the preview pane will respond.
 :::
 
 - Build the project.
 - Scroll the preview pane to the left to view the preview outline and the text displayed in the top left corner.
 
 <img className="center" src={VsPreviewPaneScreenshot} alt="" />
 
-- Locate the `Welcome to Avalonia!`message text in the XAML pane, and make a change.
+- Remove the binding `{Binding Greeting}` and change the text `<TextBlock Text="`my text`" ...`
 
 You will see the new text in the preview pane change as you type. This is an example of the Avalonia **design-time preview behaviour** that will help you develop user interface presentation accurately and quickly.
 

docs/guides/styles-and-resources/resources.md

@@ -252,7 +252,7 @@ The search moves upwards in the logical control tree, behaving at each level in
 
 Avalonia provides different options to access Resources from code. 
 
-:::NOTE
+:::note
 
 `ResourceNode` in the below samples can be any node that supports `Resource`, like `Appliction.Current`, `Window`, `UserControl`, ...