added vscode to getting started guide

Author: MikeCodesDotNET

docs/basics/user-interface/adding-interactivity.md

@@ -53,7 +53,7 @@ The simplest way of using commands is to bind to a method in the object's data c
 
 1. **Add a method to the view model**: Define a method in a view model which will handle the command.
 
-    ```csharp
+```csharp title='C#'
     public class MainWindowViewModel
     {
         // highlight-start
@@ -67,6 +67,6 @@ The simplest way of using commands is to bind to a method in the object's data c
 
 2. **Bind the Method**: Associate the method with the control that triggers it.
 
-    ```xml
+    ```xml title='XAML'
     <Button Content="Click Me" Command="{Binding HandleButtonClick}" />
     ```

docs/basics/user-interface/assets.md

@@ -70,7 +70,7 @@ Avalonia UI has built-in converters which can load assets for bitmaps, icons and
 
 You can write code to load assets using the `AssetLoader` static class. For example:
 
-```csharp
+```csharp title='C#'
 var bitmap = new Bitmap(AssetLoader.Open(new Uri(uri)));
 ```
 

docs/basics/user-interface/code-behind.md

@@ -87,7 +87,7 @@ namespace AvaloniaApplication1.Views
 
 With the control reference available in the code-behind, you can set properties. For example, you can change the background property like this:
 
-```csharp
+```csharp title='C#'
 greetingButton.Background = Brushes.Blue;
 ```
 

docs/get-started/install.md

@@ -14,7 +14,7 @@ The best way to get started with Avalonia is by creating an application using a
 
 To install the [Avalonia templates](https://github.com/AvaloniaUI/avalonia-dotnet-templates), run the following command:
 
-```bash
+```bash title='Bash'
 dotnet new install Avalonia.Templates
 ```
 
@@ -24,7 +24,7 @@ For .NET 6.0 and earlier, replace `install` with `--install`
 
 To list the installed templates run
 
-```bash
+```bash title='Bash'
  dotnet new list
 ```
 
@@ -47,13 +47,13 @@ Avalonia Window                               avalonia.window             [C#],F
 
 Once the project templates are installed, you can create a new _Avalonia UI_ application from CLI by running the following command:
 
-```bash
+```bash title='Bash'
 dotnet new avalonia.app -o MyApp
 ```
 
 This will create a new folder called `MyApp` containing your application files. To run the application, navigate to the `MyApp` folder and run:
 
-```bash
+```bash title='Bash'
 cd MyApp
 dotnet run
 ```

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

@@ -14,12 +14,14 @@ 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 the 
-`<TextBlock Text="text" HorizontalAlignment="Center" VerticalAlignment="Center"/>`	
+- Locate
+```xml title='XAML' 
+<TextBlock Text="text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+```
 in the `MainView.axaml` file.. 
 - Delete the entire line.
 - Insert a `Button` tag as shown:
-```xml
+```xml title='XAML'
   <Button>Calculate</Button>
 ```
 <img className="center" src={CalculateButton} alt="" />
@@ -42,7 +44,7 @@ procedure to set the `HorizontalAlignment` to centered instead.
 
 - Add a new attribute to the Button tag as follows:
 
-```xml
+```xml title='XAML'
 <Button HorizontalAlignment="Center">Calculate</Button>
 ```
 

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

@@ -13,11 +13,20 @@ import VsNewAvaloniaProjectScreenshot from '/img/get-started/test-drive/vs-new-a
 import RiderRunScreenshot from '/img/get-started/test-drive/rider-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';
+import vscode2 from '/img/get-started/test-drive/vscode-select-project-template.png';
+import vscode3 from '/img/get-started/test-drive/vscode-name-new-project.png';
+import vscode4 from '/img/get-started/test-drive/vscode-create-project.png';
+import vscode6 from '/img/get-started/test-drive/vscode-select-csharp.png';
+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
+```bash title='Bash'
 dotnet new install Avalonia.Templates
 ```
 
@@ -29,7 +38,7 @@ To get started, we're going to use the MVVM Avalonia template: `Avalonia MVVM Ap
   <TabItem value="cli" label="Command Line" default>
 Run the command:
 
-```bash
+```bash title='Bash'
 dotnet new avalonia.mvvm -o GetStartedApp
 ```
 
@@ -69,6 +78,17 @@ 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} />
+     * After selecting the command, you'll need to choose the project template. Choose **Avalonia MVVM app**.
+    <img className="center" src={vscode2} />
+    * Name the project G`etStartedApp`, and press enter.
+    <img className="center" src={vscode3} />
+    * 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>
 </Tabs>
 
 ## Run the Project
@@ -79,7 +99,7 @@ We're now ready to run the project!
   <TabItem value="cli" label="Command Line" default>
 Go into the `GetStartedApp` directory and run:
 
-```bash
+```bash title='Bash'
 dotnet run
 ```
   </TabItem>
@@ -97,6 +117,13 @@ 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>
 </Tabs>
 
 The solution will build and run.

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

@@ -32,7 +32,7 @@ Inside this user control, you will see a `<TextBlock>...</TextBlock>` XAML tag.
 `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"/>
 ```