Completed sanity check of test-drive (with Rider)

Author: MikeCodesDotNET

docs/get-started/test-drive/code-with-controls.md

@@ -17,28 +17,28 @@ To add control names, follow this procedure:
 - Add the `Name` attribute like this:
 
 ```xml
-<TextBox ... Name="celsius"/>
+<TextBox ... Name="Celsius"/>
 ```
 
 - Repeat the above for the Fahrenheit input:
 
 ```xml
-<TextBox ... Name="fahrenheit"/>
+<TextBox ... Name="Fahrenheit"/>
 ```
 
 ## Get Control Values in Code-Behind 
 
 To access the `Text` value of the `celsius` input, follow this procedure:
 
-- Switch to the **MainView.axaml.cs** code-behind file.
-- Locate the `ButtonClicked` event handler.
-- Alter the `Debug` statement to display the text property of the `celsius` input, like this:
+- Switch to the **MainWindow.axaml.cs** code-behind file.
+- Locate the `Button_OnClick` event handler.
+- Alter the `Debug` statement to display the text property of the `Celsius` input, like this:
 
 ```csharp
-Debug.WriteLine($"Click! Celsius={celsius.Text}");
+Debug.WriteLine($"Click! Celsius={Celsius.Text}");
 ```
 
-- Run the app to confirm that you can see the value in the Celsius appear in the debug window.
+- Run the app again (in debug mode) to confirm that you can see the value in the Celsius appear in the debug window.
 
 ## Set Control Values in Code-Behind 
 
@@ -51,7 +51,7 @@ Tf = Tc * (9/5) + 32
 
 To add the conversion formula, follow this procedure:
 
-- Locate the `ButtonClicked` event handler.
+- Locate the `Button_OnClick` event handler.
 - Validate the Celsius input text as a number.
 - Use the conversion formula.
 - Update the `Text` in the Fahrenheit input.
@@ -60,17 +60,17 @@ To add the conversion formula, follow this procedure:
 One implementation of the above is as follows:
 
 ```csharp
-public void ButtonClicked(object source, RoutedEventArgs args)
+private void Button_OnClick(object? sender, RoutedEventArgs e)
 {
-    if (Double.TryParse(celsius.Text, out double C))
+    if (double.TryParse(Celsius.Text, out double C))
     {
         var F = C * (9d / 5d) + 32;
-        fahrenheit.Text = F.ToString("0.0");
+        Fahrenheit.Text = F.ToString("0.0");
     }
     else
     {
-        celsius.Text = "0";
-        fahrenheit.Text = "0";
+        Celsius.Text = "0";
+        Fahrenheit.Text = "0";
     }
 }
 ```

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

@@ -7,7 +7,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 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 RiderRunScreenshot from '/img/get-started/test-drive/rider-toolbar-run.png';
 import InitialWindowScreenshot from '/img/get-started/test-drive/initial-window.png';
 
 import vscode1 from '/img/get-started/test-drive/vscode-command-new-project.png';

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

@@ -24,20 +24,17 @@ Avalonia controls; the window will be drawn on the target platform with 4 **layo
 
 <img src={LayoutZonesDiagram} alt="" />
 
-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 `UserControl` that will be displayed in the content zone of the `Window`.
+## The MainWindow Content
 
-## The MainView User control
-
-Inside this user control, you will see a `<TextBlock>...</TextBlock>` XAML tag. This represents a `TextBlock` control which draws 
+Inside the Windows Content, you will see a `<TextBlock>...</TextBlock>` XAML tag. This represents a `TextBlock` control which draws 
 `Text` to the screen. The `Text` property of the `TextBlock` is bound to the **Greeting** property of 
 the **MainViewModel** class.
 
 ```xml title='XAML'
 <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 ```
 
-You can change the text in the file **MainViewModel.cs** to see the change reflected in the user interface.
+You can change the text in the file **MainWindowViewModel.cs** to see the change reflected in the user interface.
 
 ```csharp title='C#'
 namespace GetStartedApp.ViewModels;
@@ -69,7 +66,7 @@ The XAML Previewer create an instance of your app in a special authoring mode, k
 
 <Tabs groupId="ide">
     <TabItem value="rider" label="Rider">
-        Navigate to the **MainView.axaml** file and click the **Split View** button at the top right of the editor window.
+        Navigate to the **MainWindow.axaml** file and click the **Split View** button at the top right of the editor window.
 
         <ThemedImage
             alt="Rider Avalonia Previewer Controls"

docs/get-started/test-drive/response-to-an-event.md

@@ -0,0 +1,115 @@
+---
+id: respond-to-an-event
+title: Respond to an Event
+---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import EventDebugOutputScreenshot from '/img/get-started/test-drive/event-debug-output.png';
+import RiderDebugButton from '/img/get-started/test-drive/rider-toolbar-debug.png';
+
+
+
+There are a number of ways you can implement actions in an Avalonia application. On this page, you will see how to use 
+one of the simplest: how to write event handling code for a button click.
+
+To start, you will write a button click event handler that does not interact with any of the other controls.
+
+## Code-Behind
+
+XAML files can have C# source files associated with it referred to as by "code-behind". Code-behind is used to access 
+named controls and handle events for its associated XAML. When using an IDE, you can find this file in 
+the **Solution Explorer** as a sub-item of the `.axaml` file.
+
+<ThemedImage
+            alt="Solution Explorer"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/codebehind-mainwindow-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/codebehind-mainwindow-dark.png'),
+            }}
+            />
+
+To change the code-behind for `MainWindow`:
+
+- Open the `MainWindow.axaml.cs` file
+
+You should see C# code like this:
+
+```csharp
+using Avalonia.Controls;
+
+namespace GetStartedApp.Views;
+
+public partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        InitializeComponent();
+    }
+}
+```
+
+The partial class `MainWindow` corresponds to the `Window` created by Avalonia as a result of the XAML you already 
+have. The namespace and class name must be the same in both XAML and code-behind. You can find this class name in the 
+root XAML tag:
+
+```xml
+<UserControl x:Class="GetStartedApp.Views.MainWindow"
+    ...>
+</UserControl>
+```
+
+To add an event handler for the `Button`, follow this procedure:
+
+- Locate the `MainWindow` constructor in the code-behind file (see above instructions).
+- After the constructor, add the following code:
+
+```csharp
+private void Button_OnClick(object? sender, RoutedEventArgs e)
+{
+    Debug.WriteLine("Click!");
+}
+```
+
+This will require the following using statements:
+
+```cs
+using Avalonia.Interactivity;
+using System.Diagnostics;
+```
+
+- Switch to the XAML file and locate the `<Button>` tag.
+- Enter the `Click` attribute at the end of the tag, as follows:
+
+```xml
+<Button Grid.Row="2"  Grid.Column="1" Click="Button_OnClick">Calculate</Button>
+```
+
+- Run the app in Debug mode and click the Calculate button.
+
+
+<Tabs groupId="ide">
+    <TabItem value="rider" label="Rider">
+        <img className="center" src={RiderDebugButton} alt="" />
+
+        You should see the result on the Output window for Debug, like this:
+<ThemedImage
+            alt="Application running"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/rider-event-debug-output-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/rider-event-debug-output-dark.png'),
+            }}
+            />
+
+    </TabItem>
+    <TabItem value="vs" label="Visual Studio">
+    You should see the result on the Output window for Debug, like this:
+
+    <img className="center" src={EventDebugOutputScreenshot} alt="" />
+    </TabItem>
+
+</Tabs>
+
+
+
+On the next page, you will see how to use code-behind to read and change the properties of Avalonia controls at runtime.