From 7247c81876074f44e01adc43237bf1974128fef1 Mon Sep 17 00:00:00 2001
From: zzzdajb <122362831+zzzdajb@users.noreply.github.com>
Date: Sun, 27 Apr 2025 19:37:51 +0800
Subject: [PATCH] Add Translation For Test-Drive&Overview
---
.../test-drive/add-some-layout.mdx | 81 ++++++++++
.../test-drive/create-a-project.mdx | 142 ++++++++++++++++++
.../get-started/test-drive/introduction.mdx | 54 +++++++
.../get-started/test-drive/main-window.mdx | 129 ++++++++++++++++
.../test-drive/response-to-an-event.mdx | 105 +++++++++++++
.../test-drive/the-design-preview.mdx | 54 +++++++
.../current/overview/supported-platforms.md | 105 +++++++++++++
.../current/overview/what-is-avalonia.md | 93 ++++++++++++
8 files changed, 763 insertions(+)
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/add-some-layout.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/create-a-project.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/introduction.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/the-design-preview.mdx
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/overview/supported-platforms.md
create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/overview/what-is-avalonia.md
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/add-some-layout.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/add-some-layout.mdx
new file mode 100644
index 000000000..11c8e1672
--- /dev/null
+++ b/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` 属性更改为水平布局。
+
+
+
+```xml
+
+ 1
+ 2
+
+```
+
+## TextBlock
+
+`TextBlock` 控件支持对文本内容进行丰富的样式设置。
+
+在现有示例基础上，添加如下 `StackPanel`（包含原有的 `Button` XAML 代码）：
+
+```xml
+
+
+
+
+
+
+
+// highlight-start
+
+
+
+
+
+
+
+
+ // highlight-end
+
+```
+
+
+
+:::info
+您可以通过[此参考文档](../../reference/controls/layout-controls.md)探索 Avalonia 的其他布局控件。
+:::
+
+在下一页中，我们将在窗口中部添加输入控件。
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/create-a-project.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/create-a-project.mdx
new file mode 100644
index 000000000..e84144a42
--- /dev/null
+++ b/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`）。
+
+
+
+
+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`
+
+3. 在 **Solution Name** 字段输入 `GetStartedApp`
+4. 点击 **Create**
+
+模板将自动创建新的解决方案和项目。
+
+
+
+
+
+- 在 **Visual Studio** 中点击 **Create a new project**
+- 在搜索框输入 `Avalonia`
+- 选择 **Avalonia Application** 然后点击 **Next**
+
+
+
+- 将项目命名为 `GetStartedApp`，点击 **Create**
+
+- 在目标平台选择界面点击 **Desktop** 然后点击 **Next**
+
+- 在设计模式选择界面点击 **ReactiveUI** 然后点击 **Create**
+
+模板将创建新解决方案和两个项目。`GetStartedApp` 是跨平台共享的主项目，`GetStartedApp.Desktop` 是桌面平台的专用项目。
+
+
+
+
+
+ * 使用 `⇧ ⌘ P` 打开命令面板，输入 ".NET" 并选择 **.NET: New Project** 命令
+ 
+ * 选择 **Avalonia MVVM app** 模板
+ 
+ * 输入项目名称 `GetStartedApp` 并回车
+ 
+ * 选择项目存储路径后点击 **Create project**
+ 
+
+
+运行命令：
+
+```bash title='Bash'
+dotnet new avalonia.mvvm -o GetStartedApp
+```
+
+该命令将创建名为 `GetStartedApp` 的新项目文件夹。
+
+
+
+## 运行项目
+
+现在可以运行项目了！
+
+
+
+
+点击 Rider 工具栏中的 **Run** 按钮：
+
+
+
+
+
+
+ 右键单击 `GetStartedApp.Desktop` 项目并选择 **Set as Startup Project**
+
+ 按 `F5` 运行项目
+
+
+
+ * 按 `F5` 运行项目，选择 `C#` 调试器
+ 
+ * 选择 **C#: GetStartedApp Demo** 启动带调试器的应用
+ 
+
+
+进入 `GetStartedApp` 目录并运行：
+
+```bash title='Bash'
+dotnet run
+```
+
+
+
+解决方案将自动构建并运行。
+
+现在您已经成功运行了第一个 Avalonia 应用程序！
+
+
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
new file mode 100644
index 000000000..f69d53ccc
--- /dev/null
+++ b/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
+```
+
+
+
+ [JetBrains Rider](https://www.jetbrains.com/lp/rider-avalonia/) 为 Avalonia XAML 提供原生支持，无需额外插件即可获得完整的开发体验。
+
+ 如需增强 XAML 实时预览功能，建议安装 Avalonia Rider 插件。
+
+
+
+
+
+ Visual Studio 2022 用户可通过安装我们的官方扩展增强开发体验。
+
+ 该扩展提供 XAML 代码补全和集成式实时预览器，助您即时查看 UI 变更。
+
+
+
+
+
+
+ 我们维护的 [Visual Studio Code](https://code.visualstudio.com/) 扩展提供基础 XAML 支持和实时预览功能，但推荐使用 [JetBrains Rider](https://www.jetbrains.com/lp/rider-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
new file mode 100644
index 000000000..6ac6a5b2b
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.mdx
@@ -0,0 +1,129 @@
+---
+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文件中，`...`标签代表一个Avalonia窗口。与其他Avalonia控件类似，窗口在目标平台上绘制时会包含4个**布局区域**：外边距（margin）、边框（border）、内边距（padding）和内容区域（content）。
+
+
+
+## 主窗口内容
+
+在Window的Content属性中，您会看到`...`标签。这代表一个`TextBlock`控件，用于在屏幕上显示文本。`TextBlock`的`Text`属性绑定到**MainViewModel**类的**Greeting**属性。
+
+:::note
+类名可能显示为以下两种形式：
+- `MainViewModel`
+- `MainWindowViewModel`
+
+请根据项目使用的模板确认正确的名称。
+:::
+
+```xml title='XAML'
+
+```
+
+您可以通过修改**MainWindowViewModel.cs**文件中的文本来观察用户界面的变化。
+
+```csharp title='C#'
+namespace GetStartedApp.ViewModels;
+
+public class MainWindowViewModel : ViewModelBase
+{
+ public string Greeting => "Welcome to Avalonia! This is my added text.";
+}
+```
+
+
+
+:::info
+有关控件布局区域概念的更多信息，请参阅[此处](../../concepts/layout/layout-zones)。
+:::
+
+## XAML预览器
+
+如果您使用的IDE安装了我们的扩展（如Rider、Visual Studio或Visual Studio Code），可以在预览视图中实时查看XAML代码的修改效果。
+
+XAML预览器会在特殊的设计模式（design mode）下创建应用程序实例。当应用在设计模式下运行时，可以执行与可视化设计器协调的特殊逻辑。`Design.IsDesignMode`
+
+
+
+ 导航到**MainWindow.axaml**文件，点击编辑器窗口右上角的**Split View**按钮。
+
+
+
+
+
+ - 生成项目
+
+
+
+
+
+
+导航到**MainView.axaml**文件，点击编辑器窗口顶部的**Split View**按钮。
+
+
+
+:::info
+如果看到红色感叹号图标（左上角）和提示信息**The designer is loading...**，表示需要先生成项目才能使预览窗格正常工作。
+:::
+
+- 生成项目
+- 向左滚动预览窗格以查看预览轮廓和左上角显示的文本
+
+
+
+
+
+
+- 移除绑定`{Binding Greeting}`并修改文本为``
+
+您将在输入时看到预览窗格中的文本实时更新。这展示了Avalonia的**设计时预览行为**，能帮助您快速精准地开发用户界面。
+
+- 运行项目以查看新文本在运行时的显示效果
+
+在下一页中，我们将为窗口添加一个简单的`Button`控件。
\ No newline at end of file
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.mdx
new file mode 100644
index 000000000..9a24b1995
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.mdx
@@ -0,0 +1,105 @@
+---
+id: respond-to-an-event
+title: 响应事件
+---
+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';
+
+在 Avalonia 应用程序中有多种实现操作的方法。本页将演示最简单的一种方式：如何为按钮点击事件编写处理代码。
+
+首先，我们将编写一个不与其他控件交互的按钮点击事件处理程序。
+
+## 代码后置（Code-Behind）
+
+XAML 文件可以关联 C# 源文件，这种文件被称为"code-behind"。代码后置用于访问命名控件并处理其关联 XAML 的事件。在使用 IDE 时，您可以在**解决方案资源管理器**中将其视为 `.axaml` 文件的子项找到该文件。
+
+
+
+要修改 `MainWindow` 的代码后置：
+
+- 打开 `MainWindow.axaml.cs` 文件
+
+您应该看到如下 C# 代码：
+
+```csharp
+using Avalonia.Controls;
+
+namespace GetStartedApp.Views;
+
+public partial class MainWindow : Window
+{
+ public MainWindow()
+ {
+ InitializeComponent();
+ }
+}
+```
+
+这个分部类 `MainWindow` 对应由 Avalonia 根据现有 XAML 创建的 `Window`。XAML 和代码后置中的命名空间和类名必须一致。您可以在根 XAML 标签中找到这个类名：
+
+```xml
+
+
+```
+
+要为 `Button` 添加事件处理程序，请按照以下步骤操作：
+
+- 在代码后置文件中定位 `MainWindow` 构造函数（参见上文说明）
+- 在构造函数之后添加以下代码：
+
+```csharp
+private void Button_OnClick(object? sender, RoutedEventArgs e)
+{
+ Debug.WriteLine("Click!");
+}
+```
+
+这需要添加以下 using 语句：
+
+```cs
+using Avalonia.Interactivity;
+using System.Diagnostics;
+```
+
+- 切换到 XAML 文件并定位 `