Merge pull request #9 from avaloniachina/main

docs: tutorials ToDo List App.

i18n/zh-Hans/docusaurus-plugin-content-docs/current.json

@@ -20,11 +20,11 @@
  "description": "The label for category Stay Up-To-Date in sidebar documentationSidebar"
  },
  "sidebar.documentationSidebar.category.Samples & Tutorials": {
- "message": "Samples & Tutorials",
+ "message": "示例和教程",
  "description": "The label for category Samples & Tutorials in sidebar documentationSidebar"
  },
  "sidebar.documentationSidebar.category.ToDo List App": {
- "message": "ToDo List App",
+ "message": "待办事项列表应用",
  "description": "The label for category ToDo List App in sidebar documentationSidebar"
  },
  "sidebar.documentationSidebar.category.Music Store App": {

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/index.md

@@ -1,31 +1,31 @@
 ---
 id: index
-title: Samples & Tutorials
+title: 示例和教程
 ---
 
-This section has practical tutorials that are designed to help you learn _Avalonia UI_ and build your confidence. Here is a brief guide to what you can expect from each of the tutorials:
+本节包含一些实用教程，旨在帮助您学习 _Avalonia UI_ 并增强您的信心。以下是每个教程的简要介绍：
 
-## To Do List App
+## 待办事项列表应用
 
-A simple to do list application using the Model View View-Model (MVVM) pattern, with binding to a collection and _Reactive UI_ programming, from which you will meet:
+这是一个简单的待办事项列表应用，使用了 Model-View-ViewModel (MVVM) 模式，并绑定到一个集合和 _Reactive UI_ 编程。您将会了解以下内容：
 
 * `RaiseAndSetIfChanged`
 * `ReactiveCommand`
 * `IObservable<>`
-* `Observable.Merge()` with `Select()`, `Take()`, and `Subscribe()` methods.
+* `Observable.Merge()` 与 `Select()`、`Take()` 和 `Subscribe()` 方法的使用。
 
-This is a very good introduction to the MVVM and _ReactiveUI_ techniques recommended for _Avalonia UI_ programming. Follow the tutorial [here](todo-list-app/).
+这是一个非常好的 MVVM 和 _ReactiveUI_ 技术入门教程，特别适合用于 _Avalonia UI_ 编程。您可以在 [这里](todo-list-app/) 找到教程。
 
-## Music Store App
+## 音乐商店应用
 
-This app was made for a demonstration on a webinar hosted by _JetBrains_, and co-hosted by Dan Walmsley, one of the creators of _Avalonia UI_.
+这个应用是为 _JetBrains_ 主办的网络研讨会而制作的演示，由 _Avalonia UI_ 的其中一位创作者 Dan Walmsley 共同主持。
 
 :::info
-To view the JetBrains and Avalonia UI webinar on YouTube, see [here](https://www.youtube.com/watch?v=kZCIporjJ70).
+您可以在 YouTube 上观看 _JetBrains_ 和 _Avalonia UI_ 的网络研讨会，链接在[这里](https://www.youtube.com/watch?v=kZCIporjJ70).
 :::
 
-It uses the _JetBrains Rider_ IDE running on macOS, but the steps will be equivalent on other platforms; and the developer experience will also be similar on other IDEs such as Visual Studio.
+它使用 _JetBrains Rider_ IDE 运行在 macOS 上，但在其他平台上的步骤也是相同的；在其他 IDE（如 Visual Studio）上的开发体验也会类似。
 
-The app features a highly graphical application using the MVVM pattern, and including how to display a dialog, present images and collections of data, and implement data persistence.
+该应用以 MVVM 模式呈现高度图形化的界面，并演示了如何显示对话框、展示图像和数据集合，并实现数据持久化。
 
-Follow this demonstration [here](music-store-app/).
+您可以在 [这里](music-store-app/) 查看这个演示。

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/samples.md

@@ -1,12 +1,12 @@
 ---
 id: samples
-title: Samples
+title: 示例
 ---
 
 ## Avalonia.Samples
 
-[`Avalonia.Samples`](https://github.com/AvaloniaUI/Avalonia.Samples) is a collection of minimal samples, which should make it easy for everyone to get started with Avalonia. Each sample focuses on a single aspect of Avalonia.
+[`Avalonia.Samples`](https://github.com/AvaloniaUI/Avalonia.Samples) 是一组最小化的示例，旨在让每个人都能轻松入门 Avalonia。每个示例都专注于 Avalonia 的一个单独方面。
 
 ## AvaloniaUI.QuickGuides
 
-[`AvaloniaUI.QuickGuides`](https://github.com/AvaloniaUI/AvaloniaUI.QuickGuides) are bitesized demos convering same of the more advanced aspects of Avalonia.
+[`AvaloniaUI.QuickGuides`](https://github.com/AvaloniaUI/AvaloniaUI.QuickGuides) 是一系列简短的演示，涵盖 Avalonia 的一些更高级的方面。

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-a-data-context.md

@@ -2,18 +2,18 @@
 description: TUTORIALS - To Do List App
 ---
 
-# Add a Data Context
+# 添加数据上下文
 
-On this page, you will set the data context of the to do list view to be the `ToDoList` property.
+在本页面中，您将把待办事项列表视图的数据上下文设置为 `ToDoList` 属性。
 
-To set the data context, follow this procedure:
+要设置数据上下文，请按照以下步骤进行：
 
-- Locate the **MainWindowView.axaml** file in the **Views** folder.
-- Remove the namespace declaration for `xmlns:vm` 
-- Remove the `<Design.DataContext>` tag completely.
-- Edit the title attribute to change the window caption to 'Avalonia To Do List'.
-- Locate the content `<views:ToDoListView/>`&#x20;
-- Add the attribute `DataContext="{Binding ToDoList}"` as follows:
+- 在 **Views** 文件夹中找到 **MainWindowView.axaml** 文件。
+- 删除 `xmlns:vm` 的命名空间声明。
+- 完全删除 `<Design.DataContext>` 标签。
+- 编辑 title 属性，将窗口标题更改为 'Avalonia To Do List'。
+- 定位到内容 `<views:ToDoListView/>`。
+- 添加属性 `DataContext="{Binding ToDoList}"`，如下所示：
 
 ```xml
 <Window xmlns="https://github.com/avaloniaui"
@@ -29,16 +29,16 @@ To set the data context, follow this procedure:
 </Window
 ```
 
-The arrangement of views and view models now has an additional data context; defined as a binding, that will allow the _Avalonia UI_ binder to locate the `ToDoList` property on the `ToDoListViewModel` object. This object has already been instantiated in code during app initialization.&#x20;
+视图和视图模型的排列现在有了一个额外的数据上下文；这个数据上下文被定义为一个绑定，它将允许 _Avalonia UI_ 绑定器定位 `ToDoListViewModel` 对象上的 `ToDoList` 属性。此对象在应用程序初始化时已经被实例化。
 
-So here is the arrangement after the data context binding has been resolved:
+因此，当数据上下文绑定解析后，排列如下所示：
 
 <div style={{textAlign: 'center'}}>
  <img src="/img/gitbook-import/assets/image (20) (3).png" alt=""/>
 </div>
 
 
-Now if you run the app, the _Avalonia UI_ binder has a suitable data context for the items control binding; and the items show up in the view:
+现在，如果运行应用程序，_Avalonia UI_ 绑定器将拥有一个适合的数据上下文来进行项控件绑定，并且项目将显示在视图中：
 
 <div style={{textAlign: 'center'}}>
  <img src="/img/gitbook-import/assets/image (5) (1) (2).png" alt=""/>

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-item-buttons.md

@@ -2,17 +2,17 @@
 description: TUTORIALS - To Do List App
 ---
 
-# Add Item Buttons
+# 添加项目按钮
 
-On this page, you will learn how to complete the to do list app by adding actions for the buttons in the add item view. You will include some revealed functionality that disables the OK button until the user enters text in the input. 
+在本页面中，您将学习如何通过为添加事项视图中的按钮添加操作来完成待办事项列表应用程序。您将包括一些显示功能，该功能在用户输入后禁用 OK 按钮。
 
-Also the OK button action needs to pass the description text back to the main window view model, so it can be added to the items collection. You will do this by passing an argument to the command.
+此外，OK 按钮操作需要将描述文本传递回主窗口视图模型，以便将其添加到项目集合中。您将通过向命令传递参数来实现这一点。
 
-To alter the add item view model, follow this procedure:
+要更改添加事项视图模型，请按照以下步骤操作：
 
-- Stop the app if it is running.
-- Locate the **AddItemViewModel.cs** file in the **/ViewModels** folder.
-- Edit the code as shown. 
+- 如果应用程序正在运行，请停止它。
+- 在 **/ViewModels** 文件夹中找到 **AddItemViewModel.cs** 文件。
+- 编辑代码如下。
 
 ```csharp
 using ReactiveUI;
@@ -48,25 +48,25 @@ namespace ToDoList.ViewModels
 }
 ```
 
-Earlier in this tutorial, you bound the add item button directly to the main window view model `AddItem` method. In contrast, the OK button here requires some revealed functionality, and an argument.
+在本教程的早些时候，您直接将添加事项按钮绑定到主窗口视图模型的 `AddItem` 方法。相比之下，此处的 OK 按钮需要一些显示功能和参数。
 
-Therefore this view model code declares a reactive command for the OK button, with its second type parameter `ToDoItem` (from the data model).
+因此，此视图模型代码为 OK 按钮声明了一个反应式命令，并使用其第二个类型参数 `ToDoItem`（来自数据模型）。
 
 :::info
-The reactive command is part of _ReactiveUI_. For an introduction to this concept, see [here](../../concepts/reactiveui/reactive-command.md).
+反应式命令是 _ReactiveUI_ 的一部分。要了解此概念，请参阅[这里](../../concepts/reactiveui/reactive-command.md)。
 :::
 
-Although there is nothing special about the cancel button, a reactive command is declared for that as well. You will see later how this will allow the output from both commands to be handled in the same place.  
+虽然取消按钮没有任何特殊之处，但它也为该按钮声明了一个反应式命令。稍后您将看到，这将允许在相同位置处理两个命令的输出。
 
-Both reactive command objects are then created in the constructor. The OK command defines a function that passes a to do item parameter. The cancel command has an empty object parameter. 
+然后在构造函数中创建了两个反应式命令对象。OK 命令定义了一个函数，该函数传递了一个待办事项参数。取消命令有一个空对象参数。
 
 ```csharp
 var isValidObservable = this.WhenAnyValue(
  x => x.Description,
  x => !string.IsNullOrWhiteSpace(x));
 ```
 
-To implement the revealed functionality, the code creates an observable based on the description property. The `WhenAnyValue` method returns the result of the second lambda function (second parameter) every time the value of the description property changes.
+为了实现显示功能，代码基于描述属性创建了一个可观察对象。`WhenAnyValue` 方法在描述属性的值更改时返回第二个 lambda 函数（第二个参数）的结果。
 
 ```csharp
 private string _description = string.Empty;
@@ -77,35 +77,35 @@ public string Description
 }
 ```
 
-To ensure that the observable operates correctly, the code also adds the `RaiseAndSetIfChanged` pattern to the description property.
+为了确保可观察对象正常运行，代码还将 `RaiseAndSetIfChanged` 模式添加到了描述属性。
 
-Examine how the OK reactive command is created:
+查看如何创建 OK 反应式命令：
 
 ```csharp
 OkCommand = ReactiveCommand.Create(
  () => new ToDoItem { Description = Description }, isValidObservable);
 ```
 
-The first parameter is a lambda function that is run whenever the command is executed. The function here creates an instance of the data model `TodoItem` including the current value of the description.
+第一个参数是在每次执行命令时运行的 lambda 函数。此处的函数创建了数据模型 `ToDoItem` 的一个实例，包括当前的描述值。
 
-The second lambda function ('can execute' parameter) determines the enabled state of the reactive command. So this is passed the observable created just before.
+第二个 lambda 函数（“可执行”参数）确定了反应式命令的启用状态。因此，这里传递了刚刚创建的可观察对象。
 
-The code also creates a reactive command for the cancel button:
+代码还为取消按钮创建了一个反应式命令：
 
 ```csharp
 CancelCommand = ReactiveCommand.Create(() => { });
 ```
 
-The cancel command has no execution, so its first and only parameter does nothing. The cancel button is always enabled, so it does not have a 'can execute' parameter. 
+取消命令没有执行内容，因此它的第一个参数为空。取消按钮始终是启用的，因此它没有“可执行”参数。
 
-## Bind the OK and Cancel Buttons
+## 绑定 OK 和 Cancel 按钮
 
-Your next step is to create binding for the OK and cancel buttons in the view. 
+接下来的步骤是在视图中为 OK 和 Cancel 按钮创建绑定。
 
-To do this, follow this procedure:
+要做到这一点，请按照以下步骤操作：
 
-- Locate the **AddItemView.axaml** file in the **/Views** folder.
-- Edit the XAML as shown. 
+- 在 **/Views** 文件夹中找到 **AddItemView.axaml** 文件。
+- 编辑 XAML 如下。
 
 ```markup
 <UserControl xmlns="https://github.com/avaloniaui"
@@ -130,7 +130,7 @@ To do this, follow this procedure:
 </UserControl>
 ```
 
-Run the application and click **Add Item**. You should now see that the OK button is only enabled when there is some text in the description input.
+运行应用程序并点击 **Add Item**。现在您应该会看到，只有在描述输入框中输入一些文本时，OK 按钮才会启用。
 
 <div style={{textAlign: 'center'}}>
  <img src="/img/gitbook-import/assets/image (21) (2).png" alt=""/>
@@ -141,4 +141,4 @@ Run the application and click **Add Item**. You should now see that the OK butto
  <img src="/img/gitbook-import/assets/image (41).png" alt=""/>
 </div>
 
-On the next page you will learn how to process the new to do item, so that it appears on the list, if the user clicks OK.&#x20;
+在下一页中，您将学习如何处理新的待办事项，以便在用户点击 OK 后出现在列表中。

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/adding-new-items.md

@@ -2,22 +2,22 @@
 description: TUTORIALS - To Do List App
 ---
 
-# Add New Items
+# 添加新项目
 
-When you created the `ToDoListView` user control earlier in this tutorial, you added a button so that the user can add a new item. On this page you will add an action to the button. 
+在本教程的早期阶段，当您创建 `ToDoListView` 用户控件时，您添加了一个按钮，以便用户可以添加新项目。在本页面中，您将为按钮添加一个动作。
 
-When the user clicks the button, you want the application to show a new view that will allow the user to enter the description of a new item.
+当用户单击按钮时，您希望应用程序显示一个新视图，允许用户输入新项目的描述。
 
-## Create a New View
+## 创建一个新视图
 
-To create the new view, follow this procedure if you are using Visual Studio:
+如果您正在使用 Visual Studio，请按照以下步骤创建新视图：
 
-- In the **Solution Explorer** locate and right-click the **Views** folder. 
-- Click **Add**
-- Click **Avalonia** under **C# Items** and then click **User Control (Avalonia)**
-- In **Name** enter 'AddItemView' 
-- Click **Add** 
-- Alter the XAML to match the following:
+- 在 **解决方案资源管理器** 中找到并右键单击 **Views** 文件夹。
+- 点击 **添加**
+- 点击 **Avalonia**，然后点击 **UserControl (Avalonia)**
+- 在 **名称** 中输入 `AddItemView`
+- 点击 **添加**
+- 将 XAML 修改为如下内容：
 
 ```xml
 <UserControl xmlns="https://github.com/avaloniaui"
@@ -40,28 +40,32 @@ To create the new view, follow this procedure if you are using Visual Studio:
 </UserControl>
 ```
 
-This gives you a view which looks like this:
+这样，您就得到了一个如下图所示的视图：
 
 <div style={{textAlign: 'center'}}>
  <img src="/img/gitbook-import/assets/image (44).png" alt=""/>
 </div>
 
-The new view has a text box control which has three properties for you to review:
+新视图有一个文本框控件，其中有三个属性供您查看：
 
-* `AcceptsReturn` creates a multi-line text box.
-* `Text` binds the text that is displayed in the text box to the `Description` property on a view model (that you have not created yet).
-* `Watermark` causes a placeholder to be displayed when the text box is empty.
+* `AcceptsReturn` 创建一个多行文本框。
+* `Text` 将文本框中显示的文本绑定到视图模型上的 `Description` 属性（您还没有创建视图模型）。
+* `Watermark` 当文本框为空时显示一个占位符。
 
-## Create the View Model
+## 创建视图模型
 
-So far, you have only bound a description property. So the corresponding view model can be simple to start with.
+目前为止，您只绑定了一个描述属性。因此，相应的视图模型可以从简开始。
 
-To create a view model for the new view, follow this procedure:
+按照以下步骤为新视图创建视图模型：
 
 - In the **Solution Explorer** locate and right-click the **ViewModels** folder.&#x20;
 - Click **Add**, then **Class**.&#x20;
 - Name the class 'AddItemViewModel'. Click **Add**.
 - Add the description property as shown:
+- 在 **解决方案资源管理器** 中找到并右键单击 **ViewModels** 文件夹。
+- 点击 **添加**，然后点击 **类**。
+- 将类命名为 `AddItemViewModel`，然后点击 **添加**。
+- 添加如下所示的描述属性：
 
 ```csharp
 using System;
@@ -75,4 +79,4 @@ namespace ToDoList.ViewModels
 }
 ```
 
-On the next page you will learn how to change the view in the main window to display the new item view in place of the to do list view.
+在下一页中，您将学习如何更改主窗口中的视图，以在待办事项列表视图的位置显示新项目视图。

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/conclusion.md

@@ -2,30 +2,30 @@
 description: TUTORIALS - To Do List App
 ---
 
-# Conclusion
+# 结论
 
-On this page you will learn why the app was implemented in the way that it has been, and recommended some further reading. 
+在本页面中，您将了解为什么以这种方式实现应用程序，并推荐一些进一步阅读。
 
-## Application Solution Architecture
+## 应用程序解决方案架构
 
-This tutorial has used an application solution architecture that uses the MVVM pattern, and swaps the content of the main window to navigate between pages; while keeping the 'top level' view model in memory to provide application state. The pages (views) are composed in _Avalonia UI_ user controls. 
+本教程使用了一个应用程序解决方案架构，该架构采用MVVM模式，并在主窗口的内容之间进行交换以在页面之间导航，同时保留“顶层”视图模型以提供应用程序状态。页面（视图）由 _Avalonia UI_ 用户控件组成。
 
 <div style={{textAlign: 'center'}}>
  <img src="/img/gitbook-import/assets/image (2) (3).png" alt=""/>
 </div>
 
-This tutorial application is targeted at the _Windows_ platform where the main window exists - so it may appear to be an over complex approach.&#x20;
+这个教程应用程序针对的是 `Windows` 平台，其中存在主窗口，因此可能看起来是一种过于复杂的方法。
 
-However on other target platforms, there is no main window. An application has to be arranged as a series of views.
+然而，在其他目标平台上，没有主窗口。一个应用程序必须被安排为一系列视图。
 
 :::info
-To learn more about targeting applications for iOS (Apple) platforms, see [here](../../guides/platforms/ios/).
+要了解有关面向 iOS(Apple)平台的应用程序的更多信息，请参阅[这里](../../guides/platforms/ios/).
 :::
 
 :::info
-To learn more about targeting applications for Android mobile devices, see [here](../../guides/platforms/android/).
+要了解有关面向 Android 移动设备的应用程序的更多信息，请参阅[这里](../../guides/platforms/android/).
 :::
 
-## Further Reading
+## 进一步阅读
 
-For a full list of the _Avalonia UI_ tutorials, see [here](..).
+有关 _Avalonia UI_ 教程的完整列表，请参阅[这里](..).