diff --git a/accelerate/tools/vs-extension/getting-started.md b/accelerate/tools/vs-extension/getting-started.md
index a26f7b446..ab9bf091a 100644
--- a/accelerate/tools/vs-extension/getting-started.md
+++ b/accelerate/tools/vs-extension/getting-started.md
@@ -8,7 +8,7 @@ It supports Visual Studio 2022 version 17.10 and above.
In addition to downloading and installing the extension from the marketplace you can also search within the **Manage Extensions** window on the **Extensions** menu
-
+
## Features
diff --git a/docs/get-started/choose-a-solution-template.md b/docs/get-started/choose-a-solution-template.md
deleted file mode 100644
index adfacdb7e..000000000
--- a/docs/get-started/choose-a-solution-template.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-id: choose-a-solution-template
-title: Choose a Template
----
-
-import Highlight from '@site/src/components/Highlight';
-
-The _Avalonia for Visual Studio_ extension includes some solution templates that you can use to start an _Avalonia UI_ project. To get started, you will use the simplest of these templates.
-
-Follow this procedure to choose the template:
-
-- Run **Visual Studio** , click **Create a new project** .
-- Type 'Avalonia' in the search box.
-- Click **Avalonia Application** (the first item in the search results - for C#), then click **Next** .
-
-
-
-
**Configure you new project** dialog, and click **Create** .
-
-The template will create a new solution and project for you with the Avalonia UI dependencies set, and 5 files.
-
-
-
-
+
+ We recommend [JetBrains Rider](https://www.jetbrains.com/rider/) if you use macOS or Linux. JetBrains Rider offers a complete, polished development experience on these operating systems, including built-in support for XAML.
+
+ Consider installing the third-party plugin [AvaloniaRider](https://plugins.jetbrains.com/plugin/14839-avaloniarider), which enables live preview of your XAML as you work.
+
+ To install AvaloniaRider:
+
+ 1. In JetBrains Rider, go to **Settings → Plugins**.
+ 2. Go to the **Marketplace** tab.
+ 3. In the search bar, input “AvaloniaRider”.
+ 4. Click **Install**.
+ 5. Follow any additional installation instructions. You may need to close and reopen JetBrains Rider to complete the installation.
+
+
+
+
+
+ If you’re working on Windows, you can use [Visual Studio](https://visualstudio.microsoft.com/) with the Avalonia for Visual Studio extension.
+
+ To install Avalonia for Visual Studio:
+
+ 1. In Visual Studio, go to **Extensions → Manage Extensions**.
+ 2. In the search bar, input “Avalonia”.
+ 3. Click **Install**.
+ 4. Follow any additional installation instructions. You may need to close and reopen Visual Studio to complete the installation.
+
+
+
+
+
+ If you prefer to use [Visual Studio Code](https://code.visualstudio.com/), the Avalonia for VSCode extension provides basic functionalities like autocomplete and previewer. You can [download the extension from the Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.vscode-avalonia).
+
+ Due to limited support, we do not recommend Visual Studio Code.
+
+
+
+## Installing Avalonia templates
+
+Depending on which IDE you are using, you may already have the [Avalonia templates](https://github.com/AvaloniaUI/avalonia-dotnet-templates) installed. This is the case for Visual Studio with the Avalonia for Visual Studio extension.
+
+You can run this command to check what .NET templates you have available:
+
+```
+dotnet new list
+```
+
+Look for these Avalonia templates among the other .NET templates:
+
+```
+Template Name Short Name Language Tags
+-------------------------------------------- -------------------------- ---------- ---------------------------------------------------------
+Avalonia .NET App avalonia.app [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia .NET MVVM App avalonia.mvvm [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Cross Platform Application avalonia.xplat [C#],F# Desktop/Xaml/Avalonia/Browser/Mobile
+```
+
+If you do not see these templates on the list, you can install them by running this command:
+
+```
+dotnet new install Avalonia.Templates
+```
+
+Check the output. You should see that these templates are installed:
+
+```
+Template Name Short Name Language Tags
+-------------------------------------------- -------------------------- ---------- ---------------------------------------------------------
+Avalonia .NET App avalonia.app [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia .NET MVVM App avalonia.app [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Cross Platform Application avalonia.xplat [C#],F# Desktop/Xaml/Avalonia/Web/Mobile
+Avalonia Resource Dictionary avalonia.resource Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Styles avalonia.styles Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia TemplatedControl avalonia.templatedcontrol [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia UserControl avalonia.usercontrol [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Window avalonia.window [C#],F# Desktop/Xaml/Avalonia/Windows/Linux/macOS
+```
+
+### Installation troubleshooting
+
+#### .NET is not a recognized program
+
+First, ensure the .NET SDK is installed. Run this command:
+
+```
+dotnet --list-sdks
+```
+
+If a .NET SDK is correctly installed, this returns an output similar to the following:
+
+```
+8.0.202 [C:\Program Files\dotnet\sdk]
+```
+
+If the terminal continues to report that .NET is missing, try restarting the terminal.
+
+#### `Avalonia.Templates` package cannot be found
+
+Ensure NuGet is correctly set up. Run this command:
+
+```
+dotnet nuget list source
+```
+
+Check that the output displays the following as a registered source:
+
+```
+nuget.org [Enabled]
+https://api.nuget.org/v3/index.json
+```
+
+If this source is not listed, add it using this command:
+
+```
+dotnet nuget add source https://api.nuget.org/v3/index.json -n nuget.org
+```
+
+If the package install continues to fail even with NuGet listed as a registered source, check your network connectivity or firewall settings.
+
+## Creating your first project
+
+For your first project, we’re going to use the MVVM template.
+
+
+
+ 1. On the Rider startup screen, select **New Solution**.
+ 2. In the side bar, scroll down to “Custom Templates”. Select **Avalonia .NET MVVM App**.
+ 3. Name your solution “GetStartedApp”.
+ 4. Click **Create**.
+
+
+ 1. In Visual Studio, click **File → New → Project/Solution**.
+ 2. In the search box, input “Avalonia”.
+ 3. Select **Avalonia .NET MVVM App** from the search results. If Visual Studio offers multiple options, select the one for **C#**. Then, click **Next**.
+ 4. Name your project “GetStartedApp”.
+ 5. Change the target directory if desired. Then, click **Next**.
+ 6. Select your preferred version of **.NET** as the framework.
+ 7. If given the option to choose target platforms, select **Desktop**.
+ 8. Click **Create**.
+
+
+ 1. In Visual Studio Code, bring up the command palette. This is Ctrl + Shift + P on Windows, or Cmd + Shift + P on macOS.
+ 2. Input “.NET” into the search.
+ 3. From the search results, select **.NET: New Project...**
+ 4. From the list of project templates, select **Avalonia MVVM App**.
+ 5. Specify a directory on your device for the project.
+ 6. Name your project “GetStartedApp”.
+ 7. Click **Create project**.
+
+
+ 1. In the command line, run this command:
+
+ ```
+ dotnet new avalonia.mvvm -o GetStartedApp
+ ```
+
+ 2. Check your device for a new folder named **GetStartedApp**, containing the new project files.
+
+
+
+## Running your project
+
+
+ Click **Run** in the top toolbar.
+
+ The solution builds and runs your app in a new window. By default, this displays the string, “Welcome to Avalonia!”
+
+
+ In the top toolbar, select "GetStartedApp" next to the **Run** button. Then, click **Run**.
+
+ The solution builds and runs your app in a new window. By default, this displays the string, “Welcome to Avalonia!”
+
+
+ 1. Select **Run and Debug** in the side navigation bar.
+ 2. If prompted to select a debugger, choose **C#**.
+ 3. Click **Run and Debug.**
+
+ The solution builds and runs your app in a new window. By default, this displays the string, “Welcome to Avalonia!”
+
+
+ 1. Navigate to the directory containing your **GetStartedApp** project.
+ 2. Run the command `dotnet run`.
+
+ The solution builds and runs your app in a new window. By default, this displays the string, “Welcome to Avalonia!”
+
+
+
+
+
+
+
diff --git a/docs/get-started/install-the-avalonia-extension.md b/docs/get-started/install-the-avalonia-extension.md
deleted file mode 100644
index 0c171939b..000000000
--- a/docs/get-started/install-the-avalonia-extension.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-id: install-the-avalonia-extension
-title: Install the Avalonia Extension
----
-
-import Highlight from '@site/src/components/Highlight';
-
-To implement applications using _Avalonia UI_, you first need to install the _Avalonia for Visual Studio_ extension.
-
-
-
-
**Manage Extensions** on the **Extensions** top menu.
-- In the **Search** box, type 'Avalonia'.&
-- Click **Download** and follow the instructions (you will need to close Visual Studio while the VSIX installation runs).
-
-
-
-
**Next** (right-arrow) to get started.
-
-:::info
-If you are a more experienced user, you may want to extend your knowledge of _Avalonia UI_ instead, by using our Basics section [here](../basics) or one of the How-To Guides [here](../guides).
-:::
diff --git a/docs/get-started/set-up-an-editor.md b/docs/get-started/set-up-an-editor.md
deleted file mode 100644
index b197dbe7f..000000000
--- a/docs/get-started/set-up-an-editor.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: set-up-an-editor
-title: Set Up an Editor
----
-
-import AvaloniaVsExtensionMarketplaceScreenshot from '/img/get-started/avalonia-vs-extension-marketplace.png';
-import AvaloniaVsExtensionNuGetScreenshot from '/img/get-started/avalonia-vs-extension-nuget.png';
-
-# Set Up an Editor
-
-You can create an Avalonia application using any code editor, but using an IDE will give you support for authoring Avalonia XAML files with a previewer and code completion.
-
-## Visual Studio
-
-If you're developing Avalonia with Visual Studio you should install the [Avalonia for Visual Studio](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS) extension.
-
-Calculate
+```
+
+4. Run the app or check the previewer. You should now see a **Calculate** button in the app window.
+5. You can try hovering over or clicking the button to see how its appearance changes.
+
+
+
+
Calculate
+```
+
+2. Add the `HorizontalAlignment` attribute to the `` tag. Set it to `Center`.
+
+```xml
+Calculate
+```
+
+3. Run the app or check the previewer. You should see that the Calculate button moves to the center of the window.
+
+
+
+
+
diff --git a/docs/get-started/starter-tutorial/adding-some-layout.mdx b/docs/get-started/starter-tutorial/adding-some-layout.mdx
new file mode 100644
index 000000000..ec61cbf99
--- /dev/null
+++ b/docs/get-started/starter-tutorial/adding-some-layout.mdx
@@ -0,0 +1,162 @@
+---
+id: adding-some-layout
+title: Adding some layout
+description: How to use layout controls to have multiple controls on your temperature converter app. Part 3 of 7 the Avalonia starter tutorial.
+---
+
+import TemperatureConverterTextOnly from '/img/get-started/temperature-converter-text-only.png';
+import TemperatureConverterBlueBorder from '/img/get-started/temperature-converter-blue-border.png';
+import TemperatureConverterEmptyGrid from '/img/get-started/temperature-converter-empty-grid.png';
+import TemperatureConverterFilledGrid from '/img/get-started/temperature-converter-filled-grid.png';
+
+# Adding some layout
+
+At this point, your temperature converter app has a single button in the center of the window. You cannot add any more elements, because each Avalonia window allows only one control in its content zone. (More on layout zones later, on the next page: [Customizing the Avalonia window](/docs/get-started/starter-tutorial/customizing-the-avalonia-window).)
+
+To place multiple UI elements in the window, you must use a **layout control.**
+
+For more information on layout controls, see the [Layout controls page](/docs/reference/controls/layout-controls).
+
+## Inserting a stack panel
+
+We can use the `StackPanel` layout control to place some text above the button.
+
+1. In the file **MainWindow.axaml**, enclose your `Button` with a `... ` tag.
+
+```xml
+
+ Calculate
+
+```
+
+2. Add a `TextBlock` above the Button. (You may recall the `TextBlock` tag from the default **MainWindow.axaml**—this control prints text in the window.) Set the attributes of the `TextBlock` as follows:
+
+- `Margin="5"`
+- `FontSize="24"`
+- `HorizontalAlignment="Center"`
+- `Text="Temperature Converter"`
+
+```xml
+
+
+
+
+ Calculate
+
+```
+
+3. Run the app or check the previewer. You should see the text “Temperature Converter” positioned above the **Calculate** button.
+
+
+
+
... ` tag. Set the attributes of the `Border` as follows:
+
+- `Margin="5"`
+- `CornerRadius="10"`
+- `Background="LightBlue"`
+
+```xml
+
+
+
+
+
+
+ Calculate
+
+```
+
+5. Run the app or check the previewer. You should see that the text “Temperature Converter” is now inside a rounded blue box.
+
+
+
+
... ` tag between `` and ``.
+
+```xml
+
+
+
+
+
+
+
+ Calculate
+
+```
+
+We have specified some attributes for the `Grid`:
+
+- It has two columns and two rows.
+- Gridlines are visible.
+- Cell height automatically scales to match the content. Because the automatic height of an empty cell is zero, the `Grid` currently appears on your previewer as a horizontal straight line.
+
+
+
+
+ Celsius
+ Fahrenheit
+
+```
+
+2. Insert `TextBox` controls in the right cells of the grid, again using the `Grid.Row` and `Grid.Column` attributes to assign the target cells. `TextBox` is a control that creates an area for keyboard input.
+
+```xml
+
+ Celsius
+ Fahrenheit
+
+```
+
+3. Run the app or check the previewer. You should see your text and input boxes added to the window, within the cells marked by the gridlines.
+
+
+
+
+
diff --git a/docs/get-started/starter-tutorial/converting-data.mdx b/docs/get-started/starter-tutorial/converting-data.mdx
new file mode 100644
index 000000000..46e57b9a2
--- /dev/null
+++ b/docs/get-started/starter-tutorial/converting-data.mdx
@@ -0,0 +1,136 @@
+---
+id: converting-data
+title: Converting data
+description: How to use code-behind to execute a response when the button is clicked. Part 6 of 7 the Avalonia starter tutorial.
+---
+
+# Converting data
+
+To complete our temperature converter app, we need to give it the ability to take a numerical input and convert it into a different number using a specified formula.
+
+## Naming your controls
+
+To differentiate controls in your app, you can assign names to them. We’re going to do that for the `TextBox` controls.
+
+1. Stop the app if it is running.
+2. In the file **MainWindow.axaml**, locate the Celsius text box: `` tag, like so:
+
+```xml
+` tag, like so:
+
+```xml
+
+
diff --git a/docs/get-started/starter-tutorial/customizing-the-avalonia-window.mdx b/docs/get-started/starter-tutorial/customizing-the-avalonia-window.mdx
new file mode 100644
index 000000000..5112ba320
--- /dev/null
+++ b/docs/get-started/starter-tutorial/customizing-the-avalonia-window.mdx
@@ -0,0 +1,101 @@
+---
+id: customizing-the-avalonia-window
+title: Customizing the Avalonia window
+description: How to adjust the attributes of the Avalonia window. Part 4 of 7 the Avalonia starter tutorial.
+---
+
+import AvaloniaWindowLayout from '/img/get-started/avalonia-window-layout.png';
+import TemperatureConverterPortraitOrientation from '/img/get-started/temperature-converter-portrait-orientation.png';
+
+# Customizing the Avalonia window
+
+As [mentioned earlier](/docs/get-started/starter-tutorial), the Avalonia window is where your app will run on the target platform. In a .axaml file, the `... ` tag defines what goes in the window.
+
+## Layout zones
+
+Avalonia windows have four layout zones: (1) Margin, (2) Border, (3) Padding, and (4) Content.
+
+Some layout controls, like `StackPanel` which you used earlier, create smaller sub-windows with the same four layout zones.
+
+:::note
+Each Avalonia window only accepts one control in its content zone.
+:::
+
+
+
+
` opening tag. You can see that it contains some default settings.
+
+```xml
+
+```
+
+:::note
+The first few lines of the `` tag declare the XML namespaces used by Avalonia. We use the namespace aliases `x`, `vm`, `d` and `mc`.
+:::
+
+## Setting the window's attributes
+
+Let’s try adjusting the window’s dimensions so that it appears to be in portrait orientation, instead of landscape. This is something you may do when developing an app, to check how it looks on a mobile device.
+
+### Setting the previewer size
+
+Adjusting the values in `d:DesignWidth` and `d:DesignHeight` allows you to change the dimensions of the app in the live previewer, without affecting the actual dimensions of the window at runtime.
+
+1. In the file **MainWindow.axaml**, locate this line within the `... ` tag:
+
+```xml
+mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+```
+
+2. Set `d:DesignWidth` to 400.
+3. Observe the previewer. You should see that the preview now resembles a mobile display.
+
+
+
+
` opening tag.
+
+1. In the file **MainWindow.axaml**, go to the bottom line of the `` opening tag:
+
+```xml
+Title="GetStartedApp">
+```
+
+2. Add the attributes `Width="400"` and `Height="450"` under that line. Remember to move the angle bracket to the end.
+
+```xml
+Title="GetStartedApp"
+Width="400"
+Height="450">
+```
+
+3. Run the app. You should see that the app window now resembles a mobile display.
+
+:::note
+Most mobile platforms actually ignore window sizes and automatically resize windows to fit the screen. When developing, you won’t literally need to set a separate size for each target platform.
+:::
+
+On the next page of this tutorial, you will learn how to create event handling so that the button responds to clicks.
+
+
+
diff --git a/docs/get-started/starter-tutorial/establishing-events-and-responses.mdx b/docs/get-started/starter-tutorial/establishing-events-and-responses.mdx
new file mode 100644
index 000000000..6ddc86db2
--- /dev/null
+++ b/docs/get-started/starter-tutorial/establishing-events-and-responses.mdx
@@ -0,0 +1,106 @@
+---
+id: establishing-events-and-responses
+title: Establishing events and responses
+description: How to create an event handler to detect when the button is being clicked. Part 5 of 7 the Avalonia starter tutorial.
+---
+
+import MainWindowCodeBehindLocation from '/img/get-started/mainwindow-codebehind-location.png';
+import RiderRunDebugMode from '/img/get-started/rider-run-debug-mode.png';
+import VsDebugOutputClick from '/img/get-started/vs-debug-output-click.png';
+
+# Establishing events and responses
+
+Our temperature converter app now looks reasonably functional, but doesn’t do anything yet. The next thing we need is for the **Calculate** button to be able to respond to a user action, such as a click.
+
+## Creating an event handler with code-behind
+
+XAML files can be associated with a C# source file. This file is where we can code event handling for the button. We call this “code-behind”.
+
+1. In your IDE, browse your project directory for **Views → MainWindow.axaml → MainWindow.axaml.cs**. This is the C# source file behind the main window XAML.
+
+
+
+
` near the bottom of the file.
+8. Add `Click` as an attribute to the `` tag and associate it with `Button_OnClick`, like so:
+
+```xml
+Calculate
+```
+
+## Checking the event handler works
+
+To verify we’ve created the event handler correctly, we can check the debug output to confirm "Click!" is being printed when we click the **Calculate** button.
+
+
+
+ 1. Run GetStartedApp in debug mode.
+
+
+
+
+
+ 1. Go to the **Output** window, located by default under the split view. From the “Show output from:” dropdown menu, select **Debug**.
+ 2. Run the app.
+ 3. In the running app window, click the **Calculate** button a few times.
+ 4. You should see “Click!” printed in the output window.
+
+
+
+
+
+
+On the next page, you will learn how to implement the formula that converts temperatures from Celsius to Fahrenheit.
+
+
+
diff --git a/docs/get-started/starter-tutorial/exercises.mdx b/docs/get-started/starter-tutorial/exercises.mdx
new file mode 100644
index 000000000..b2eff58d3
--- /dev/null
+++ b/docs/get-started/starter-tutorial/exercises.mdx
@@ -0,0 +1,114 @@
+---
+id: exercises
+title: Exercises
+description: Test your knowledge of Avalonia on three coding exercises. Part 7 of 7 the Avalonia starter tutorial.
+---
+
+# Starter exercises
+
+Now that you have built a temperature converter app, try these three exercises to test your understanding of Avalonia.
+
+## Exercise 1: Change an existing attribute
+
+**Challenge level: ★**
+
+Make the gridlines invisible in **GetStartedApp**.
+
+
+ Hint
+
+ You specified `` in MainWindow.axaml.
+
+
+
+ Solution
+
+ In **MainWindow.axaml**, locate the `` opening tag. Change the `ShowGridLines` attribute to `False`.
+
+ ```xml
+
+ ```
+
+
+## Exercise 2: Add a new attribute
+
+**Challenge level: ★★**
+
+Make it impossible for a user to input text into the Fahrenheit text box in **GetStartedApp**.
+
+
+ Hint (1st)
+
+ Check the [API docs](https://api-docs.avaloniaui.net/) for more information on the `TextBox` control.
+
+
+
+ Hint (2nd)
+
+ Under the [API reference for `TextBox`](https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TextBox), you’ll find the attribute `IsReadOnly`.
+
+
+
+ Solution
+
+ In **MainWindow.axaml**, locate the `` tag for the Fahrenheit box. Add the `IsReadOnly` attribute, and set it to `True`.
+
+ ```xml
+
+
+## Exercise 3: Program a new event response
+
+**Challenge level: ★★★**
+
+Make **GetStartedApp** calculate the temperature conversion as the user types.
+
+
+ Hint (1st)
+
+ Check the [API docs](https://api-docs.avaloniaui.net/) for more information on the `TextBox` control.
+
+
+
+ Hint (2nd)
+
+ Under the [API reference for `TextBox`](https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TextBox), you’ll find the event `TextChanged`.
+
+
+
+ Hint (3rd)
+
+ Your event handler is defined in the C# code-behind MainWindow.axaml.cs. It is also referenced by the XAML file MainWindow.axaml.
+
+
+
+ Solution
+
+ 1. In **MainWindow.axaml**, locate the `` tag for the Celsius box. Add the `TextChanged` event, and give the event a name, e.g. `Celsius_TextChanged`.
+
+ ```xml
+ `. It is no longer needed.
+
+ ~~`Calculate `~~
+
+ 3. In **MainWindow.axaml.cs**, locate the event handler line starting `private void`. Change the event name from `Button_OnClick` to whatever you named it in the XAML file, e.g. `Celsius_TextChanged`.
+
+ ```xml
+ private void Celsius_TextChanged(object? sender, RoutedEventArgs e)
+ ```
+
+ 4. Run the app to confirm that the value in the Fahrenheit box changes as you type in the Celsius box.
+
+
+Congratulations! You have completed this starter tutorial for Avalonia!
+
+## Further reading
+
+[Controls reference](/docs/reference/controls)
+
+[API documentation](https://api-docs.avaloniaui.net/)
diff --git a/docs/get-started/starter-tutorial/index.mdx b/docs/get-started/starter-tutorial/index.mdx
new file mode 100644
index 000000000..504640d3d
--- /dev/null
+++ b/docs/get-started/starter-tutorial/index.mdx
@@ -0,0 +1,50 @@
+---
+id: index
+title: Starter tutorial
+description: Learn the basics of Avalonia by building a temperature converter app. Part 1 of 7 the Avalonia starter tutorial.
+---
+
+import DocCardList from '@theme/DocCardList';
+import TemperatureConverterComplete from '/img/get-started/temperature-converter-complete.png';
+import MainWindowFileLocation from '/img/get-started/mainwindow-file-location.png';
+
+# Starter tutorial
+
+## Build a temperature converter app
+
+Now that you’re set up with an Avalonia project in your integrated development environment (IDE), as covered on the [Getting Started page](/docs/get-started#creating-your-first-project), we can go through some basic concepts and functionalities in Avalonia. We’re going to do that by turning the default Avalonia template into a temperature converter app.
+
+Follow through this tutorial to create the app. As you do so, you will learn about:
+
+
+
+
+
+
... ` XAML tag. This tag represents the Avalonia window, where your app will run on the target platform. We’ll look at Avalonia windows in more detail later, when we get to [customizing the Avalonia window](/docs/get-started/starter-tutorial/customizing-the-avalonia-window).
+
+Proceed to the next page of this tutorial to learn how to add a button to the app.
+
+
+
diff --git a/docs/get-started/test-drive/add-a-control.md b/docs/get-started/test-drive/add-a-control.md
deleted file mode 100644
index ffb586be9..000000000
--- a/docs/get-started/test-drive/add-a-control.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-id: add-a-control
-title: Add a Control
----
-
-import Highlight from '@site/src/components/Highlight';
-import CalculateButton from '/img/get-started/test-drive/calculate-button.png';
-import ButtonIntellisenseScreenshot from '/img/get-started/test-drive/button-intellisense.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.
-
-## Button
-
-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 highlighted line of XAML in the `MainWindow.xaml` file.
-```xml title='XAML'
-
-
-
-
-
-
- // highlight-next-line
-
-```
-
-- Replace the entire line with the following:
-```xml title='XAML'
- Calculate
-```
-- Your XAML should now look like this:
-```xml title='XAML'
-
-
-
-
-
-
- // highlight-next-line
- Calculate
-
-```
-
-:::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
-also try hovering and clicking the `Button` to see it change appearance in different states.
-:::
-
-- Run the app to confirm that the presentation and behaviour of the button is the same at runtime.
-
-## Control Attributes
-
-XAML uses XML attributes to specify presentation and behavior for controls. These attributes can set properties, call
-methods, and call event handlers in the controls created by the XAML.
-
-For example, the `Button` is currently positioned hard against the left edge of the `Window`. This is a result
-of the default value (left) of its `HorizontalAlignment` property. Follow this
-procedure to set the `HorizontalAlignment` to centered instead.
-
-- Add a new attribute to the Button tag as follows:
-
-```xml title='XAML'
-Calculate
-```
-
-:::tip
-If you're using an IDE, notice how the Avalonia code completion guides you as you add attributes to the XAML.
-
-
- 1
- 2
-
-```
-
-## 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
-
-
-
-
-
-
-// highlight-start
-
-
-
-
-
-
- Calculate
-
- // highlight-end
-
-
-```
-
-
-
-
-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`
-
-
-- In **Visual Studio**, click **Create a new project**.
-- Type `Avalonia` in the search box.
-- Click **Avalonia Application** then click **Next**.
-
-
-
- * Bring up the Command Palette using `⇧ ⌘ P` and then type ".NET" and find and select the **.NET: New Project** command.
-
-
-Run the command:
-
-```bash title='Bash'
-dotnet new avalonia.mvvm -o GetStartedApp
-```
-
-This will create a new folder called `GetStartedApp` containing the new project.
-
-
-
-## Run the Project
-
-We're now ready to run the project!
-
-
-
-
-Press the **Run** button in the Rider toolbar:
-
-
-
-
- Right-click on the `GetStartedApp.Desktop` project and select **Set as Startup Project**.
-
- Hit `F5` to run the project.
-
-
-
- * Hit `F5` to run the project and Select `C#` as the debugger
-
-
-Go into the `GetStartedApp` directory and run:
-
-```bash title='Bash'
-dotnet run
-```
-
-
-
-The solution will build and run.
-
-You should now be running your first Avalonia application!
-
-` and ``
-- Insert a `` tag as shown:
-
-```xml
-
-
-
- // highlight-start
-
-
- // highlight-end
- Calculate
-
-```
-
-This assigns the number of rows and columns, their sizes, and makes the gridlines visible. Currently, it will show as a
-straight line because the grid cells are empty. The `Auto` rows size to their content and will have zero height until
-content is added.
-
-- Add `` and `` (text input) controls to the `Grid`'s children as shown:
-
-```xml
-
- // highlight-start
- Celsius
- Fahrenheit
-
-```
-
-To complete the layout, tidy up the alignment of the controls in the `Grid` using their `Margin` property. Also, move
-the `Button` inside the `Grid`.
-
-```xml
-
- // highlight-start
- Celsius
- Fahrenheit
- Calculate
- // highlight-end
-
-```
-
-- Run the app to see the result
-
-:::info
-For full information about the complete range of Avalonia built-in controls, and their attributes, see the reference section [here](../../reference/controls/).
-:::
-
-On the next page, you will see how to improve your design-time experience by adjusting the size window when it is shown in the preview pane.
diff --git a/docs/get-started/test-drive/introduction.mdx b/docs/get-started/test-drive/introduction.mdx
deleted file mode 100644
index 80acbaf38..000000000
--- a/docs/get-started/test-drive/introduction.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: introduction
-title: Introduction
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-
-You can use this section to get started right away with Avalonia. This will take you through a simple tutorial example,
-step-by-step, and introduce you to some of the Avalonia concepts and techniques.
-
-You do not need any prior knowledge of Avalonia or other XAML-based frameworks to learn from this section.
-
-Click the Next button to get started.
-
-:::info
-If you are a developer experienced with using XAML and Avalonia project creation, you may want to skip ahead to our Basics
-section [here](../../basics) or one of the How-To Guides [here](../../guides).
-:::
-
-## Prerequisites
-
-### Install Templates
-
-Before starting, ensure that you have [installed the Avalonia templates](../install.md):
-
-```bash title='Bash'
-dotnet new install Avalonia.Templates
-```
-
-
-
- [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) provides native support for Avalonia XAML, offering a rich development experience without requiring additional extensions.
-
- For real-time XAML preview capabilities, you can enhance your workflow by installing the optional Avalonia Rider plugin.
-
-
-
- Visual Studio 2022 users can enhance their Avalonia development experience by installing our official extension from the Visual Studio Marketplace.
-
- The extension provides XAML code completion and an integrated live previewer, allowing you to see your UI updates in real-time.
-
-
-
- While we maintain a [Visual Studio Code](https://code.visualstudio.com/) extension that provides basic XAML support and a live previewer, we recommend using [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) for the best possible development experience with Avalonia.
-
- However, if you prefer to continue with Visual Studio Code, you can install our extension from the marketplace.
-
-
-
\ No newline at end of file
diff --git a/docs/get-started/test-drive/main-window.mdx b/docs/get-started/test-drive/main-window.mdx
deleted file mode 100644
index 9d8e9e48a..000000000
--- a/docs/get-started/test-drive/main-window.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
----
-id: main-window
-title: The Main Window
----
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import LayoutZonesDiagram from '/img/concepts/layout/layout-zones.png';
-import ViewModelScreenshot from '/img/get-started/test-drive/main-window-viewmodel.png';
-import AppRunningScreenshot from '/img/get-started/test-drive/main-window-app-running.png';
-import VsPreviewerScreenshot from '/img/get-started/test-drive/vs-previewer.png';
-import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane.png';
-
-You can now start your tour of an Avalonia project. We'll start with the main application window. Open the **MainWindow.axaml** file.
-
-:::info
-In Avalonia, XAML files have the extension **.axaml** (and not .xaml). This represents 'Avalonia XAML' and
-the file extension was introduced for technical reasons.
-:::
-
-## What is Happening?
-
-In the **MainWindow.axaml** XAML file, the `... ` XAML tag represents an Avalonia window. Like other
-Avalonia controls; the window will be drawn on the target platform with 4 **layout zones**: margin, border, padding and content.
-
-... ` 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.
-
-:::note
-The class name may appear as either:
-- `MainViewModel`
-- `MainWindowViewModel`
-
-Check which template your project uses to confirm the correct name.
-:::
-
-```xml title='XAML'
-
-
- Navigate to the **MainWindow.axaml** file and click the **Split View** button at the top right of the editor window.
-
-
-
-
-Navigate to the **MainView.axaml** file and click the **Split View** button at the top of the editor window.
-
-
-
-
-
-- Remove the binding `{Binding Greeting}` and change the text `
-
-```
-
-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 `` tag.
-- Enter the `Click` attribute at the end of the tag, as follows:
-
-```xml
-Calculate
-```
-
-- Run the app in Debug mode and click the Calculate button.
-
-
-
-
-
-
- You should see the result on the Output window for Debug, like this:
-
-
-
-
-
-
-
-On the next page, you will see how to use code-behind to read and change the properties of Avalonia controls at runtime.
diff --git a/docs/get-started/test-drive/the-design-preview.mdx b/docs/get-started/test-drive/the-design-preview.mdx
deleted file mode 100644
index 8b0a8fe69..000000000
--- a/docs/get-started/test-drive/the-design-preview.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: the-design-preview
-title: The Design Preview
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-On this page, you will explore the attributes of the `Window` and then use some of them to adjust the size of the `Window` when it is shown in the preview pane.
-
-Examine the XAML for the `` tag. It will look like this:
-
-```xml
-
-```
-
-The `Window` tag starts by defining some of the XML namespaces that Avalonia uses. The aliases 'x', 'd' and 'mc' are used.
-
-The design namespace 'd' allows the design-time attributes `d:DesignWidth` and `d:DesignHeight` to be set. In the above
-code sample, these have been set to make the preview look more like a mobile (portrait orientation) display.
-
-
-```xml
-
-```
-
-
-With these attributes set, the preview of the window now looks like this:
-
-
-```
-
-On the next page, you will learn how to add some action to the app by responding to the `Button` `Click` event.
diff --git a/docs/get-started/xaml-previewers.mdx b/docs/get-started/xaml-previewers.mdx
new file mode 100644
index 000000000..f33eed9d4
--- /dev/null
+++ b/docs/get-started/xaml-previewers.mdx
@@ -0,0 +1,55 @@
+---
+id: xaml-previewers
+title: XAML previewers
+description: How to use XAML previewers when developing with Avalonia in a supported IDE.
+---
+
+import RiderXamlPreviewer from '/img/get-started/rider-xaml-previewer.png';
+import VsXamlPreviewer from '/img/get-started/vs-xaml-previewer.png';
+import TestXamlPreviewer from '/img/get-started/test-xaml-previewer.png';
+
+# XAML previewers
+
+XAML previewers are available in JetBrains Rider with the third-party AvaloniaRider plugin, as well as Visual Studio with the Avalonia for Visual Studio plugin. With a XAML previewer, you can view changes to your XAML code live as you work. We strongly recommend using one for the best development experience.
+
+## Enabling the XAML previewer
+
+If you are new to developing with IDEs, here's how to enable the XAML previewer in Rider and Visual Studio.
+
+
+
+ 1. In Rider, select a **.axaml** file from the top ribbon.
+ 2. On the right side of the top ribbon, click **Editor and Preview**.
+ 3. Build your project.
+
+
+
+
+
+ In Visual Studio, the XAML previewer is usually open by default. If it isn’t, follow these steps to enable it.
+
+ 1. In Visual Studio, open a **.axaml** file.
+ 2. Click **Split View** at the top of the editor window.
+ 3. Build your project.
+
+
+
+
+
+
+## Checking it works
+
+1. Open any **.axaml** file. For this example, we’re going to use **MainWindow.axaml** from the default Avalonia template.
+2. Locate the `... ` XAML tag near the bottom.
+3. Remove `{Binding Greeting}`. Change it to any text, e.g., "Nice preview!"
+4. You should see your text appear in the preview pane as you type.
+
+
+
+
**Visual Studio** , click **Create a new project** .
-- Type 'Avalonia' in the search box.
-- Click **Avalonia Application** (the first item in the search results - for C#), then click **Next** .
-
-
-
-
**Configure you new project** dialog, and click **Create** .
-
-The template will create a new solution and project for you with the Avalonia UI dependencies set, and 5 files.
-
-
-
-
-
-
**Manage Extensions** on the **Extensions** top menu.
-- In the **Search** box, type 'Avalonia'.&
-- Click **Download** and follow the instructions (you will need to close Visual Studio while the VSIX installation runs).
-
-
-
-
**Next** (right-arrow) to get started.
-
-:::info
-If you are a more experienced user, you may want to extend your knowledge of _Avalonia UI_ instead, by using our Basics section [here](../basics) or one of the How-To Guides [here](../guides).
-:::
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md b/i18n/ru/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md
deleted file mode 100644
index f505b4906..000000000
--- a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-id: set-up-an-editor
-title: Настройка Редактора
----
-
-import AvaloniaVsExtensionMarketplaceScreenshot from '/img/get-started/avalonia-vs-extension-marketplace.png';
-import AvaloniaVsExtensionNuGetScreenshot from '/img/get-started/avalonia-vs-extension-nuget.png';
-
-# Настройка редактора
-
-Вы можете создавать приложения на Avalonia в любом редакторе кода, но мы настоятельно рекомендуем использовать IDE с поддержкой Avalonia XAML, предварительным просмотром и другими полеными функциями.
-
-## JetBrains Rider
-
-
-Среда разработки [JetBrains Rider](https://www.jetbrains.com/rider/), имеет встроенную поддержку Avalonia XAML с версии 2020.3, а также имеет отличную поддержку специфичных для Avalonia XAML функций и пользовательского кода.
-
-Rider не имеет встроенного предпросмотра, но он находится в разработке. Смотрите [GitHub проект](https://github.com/ForNeVeR/AvaloniaRider) для дополнительной информации и инструкции по установке.
-
-## Visual Studio
-
-Для поддержки Avalonia, необходимо установить расширение [Avalonia для Visual Studio](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS).
-
-Calculate
-```
-Calculate
-```
-
-:::tip
-При использовании IDE, вы можете увидеть подсказки по названию атрибутов элемента при вводе внутри XAML.
-
-
- 1
- 2
-
-```
-
-## Text Block
-
-Блок текста позволяет производить любые манипуляции с содержащимся в нем тексте.
-
-```xml
-
-
-
-
-
-
-
- Calculate
-
-```
-
-
-
-Выполните команду:
-
-```bash
-dotnet new avalonia.app -o GetStartedApp
-```
-
-Команда создаст новый проект в папке `GetStartedApp` (если папки с таким именем нет, то она будет создана).
-
-
-
-- В окне запуска Rider, выберите **New Solution**
-
-
-
-
-- В **Visual Studio** нажмите **Create a new project**.
-- В поле поиска введите `Avalonia`.
-- Выберите **Avalonia Application** и нажмите **Next**.
-
-
-
-
-## Запуск проекта
-
-Теперь вы можете запустить проект!
-
-
-
-Выберите и запустите проект `GetStartedApp`:
-
-```bash
-dotnet run
-```
-
-
-
-В Rider нажмите **Run** на панели инструментов:
-
-
-
-
-Нажмите правой кнопкой мыши по проекту `GetStartedApp.Desktop`, выберите **Set as Startup Project**.
-
- Для запуска проекта нажмите `F5`.
-
-
-
-
-Решение будет собрано и запущено.
-
-Теперь вы можете запустить ваше первое приложение на Avalonia!
-
-` и удалите его вместе со всем содержимым.
-* Добавте тег ``, как показано ниже:
-
-```xml
-
-
-```
-
-Таким образом, мы задали размеры столбцов и строк для Grid, а также включили отображение линий сетки. (линии сетки будут отображаться прямыми линиями, поскольку внутри Grid ничего нет)
-
-- Добавьте `` и Input Controls в ячейки Grid, как показано ниже:
-
-```xml
-
- Celsius
- Fahrenheit
-
-```
-
-Теперь вы можете выровнять Controls внутри Grid, используя их свойство Margin.
-
-- Также переместите кнопку в Grid, как показано ниже:
-
-```xml
-
- Celsius
- Fahrenheit
- Calculate
-
-```
-
-- Запустите приложение и насладитесь результатом.
-
-
-
-:::info
-Подробную информацию по всем встроенным Controls и из аттрибуетам, см. [здесь](../../reference/controls/).
-:::
-
-На следующей странице вы узнаете, как настроить размеры окна в панели предварительного просмотра.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.md b/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.md
deleted file mode 100644
index 31f8d3761..000000000
--- a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-id: introduction
-title: Вступление
----
-
-Данный раздел познакомит вас с азами работы на Avalonia, и позволит, следуя пошаговым инструкциям, создать первые учебные примеры. На них вы освоите некоторые концепции и фишки Avalonia.
-
-Для этого раздела вам не требуются какие-либо дополнительные знания об Avalonia или других фреймворков, использующих XAML.
-
-Для продолжение нажмите кнопку Следующая страница
-
-:::info
-Если вы опытный разработчик, то можете увелчить свои знания об Avalonia, изучая разделы [Основы](../../basics) и [Практические руководства](../../guides).
-:::
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.md b/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.md
deleted file mode 100644
index 423b67c00..000000000
--- a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-id: main-window
-title: The Main Window
----
-
-import LayoutZonesDiagram from '/img/concepts/layout/layout-zones.png';
-import ViewModelScreenshot from '/img/get-started/test-drive/main-window-viewmodel.png';
-import AppRunningScreenshot from '/img/get-started/test-drive/main-window-app-running.png';
-import VsPreviewerScreenshot from '/img/get-started/test-drive/vs-previewer.png';
-import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane.png';
-
-Теперь вы можете приступить к изучению проекта на Avalonia. Для начала, мы изучим основное окно приложения.
-Откройте файл **MainWindow.axaml**.
-
-:::info
-Обратите внимание, что Avalonia использует XAML-файлы с расширением **.axaml** (а не .xaml).
-Название расшифровывается как 'Avalonia XAML', и было введено по техническим причинам.
-:::
-
-## Что внутри?
-
-В файле **MainWindow.axaml**, тег ` ... ` обозначает окно.
-Как и другие Controls, окно будет отрисовано на целевой платформе с **4 зонами**: Margin, Border, Padding и Content.
-
-
-... `.
-Он представляет собой блок текста, а его свойство `Text`, привязано к свойству **Greeting** класса **MainViewModel**.
-Данное свойство было задано в конструкторе класса.
-
-```
-...`
-
-Вы увидите, как новый текст в панели предварительного просмотра меняется по мере ввода. Это пример работы предварительного просмотра во время проектирования Avalonia (**design-time preview behaviour**), который поможет вам точно и быстро разработать пользовательский интерфейс.
-
-- Запустите проект, чтобы убедиться, что новый текст также появляется по время выполнения программы.
-
-На следующей странице вы узнаете, как добавить обычную кнопку.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.md b/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.md
deleted file mode 100644
index 7f50f224c..000000000
--- a/i18n/ru/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-id: respond-to-an-event
-title: Обработка событий
----
-
-import SolutionCodeBehindScreenshot from '/img/get-started/test-drive/solution-code-behind.png';
-import EventDebugOutputScreenshot from '/img/get-started/test-drive/event-debug-output.png';
-
-Есть несколько способов обработки событий на Avalonia.
-На этой странице вы узнаете, как использовать один из самых распостраненных: нажатие кнопки.
-
-В начале, вы напишите обработку нажатия кнопки, которое никак не взаимодействует с другими Controls.
-
-## Code-behind
-
-XAML файл главного окна, связан с файлом C#. Если вы используете IDE, то можете найти этот файл в *Solution Explorer (рус: обозреватель решений)* - подпункт файла `.axaml`.
-
-
-
-```
-
-To add an event handler for the button, follow this procedure:
-- В файле `MainWindows.axaml.cs`, найдите конструктор `MainWindows` (инструкция была ранее)
-- Добавьте следующий код после конструктора:
-
-```csharp
-public void ButtonClicked(object source, RoutedEventArgs args)
-{
- Debug.WriteLine("Click!");
-}
-```
-
-Также необходимо подключить зависимости:
-
-```cs
-using Avalonia.Interactivity;
-using System.Diagnostics;
-```
-
-- Переключитесь на файл XAML и найдите тег ``
-- Добавить в него атрибут, как показано ниже:
-
-```xml
-
-
-```
-
-- Запустите приложение и нажмите кнопку.
-
-В окне отладки, вы дожны увидеть сообщения, например:
-
-`. Оно будет выглядеть следующим образом:
-
-```xml
-
-```
-
-Тег `` начинается с определения некоторых пространств имен XML, которые использует Avalonia.
-Также используются алиасы 'x', 'd' и 'mc'.
-
-Пространство имен 'd', позволяется указывать атрибуты для предварительного просмотра, такие как `d:DesignWidth` и `d:DesignHeight`. В примере выше, они указаны так, чтобы размеры походили на экран смартфона. (книжная ориентация)
-
-После установки новых значений, предварительный просмотр должен выглядеть так:
-
-**Visual Studio** , click **Create a new project** .
-- Type 'Avalonia' in the search box.
-- Click **Avalonia Application** (the first item in the search results - for C#), then click **Next** .
-
-
-
-
**Configure you new project** dialog, and click **Create** .
-
-The template will create a new solution and project for you with the Avalonia UI dependencies set, and 5 files.
-
-
-
-
-
-
**Manage Extensions** on the **Extensions** top menu.
-- In the **Search** box, type 'Avalonia'.&
-- Click **Download** and follow the instructions (you will need to close Visual Studio while the VSIX installation runs).
-
-
-
-
**下一步** （右箭头）开始。
-
-:::info
-如果您是一位经验丰富的用户，您可能希望通过使用我们的基础知识部分[这里](../basics)或其中一个操作指南[这里](../guides)来扩展您对_Avalonia UI_的了解。
-:::
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md
deleted file mode 100644
index 83677a25c..000000000
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/set-up-an-editor.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: set-up-an-editor
-title: 设置编辑器
----
-
-import AvaloniaVsExtensionMarketplaceScreenshot from '/img/get-started/avalonia-vs-extension-marketplace.png';
-import AvaloniaVsExtensionNuGetScreenshot from '/img/get-started/avalonia-vs-extension-nuget.png';
-
-# 设置编辑器
-
-您可以使用任何代码编辑器创建 Avalonia 应用程序，但是使用 IDE 将为您提供 Avalonia XAML 预览器和代码补全的支持。
-
-## 推荐的IDE：JetBrains Rider
-
-[JetBrains Rider](https://www.jetbrains.com/rider/) IDE 从 2020.3 版本中开始内置对 Avalonia XAML 的支持，包括对 Avalonia 特定 XAML 功能和自定义代码检查的一流支持。现在 Rider 可供个人免费使用，我们强烈建议将其作为 Avalonia 开发的主要 IDE，尤其是对于 macOS 和 Linux 上的开发人员。
-
-Rider 为 Avalonia 提供了最完整、最精致的开发体验，其内置功能包括：
-
-* 高级 XAML 完成和导航
-* 丰富的代码分析和快速修复
-* 全面的调试工具
-* 内置性能分析
-
-### AvaloniaRider 插件
-第三方的 [AvaloniaRider](https://plugins.jetbrains.com/plugin/14839-avaloniarider) 插件为 Rider 添加了 [Avalonia 文件模板](./install.md) 功能。并启用实时 XAML 预览功能。
-
-虽然 Rider 开箱即用地包含原生 Avalonia XAML 支持，但此插件可在您键入时提供 XAML 更改的实时预览，类似于 Visual Studio 和 Visual Studio Code 中提供的预览功能。
-
-请注意，该插件是可选的 - 您可以在没有它的情况下在 Rider 中开发 Avalonia 应用程序，但实时预览功能使 XAML 开发更加高效。
-
-## Visual Studio
-
-如果您正在使用 Visual Studio 开发 Avalonia，您应该安装[Avalonia for Visual Studio](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS)扩展。
-
-
-
-
-
-
-
- // highlight-next-line
-
-```
-
-- 将整行替换为下面的内容:
-```xml title='XAML'
- Calculate
-```
-- 你的 XAML 文件现在应该看起来像这样：
-```xml title='XAML'
-
-
-
-
-
-
- // highlight-next-line
- Calculate
-
-```
-
-:::tip
-如果您正在使用预览器，只要 XAML 有效，您就能在预览窗格中看到按钮出现。您还可以尝试将鼠标悬停并单击按钮以查看它在不同状态下的外观变化。
-:::
-
-- 运行应用程序以确认按钮在运行时的呈现和行为是否相同。
-
-## 控件属性
-
-XAML 使用 XML 特性来指定控件的呈现和行为。这些特性可以通过 XAML 创建的控件中的属性、调用方法和事件处理程序。
-
-例如，您会注意到刚刚实现的按钮紧贴窗口的左边缘。这是其水平对齐属性的默认值（左对齐）的结果。按照以下步骤，将水平对齐设置为居中。
-
-- 在 Button 标签中添加一个新特性，如下所示：
-
-```xml
-Calculate
-```
-
-:::tip
-如果您正在使用 IDE，您可以注意到当您向 XAML 添加特性时，Avalonia 的智能感知会做出引导。
-
-
- 1
- 2
-
-```
-
-## TextBlock
-
-`TextBlock` 控件使您可以对其包含的文本进行各种样式设置。
-
-为了继续示例，添加一个 `StackPanel`，如下（您可以包含现有的 `Button` XAML）：
-
-```xml
-
-
-
-
-
-
-// highlight-start
-
-
-
-
-
-
- Calculate
-
- // highlight-end
-
-
-```
-
-
-
-
-1. 在 Rider 启动界面上，选择 **New Solution** 以调出 `New Solution` 向导. 如果您安装了 [Avalonia Templates](../install.md)，那么您将看到三个选项。
- * **Avalonia .NET App:** 使用 code-behind 而不是 MVVM 的桌面应用程序（Windows、macOS 和 Linux）模板。
- * **Avalonia .NET MVVM App:** 使用 MVVM（默认使用 RxUI）的桌面应用程序（Windows、macOS 和 Linux）模板。
- * **Avalonia Cross-Platform Application:** 适用于所有受支持平台（Windows、macOS、Linux、iOS、Android 和 WASM）的模板。此模板需要额外的工作负载。
-
-2. 在侧栏中，向下滚动并选择 `Avalonia .NET MVVM App`
-
-
-- 在 **Visual Studio** 中, 点击 **创建新项目**。
-- 在搜索框中输入 `Avalonia`。
-- 点击 **Avalonia Application** 然后点击 **下一步**.
-
-
-
- * 使用 `⇧ ⌘ P` 调出命令面板，然后输入 ".NET" 找到并选择 **.NET: New Project** 命令。
-
-
-运行命令:
-
-```bash title='Bash'
-dotnet new avalonia.mvvm -o GetStartedApp
-```
-
-这将创建一个名为 `GetStartedApp` 的新文件夹，其中包含新项目。
-
-
-
-## 运行该项目
-
-你现在可以运行该项目!
-
-
-
-
-按下 Rider 工具栏中的 **Run** 按钮：
-
-
-
-
- 右键单击 `GetStartedApp.Desktop` 项目并选择 **设为启动项目**.
-
- 按 `F5` 运行项目。
-
-
-
- * 按 `F5` 运行项目并选择 `C#` 作为调试器
-
-
-进入 `GetStartedApp` 目录并运行：
-
-```bash title='Bash'
-dotnet run
-```
-
-
-
-该解决方案将构建并运行。
-
-您现在正在运行您的第一个 Avalonia 应用程序！
-
-` 和 `` 之间的空行
-- 插入一个 `` 标签，如下所示：
-
-```xml
-
-
-
- // highlight-start
-
-
- // highlight-end
- Calculate
-
-```
-
-该标签可以用于指定网格的行和列，设置其的大小，并控制网格线是否可见。目前它只会显示为一条直线，因为网格内部是空的。`Auto` 表明行的大小与其内容相同，并且在添加内容之前高度为零。
-
-- 在 `Grid` 中添加 `` 和 ``（文本输入）控件，如下所示：
-
-```xml
-
- // highlight-start
- Celsius
- Fahrenheit
-
-```
-
-最后，您可以使用它们的 `Margin` 属性来整理网格中控件的对齐方式。还可以将按钮移动到网格中，如下所示：
-
-```xml
-
- // highlight-start
- Celsius
- Fahrenheit
- Calculate
- // highlight-end
-
-```
-
-- 运行应用以查看结果
-
-:::info
-有关Avalonia内置控件的完整信息以及它们的属性，请参阅参考部分[这里](../../reference/controls/)。
-:::
-
-在下一页中，您将了解如何通过调整预览窗口中显示的大小来改善设计时体验。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.mdx
deleted file mode 100644
index 4c2290440..000000000
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: introduction
-title: 介绍
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-
-您可以使用此部分立即开始使用 Avalonia。这将带您逐步了解一个简单的教程示例，
-并向您介绍一些 Avalonia 概念和技术。
-
-您不需要任何有关 Avalonia 或其他基于 XAML 的框架的先前知识即可学习本节。
-
-单击下一步按钮开始。
-
-:::info
-如果您是一位有使用 XAML 和 Avalonia 项目创建经验的开发人员，您可能希望直接跳至我们的
-基础知识部分 [此处](../../basics) 或其中一个操作指南 [此处](../../guides)。
-:::
-
-## 先决条件
-
-### 安装模板
-
-开始之前，请确保您已经 [安装 Avalonia 模板](../install.md)：
-
-```bash title='Bash'
-dotnet new install Avalonia.Templates
-```
-
-
-
- [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) 为 Avalonia XAML 提供原生支持，无需额外扩展即可提供丰富的开发体验。
-
- 对于实时 XAML 预览功能，您可以通过安装可选的 Avalonia Rider 插件来增强您的工作流程。
-
-
-
- Visual Studio 2022 用户可以通过从 Visual Studio Marketplace 安装我们的官方扩展来增强他们的 Avalonia 开发体验。
-
- 该扩展提供 XAML 代码完成和集成的实时预览器，让您可以实时查看 UI 更新。
-
-
-
- 虽然我们维护一个提供基本 XAML 支持和实时预览器的 [Visual Studio Code](https://code.visualstudio.com/) 扩展，但我们建议使用 [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/)，以获得最佳的 Avalonia 开发体验。
-
- 但是，如果您更喜欢继续使用 Visual Studio Code，则可以从市场安装我们的扩展。
-
-
-
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.mdx
deleted file mode 100644
index 65b28a823..000000000
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
----
-id: main-window
-title: 主窗口
----
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import LayoutZonesDiagram from '/img/concepts/layout/layout-zones.png';
-import ViewModelScreenshot from '/img/get-started/test-drive/main-window-viewmodel.png';
-import AppRunningScreenshot from '/img/get-started/test-drive/main-window-app-running.png';
-import VsPreviewerScreenshot from '/img/get-started/test-drive/vs-previewer.png';
-import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane.png';
-
-您现在可以开始 Avalonia 项目之旅了。 我们将从主应用程序窗口开始。打开 **MainWindow.axaml** 文件。
-
-:::info
-请注意，在 Avalonia 中，XAML 文件的扩展名为 **.axaml** （而不是 .xaml）。它表示 'Avalonia XAML'，文件扩展名是出于技术原因引入的。
-:::
-
-## 发生了什么？
-
-在 **MainWindow.axaml** XAML 文件中，`... ` XAML 标记表示 Avalonia 窗口。与其他 Avalonia 控件一样，窗口将在目标平台上绘制，并具有 4 个**布局区域**：margin(边距)、border(边框)、padding(内边距) 和 content(内容)。
-
-... ` XAML 标签。这表示一个 `TextBlock` 控件，它会将 `文本` 绘制到屏幕上。
-`TextBlock` 的 `Text` 属性绑定到 **MainViewModel** 类的 **Greeting** 属性。
-
-:::note
-类名可能显示为:
-- `MainViewModel`
-- `MainWindowViewModel`
-
-检查您的项目使用哪个模板来确认名称是否正确。
-:::
-
-```xml title='XAML'
-
-
- 导航到 **MainWindow.axaml** 文件并单击编辑器窗口右上角的 **Split View** 按钮。
-
-
-
-
-导航到 **MainView.axaml** 并单击编辑器窗口顶部的 **Split View** 按钮。
-
-
-
-
-
-- 删除绑定 `{Binding Greeting}` 并且修改为 `
-
-```
-
-要为按钮添加事件处理程序，请按照以下步骤进行操作：
-
-- 在代码隐藏文件中找到 `MainWindow` 的构造函数（参见上述说明）。
-- 在构造函数之后添加以下代码：
-
-```csharp
-private void Button_OnClick(object? sender, RoutedEventArgs e)
-{
- Debug.WriteLine("Click!");
-}
-```
-
-这将需要一些额外的 using 语句：
-
-```cs
-using Avalonia.Interactivity;
-using System.Diagnostics;
-```
-
-- 切换到XAML文件，找到 `` 标签。
-- 在标记的末尾添加 `Click` 特性，如下所示：
-
-```xml
-Calculate
-```
-
-- 以 debug 模式运行应用程序并点击按钮。
-
-
-
-
-
-
- 您应该会在输出窗口的 Debug 输出源中看到如下结果：
-
-
-
-
-
-
-在下一页中，您将了解如何使用 code-behind 在运行时读取和更改 Avalonia 控件的属性。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/the-design-preview.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/the-design-preview.mdx
deleted file mode 100644
index b7f4e52b5..000000000
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/the-design-preview.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
----
-id: the-design-preview
-title: 设计预览
----
-
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-在这个页面上，您将探索窗口的属性，然后使用其中一些属性来调整窗口在预览窗格中显示时的大小。
-
-检查XAML的 `` 标签。它看起来像这样：
-
-```xml
-
-```
-
-
-`Window` （窗口）标签首先定义了 Avalonia 使用的一些 XML 命名空间。并为其指定了别名'x'、'd' 和 d'mc'。
-
-设计命名空间 'd' 允许设置设计时属性 `d:DesignWidth` 和 `d:DesignHeight`。
-在上面的代码示例中的设置，可以使预览窗格看起来更像是纵向的移动设备。
-
-```xml
-
-```
-
-设置了这些属性后，窗口的预览现在看起来像这样：
-
-  (1) (1).png)
-  (1).png)
-  (2).png)
-  (1) (1) (1).png)
-