Add Translation For Test-Drive&Overview

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/add-some-layout.mdx

@@ -0,0 +1,81 @@
+---
+id: add-some-layout
+title: 添加一些Layout
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import StackPanelZonesDiagram from '/img/get-started/test-drive/stackpanel-zones.png';
+
+Avalonia 提供了一系列内置控件来帮助您布局应用程序的视觉元素。在本页面中，您将了解如何使用其中部分布局控件。
+
+当前阶段，您的应用程序主窗口内容区域仅包含一个按钮。
+
+实际上，Avalonia 的 `Window` 在内容区域仅允许放置一个控件。要展示多个视觉元素，必须使用允许在其内容区域包含多个控件的布局控件。
+
+## StackPanel
+
+`StackPanel` 控件按照 XAML 中定义的顺序排列控件序列。默认采用垂直堆叠布局，但可以通过 `Orientation` 属性更改为水平布局。
+
+<img src={StackPanelZonesDiagram} alt="" />
+
+```xml
+<StackPanel>
+    <TextBlock>1</TextBlock>
+    <TextBlock>2</TextBlock>
+</StackPanel>
+```
+
+## TextBlock
+
+`TextBlock` 控件支持对文本内容进行丰富的样式设置。
+
+在现有示例基础上，添加如下 `StackPanel`（包含原有的 `Button` XAML 代码）：
+
+```xml
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:vm="using:GetStartedApp.ViewModels"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
+        x:Class="GetStartedApp.Views.MainWindow"
+        x:DataType="vm:MainWindowViewModel"
+        Icon="/Assets/avalonia-logo.ico"
+        Title="GetStartedApp">
+
+    <Design.DataContext>
+        <!-- 以下仅设置IDE预览器的DataContext，
+             要设置运行时的实际DataContext，请在代码中设置DataContext属性（参见App.axaml.cs） -->
+        <vm:MainWindowViewModel/>
+    </Design.DataContext>
+
+// highlight-start
+    <StackPanel>
+        <Border Margin="5" CornerRadius="10" Background="LightBlue">
+            <TextBlock Margin="5"
+                       FontSize="24" 
+                       HorizontalAlignment="Center"
+                       Text="Temperature Converter">
+            </TextBlock>
+        </Border>
+
+        <Button HorizontalAlignment="Center">Calculate</Button>
+    </StackPanel>
+    // highlight-end
+</Window>
+```
+
+<ThemedImage
+        alt="温度转换布局面板"
+        className="center"
+        sources={{
+            light: useBaseUrl('/img/get-started/test-drive/temperature-stackpanel-light.png'),
+            dark: useBaseUrl('/img/get-started/test-drive/temperature-stackpanel-dark.png'),
+        }}
+        />
+
+:::info
+您可以通过[此参考文档](../../reference/controls/layout-controls.md)探索 Avalonia 的其他布局控件。
+:::
+
+在下一页中，我们将在窗口中部添加输入控件。

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/create-a-project.mdx

@@ -0,0 +1,142 @@
+---
+id: create-a-project
+title: 创建并运行一个项目
+---
+
+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-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';
+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';
+
+
+## 创建项目
+
+我们将使用 MVVM 模式的 Avalonia 模板：`Avalonia MVVM Application`（CLI 中为 `avalonia.mvvm`）。
+
+<Tabs groupId="ide">  
+  <TabItem value="rider" label="Rider">
+
+1. 在 Rider 启动界面选择 **New Solution** 打开新建解决方案向导。若已安装 [Avalonia 模板](../install.md)，您将看到三个选项：
+    * **Avalonia .NET App:** 使用代码隐藏（code-behind）模式的桌面应用模板（支持 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`
+<ThemedImage
+            alt="使用 JetBrains Rider 创建 Avalonia 解决方案"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/rider-new-solution-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/rider-new-solution-dark.png'),
+            }}
+            />
+3. 在 **Solution Name** 字段输入 `GetStartedApp`
+4. 点击 **Create**
+
+模板将自动创建新的解决方案和项目。
+
+<ThemedImage
+            alt="使用 JetBrains Rider 创建 Avalonia 解决方案"
+            className="center"
+            sources={{
+                light: useBaseUrl('/img/get-started/test-drive/rider-solution-light.png'),
+                dark: useBaseUrl('/img/get-started/test-drive/rider-solution-dark.png'),
+            }}
+            />
+
+  </TabItem>
+  <TabItem value="vs" label="Visual Studio">
+- 在 **Visual Studio** 中点击 **Create a new project**
+- 在搜索框输入 `Avalonia`
+- 选择 **Avalonia Application** 然后点击 **Next**
+
+<img className="center" src={VsFindAvaloniaTemplateScreenshot} />
+
+- 将项目命名为 `GetStartedApp`，点击 **Create**
+
+- 在目标平台选择界面点击 **Desktop** 然后点击 **Next**
+
+- 在设计模式选择界面点击 **ReactiveUI** 然后点击 **Create**
+
+模板将创建新解决方案和两个项目。`GetStartedApp` 是跨平台共享的主项目，`GetStartedApp.Desktop` 是桌面平台的专用项目。
+
+<img className="center" src={VsNewAvaloniaProjectScreenshot} />
+
+  </TabItem>
+  <TabItem value="vsc" label="Visual Studio Code">
+     * 使用 `⇧ ⌘ P` 打开命令面板，输入 ".NET" 并选择 **.NET: New Project** 命令
+     <img className="center" src={vscode1} />
+     * 选择 **Avalonia MVVM app** 模板
+    <img className="center" src={vscode2} />
+    * 输入项目名称 `GetStartedApp` 并回车
+    <img className="center" src={vscode3} />
+    * 选择项目存储路径后点击 **Create project**
+    <img className="center" src={vscode4} />
+  </TabItem>
+  <TabItem value="cli" label="命令行工具" default>
+运行命令：
+
+```bash title='Bash'
+dotnet new avalonia.mvvm -o GetStartedApp
+```
+
+该命令将创建名为 `GetStartedApp` 的新项目文件夹。
+  </TabItem>
+</Tabs>
+
+## 运行项目
+
+现在可以运行项目了！
+
+<Tabs groupId="ide">  
+  <TabItem value="rider" label="Rider">
+
+点击 Rider 工具栏中的 **Run** 按钮：
+
+<img className="center" src={RiderRunScreenshot} />
+
+  </TabItem>
+  <TabItem value="vs" label="Visual Studio">
+
+  右键单击 `GetStartedApp.Desktop` 项目并选择 **Set as Startup Project**
+
+  按 `F5` 运行项目
+
+  </TabItem>
+  <TabItem value="vsc" label="Visual Studio Code">
+   * 按 `F5` 运行项目，选择 `C#` 调试器
+    <img className="center" src={vscode6} />
+  * 选择 **C#: GetStartedApp Demo** 启动带调试器的应用
+    <img className="center" src={vscode7} />
+  </TabItem>
+  <TabItem value="cli" label="命令行工具" default>
+进入 `GetStartedApp` 目录并运行：
+
+```bash title='Bash'
+dotnet run
+```
+  </TabItem>
+</Tabs>
+
+解决方案将自动构建并运行。
+
+现在您已经成功运行了第一个 Avalonia 应用程序！
+
+<ThemedImage
+  alt="应用程序运行界面"
+  className="center"
+  sources={{
+      light: useBaseUrl('/img/get-started/test-drive/main-window-app-running-light.png'),
+      dark: useBaseUrl('/img/get-started/test-drive/main-window-app-running-dark.png'),
+  }}
+  />

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.mdx

@@ -0,0 +1,54 @@
+---
+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
+```
+
+<Tabs groupId="ide">
+    <TabItem value="rider" label="Rider">
+    [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) 为 Avalonia XAML 提供原生支持，无需额外插件即可获得完整的开发体验。
+
+    如需增强 XAML 实时预览功能，建议安装 Avalonia Rider 插件。
+
+    <Button label="下载 Avalonia Rider 插件" link="https://plugins.jetbrains.com/plugin/14839-avaloniarider" />
+
+    </TabItem>
+    <TabItem value="vs" label="Visual Studio">
+    Visual Studio 2022 用户可通过安装我们的官方扩展增强开发体验。
+
+    该扩展提供 XAML 代码补全和集成式实时预览器，助您即时查看 UI 变更。
+
+    <Button label="下载 Avalonia Visual Studio 2022 扩展" link="https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS" />
+
+
+    </TabItem>
+    <TabItem value="vsc" label="Visual Studio Code">
+    我们维护的 [Visual Studio Code](https://code.visualstudio.com/) 扩展提供基础 XAML 支持和实时预览功能，但推荐使用 [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) 获得最佳开发体验。
+
+    若仍希望使用 Visual Studio Code，可通过应用市场安装我们的扩展。
+
+    <Button label="下载 Avalonia Visual Studio Code 扩展" link="https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS" />
+
+    </TabItem>
+</Tabs>