diff --git a/docs/basics/user-interface/adding-interactivity.md b/docs/basics/user-interface/adding-interactivity.md index 1351d472d..732bd6c12 100644 --- a/docs/basics/user-interface/adding-interactivity.md +++ b/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' ``` @@ -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' ``` diff --git a/docs/get-started/test-drive/create-a-project.md b/docs/get-started/test-drive/create-a-project.md index d2e4cd67f..291cdb505 100644 --- a/docs/get-started/test-drive/create-a-project.md +++ b/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 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 + + + * Bring up the Command Palette using `⇧ ⌘ P` and then type ".NET" and find and select the **.NET: New Project** command. + + * After selecting the command, you'll need to choose the project template. Choose **Avalonia MVVM app**. + + * Name the project G`etStartedApp`, and press enter. + + * You'll need to provide a path for where the project should be created. Do this, and then press **Create project** + + ## Run the Project @@ -79,7 +99,7 @@ We're now ready to run the project! Go into the `GetStartedApp` directory and run: -```bash +```bash title='Bash' dotnet run ``` @@ -97,6 +117,13 @@ Press the **Run** button in the Rider toolbar: Hit `F5` to run the project. + + + * Hit `F5` to run the project and Select `C#` as the debugger + + * Select **C#: GetStartedApp Demo** to launch the application with the debugger connected. + + The solution will build and run. diff --git a/docs/get-started/test-drive/main-window.md b/docs/get-started/test-drive/main-window.md index 47da1e56b..9cac40938 100644 --- a/docs/get-started/test-drive/main-window.md +++ b/docs/get-started/test-drive/main-window.md @@ -32,7 +32,7 @@ Inside this user control, you will see a `...` 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' ``` diff --git a/static/img/get-started/test-drive/vscode-app-running.png b/static/img/get-started/test-drive/vscode-app-running.png new file mode 100644 index 000000000..39e39cc3b Binary files /dev/null and b/static/img/get-started/test-drive/vscode-app-running.png differ diff --git a/static/img/get-started/test-drive/vscode-command-new-project.png b/static/img/get-started/test-drive/vscode-command-new-project.png new file mode 100644 index 000000000..8ba67e7bf Binary files /dev/null and b/static/img/get-started/test-drive/vscode-command-new-project.png differ diff --git a/static/img/get-started/test-drive/vscode-create-project.png b/static/img/get-started/test-drive/vscode-create-project.png new file mode 100644 index 000000000..57f4812fc Binary files /dev/null and b/static/img/get-started/test-drive/vscode-create-project.png differ diff --git a/static/img/get-started/test-drive/vscode-launch-app.png b/static/img/get-started/test-drive/vscode-launch-app.png new file mode 100644 index 000000000..6f16682b5 Binary files /dev/null and b/static/img/get-started/test-drive/vscode-launch-app.png differ diff --git a/static/img/get-started/test-drive/vscode-name-new-project.png b/static/img/get-started/test-drive/vscode-name-new-project.png new file mode 100644 index 000000000..6111f981c Binary files /dev/null and b/static/img/get-started/test-drive/vscode-name-new-project.png differ diff --git a/static/img/get-started/test-drive/vscode-select-csharp.png b/static/img/get-started/test-drive/vscode-select-csharp.png new file mode 100644 index 000000000..ad6b42429 Binary files /dev/null and b/static/img/get-started/test-drive/vscode-select-csharp.png differ diff --git a/static/img/get-started/test-drive/vscode-select-project-template.png b/static/img/get-started/test-drive/vscode-select-project-template.png new file mode 100644 index 000000000..3bef9cfc9 Binary files /dev/null and b/static/img/get-started/test-drive/vscode-select-project-template.png differ