From f91386571e720f9dede60dc86fe0ac56c65548c8 Mon Sep 17 00:00:00 2001 From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Date: Tue, 1 Aug 2023 19:12:30 +0800 Subject: [PATCH] docs: tutorials ToDo List App. --- .../current.json | 4 +- .../current/tutorials/index.md | 24 ++++---- .../current/tutorials/samples.md | 6 +- .../todo-list-app/add-a-data-context.md | 24 ++++---- .../todo-list-app/add-item-buttons.md | 52 ++++++++-------- .../todo-list-app/adding-new-items.md | 44 +++++++------- .../tutorials/todo-list-app/conclusion.md | 20 +++---- .../todo-list-app/creating-a-model.md | 40 ++++++------- .../todo-list-app/creating-a-new-project.md | 58 +++++++++--------- .../todo-list-app/creating-a-view-model.md | 44 +++++++------- .../todo-list-app/creating-a-view.md | 42 ++++++------- .../current/tutorials/todo-list-app/index.md | 18 +++--- .../todo-list-app/inspect-the-xaml.md | 51 ++++++++-------- .../tutorials/todo-list-app/locating-views.md | 30 +++++----- .../todo-list-app/main-window-content.md | 34 +++++------ .../tutorials/todo-list-app/navigate-views.md | 60 +++++++++---------- .../todo-list-app/process-a-new-item.md | 40 ++++++------- .../todo-list-app/wiring-up-the-views.md | 28 ++++----- 18 files changed, 310 insertions(+), 309 deletions(-) diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json index bc5cfe1af..805adf9b0 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json +++ b/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": { diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/index.md index 06fb0ca7a..37af82703 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/index.md +++ b/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/) 查看这个演示。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/samples.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/samples.md index 40efe89d1..6451e8acf 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/samples.md +++ b/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. \ No newline at end of file +[`AvaloniaUI.QuickGuides`](https://github.com/AvaloniaUI/AvaloniaUI.QuickGuides) 是一系列简短的演示，涵盖 Avalonia 的一些更高级的方面。 \ No newline at end of file diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-a-data-context.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-a-data-context.md index 2d7370705..5df0305ee 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-a-data-context.md +++ b/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 `` tag completely. -- Edit the title attribute to change the window caption to 'Avalonia To Do List'. -- Locate the content `` -- Add the attribute `DataContext="{Binding ToDoList}"` as follows: +- 在 **Views** 文件夹中找到 **MainWindowView.axaml** 文件。 +- 删除 `xmlns:vm` 的命名空间声明。 +- 完全删除 `` 标签。 +- 编辑 title 属性，将窗口标题更改为 'Avalonia To Do List'。 +- 定位到内容 ``。 +- 添加属性 `DataContext="{Binding ToDoList}"`，如下所示： ```xml -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_ 绑定器将拥有一个适合的数据上下文来进行项控件绑定，并且项目将显示在视图中：
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-item-buttons.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-item-buttons.md index a293c302a..c610d952f 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/add-item-buttons.md +++ b/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,17 +48,17 @@ 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( @@ -66,7 +66,7 @@ var isValidObservable = this.WhenAnyValue( 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 ``` -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 按钮才会启用。
@@ -141,4 +141,4 @@ Run the application and click **Add Item**. You should now see that the OK butto
-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. +在下一页中，您将学习如何处理新的待办事项，以便在用户点击 OK 后出现在列表中。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/adding-new-items.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/adding-new-items.md index e4371598c..96d79643c 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/adding-new-items.md +++ b/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 ``` -This gives you a view which looks like this: +这样，您就得到了一个如下图所示的视图：
-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. - Click **Add**, then **Class**. - 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. +在下一页中，您将学习如何更改主窗口中的视图，以在待办事项列表视图的位置显示新项目视图。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/conclusion.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/conclusion.md index a170384b4..83545827a 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/conclusion.md +++ b/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_ 用户控件组成。
-This tutorial application is targeted at the _Windows_ platform where the main window exists - so it may appear to be an over complex approach. +这个教程应用程序针对的是 `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_ 教程的完整列表，请参阅[这里](..). diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-model.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-model.md index 383049969..9ed53d6d7 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-model.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-model.md @@ -2,26 +2,26 @@ description: TUTORIALS - To Do List App --- -# Create a Model +# 创建数据模型 -So far the in this tutorial, you have created a basic view where none of the controls do anything yet; and linking it all together using the MVVM pattern is still a couple of steps away. +到目前为止，在本教程中，您已经创建了一个基本视图，其中没有任何控件起作用；并且将所有内容与 MVVM 模式链接在一起还有一些步骤。 -On this page you will create the model part of the MVVM pattern for app. +在本页中，您将为应用程序创建 MVVM 模式的模型部分。 -In a real MVVM application, the model handles everything that is not in the application-specific logic of the view model, or the view itself. This may include data storage and any services needed to supply storage, and maybe other external services that the app needs (email for example). +在真实的 MVVM 应用程序中，模型处理除视图模型的应用程序特定逻辑和视图本身之外的所有内容。这可能包括数据存储以及提供存储所需的任何服务，以及可能是应用程序所需的其他外部服务（例如电子邮件）。 -In this tutorial example, you will create a mock database and a service to access it. These will take the place of the model part of the application. +在本教程示例中，您将创建一个模拟数据库和一个用于访问它的服务。这些将代替应用程序的模型部分。 -### Data Model +### 数据模型 -The data model contains data entities (as they would appear if stored in a database for example). +数据模型包含数据实体（例如，如果它们存储在数据库中，它们将如何显示）。 -In this tutorial, you will create a single entity for the data model. Follow this procedure to create the data model: +在本教程中，您将为数据模型创建一个单一实体。按照以下步骤创建数据模型： -- Stop the app if it is still running. -- Locate the **Models** folder in the project, and rename it as 'DataModel'. -- Add a new class to the folder. Name the class 'ToDoItem'. -- Change the code in the class as shown: +- 如果应用程序仍在运行，请停止它。 +- 定位项目中的 **Models** 文件夹，并将其重命名为“DataModel”。 +- 向文件夹中添加一个新类。将该类命名为“ToDoItem”。 +- 更改类中的代码如下所示： ```csharp namespace ToDoList.DataModel @@ -34,15 +34,15 @@ namespace ToDoList.DataModel } ``` -### Create a Fake Data Service +### 创建虚拟数据服务 -In a real application, you might use a SQL database and write services based on the _Microsoft Entity Framework_ to read and write data. However, this is well beyond the scope of this tutorial! So to test the app, you will create a fake data service that acts as if it has a database, but really just uses an array in memory. +在真实的应用程序中，您可能会使用 SQL 数据库，并基于 _Microsoft Entity Framework_ 编写读取和写入数据的服务。然而，这远超出了本教程的范围！因此，为了测试应用程序，您将创建一个虚拟数据服务，它会像有一个数据库一样运行，但实际上只是在内存中使用一个数组。 -Follow this procedure to create the fake database service: +按照以下步骤创建虚拟数据库服务： -- Create a new project folder and name it 'Services'. -- Add a new class to the folder, name it 'ToDoListService'. -- Add the code shown to the new class: +- 创建一个新的项目文件夹，并将其命名为“Services”。 +- 向该文件夹中添加一个新类，将其命名为“ToDoListService”。 +- 将以下代码添加到新类中： ```csharp using System.Collections.Generic; @@ -62,6 +62,4 @@ namespace ToDoList.Services } ``` -That is the model done for now. On the next page, you will learn how to add a view model to the app to complete the MVVM pattern. - -### +到此为止，模型已经完成。在下一页中，您将学习如何向应用程序添加一个视图模型以完成 MVVM 模式。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-new-project.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-new-project.md index 5c94ffb29..6f2accb3e 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-new-project.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-new-project.md @@ -2,16 +2,16 @@ description: TUTORIALS - To Do List App --- -# Create a New Project +# 创建新项目 -On this page you will learn how to create a new project for the to do list app. +在本页中，您将学习如何为待办事项列表应用创建一个新项目。 ## Visual Studio -Before you start, check you have installed the _Avalonia UI_ extension for Visual Studio. +在开始之前，请确保您已经安装了 Visual Studio 的 _Avalonia UI_ 扩展。 :::info -For full instructions about the extension, see [here](../../get-started/install-the-avalonia-extension.md). +有关扩展的完整说明，请参阅：[这里](../../get-started/install-the-avalonia-extension.md). :::
@@ -20,16 +20,16 @@ For full instructions about the extension, see [here](../../get-started/install-
-With the extension installed, start this tutorial by following these instructions: +安装扩展后，请按照以下说明开始本教程： -- Start _Microsoft Visual Studio_ -- Click **Create a new project** -- In **Search for Templates**, enter 'Avalonia' -- Click **Avalonia MVVM Application** -- Click **Next** -- In **Project name**, enter 'ToDoList', and click **Create** +- 启动 _Microsoft Visual Studio_ +- 点击 **创建新项目** +- 在 **搜索模板** 中输入 'Avalonia' +- 点击 **Avalonia MVVM Application** +- 点击 **下一步** +- 在 **项目名称** 中输入 'ToDoList'，然后点击 **创建** -The newly created solution will look like this: +新创建的解决方案将如下所示：
@@ -37,19 +37,19 @@ The newly created solution will look like this: ## .NET Core CLI -Before you start, check you have installed the _Avalonia UI_ templates for .NET Core. +在开始之前，请确保您已经安装了 .NET Core 的 _Avalonia UI_ 模板。 :::info -For full instructions about the starting with the CLI, see [here](../../get-started/getting-started.md). +有关 CLI 入门的完整说明，请参阅：[这里](../../get-started/getting-started.md). ::: -With the templates installed, you can create the application from the template: +安装模板后，您可以使用模板创建应用程序： ```bash dotnet new avalonia.mvvm -o ToDoList -n ToDoList ``` -The newly created project will be look like this: +新创建的项目将如下所示： ```bash ToDoList @@ -70,24 +70,24 @@ ToDoList | |- MainWindow.axaml.cs ``` -## MVVM Project Structure +## MVVM 项目结构 -This section applies to both Visual Studio and CLI. +此部分适用于 Visual Studio 和 CLI。 -You can see there are folders for each of the concepts in the MVVM pattern (models, views and view models) as well as some other files and folders. +您可以看到每个 MVVM 模式概念（模型、视图和视图模型）都有相应的文件夹，以及其他一些文件和文件夹。 -* The `/Assets` folder contains binary assets for your application such as icons and bitmaps. Files placed here will automatically be included as resources in the application. -* The `/Models` folder is currently empty, you will add a file here later in this tutorial. -* The `/ViewModels` folder contains a base class for view models and a rudimentary view model for the application main window. -* The `/Views` folder contains the application main window AXAML file. You will add other view files here during this tutorial. -* The `App.axaml` file is for XAML styles and data templates that apply to the whole application. You will not change this file in this tutorial. -* The `Program.cs` file is the entry point for execution of the application. You can configure additional platform options for _Avalonia UI_ here if necessary, however you will not change this file in this tutorial. -* The `ViewLocator.cs` file is a special helper class, and it is used in the `App.axaml` file. The significance of this file will be explained later in this tutorial. +* `/Assets` 文件夹包含应用程序的二进制资源，如图标和位图。放在此处的文件将自动包含为应用程序的资源。 +* `/Models` 文件夹目前为空，您将在本教程后面的阶段在此处添加文件。 +* `/ViewModels` 文件夹包含视图模型的基类以及用于应用程序主窗口的简单视图模型。 +* `/Views` 文件夹包含应用程序主窗口的 AXAML 文件。在本教程中，您将在此处添加其他视图文件。 +* `App.axaml` 文件用于应用于整个应用程序的 XAML 样式和数据模板。在本教程中，您不会更改此文件。 +* `Program.cs` 文件是应用程序的执行入口点。您可以在此配置 _Avalonia UI_ 的其他平台选项（如果需要的话），但在本教程中，您不会更改此文件。 +* `ViewLocator.cs` 文件是一个特殊的辅助类，它在 `App.axaml` 文件中使用。此文件的重要性将在本教程中解释。 -## AXAML Files +## AXAML 文件 -_Avalonia UI_ uses the file extension `.axaml` for its XAML files, and this includes those created by the Visual Studio solution template, and more recent versions of the .NET Core CLI templates. If you previously used older .NET Core CLI templates, then the extension may be `.xaml`. +_Avalonia UI_ 使用 `.axaml` 作为其 XAML 文件的文件扩展名，这包括通过 Visual Studio 解决方案模板创建的文件，以及较新版本的 .NET Core CLI 模板创建的文件。如果您之前使用较旧版本的 .NET Core CLI 模板，则扩展名可能是 `.xaml`。 :::info -For more background on Avalonia UI XAML see [here](../../basics/user-interface/introduction-to-xaml.md). +有关 Avalonia UI XAML 的更多背景信息，请参阅：[这里](../../basics/user-interface/introduction-to-xaml.md). ::: diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view-model.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view-model.md index 03b33240a..f5e7c1a15 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view-model.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view-model.md @@ -2,21 +2,21 @@ description: TUTORIALS - To Do List App --- -# Create a View Model +# 创建视图模型 -On this page, you will learn how to create a view model to provide the application logic for your app. This is the final part of the MVVM pattern, and it will make use of the _ReactiveUI_ framework. +在本页中，您将学习如何创建一个视图模型，为应用程序提供应用程序逻辑。这是 MVVM 模式的最后一部分，并且它将使用 _ReactiveUI_ 框架。 :::info -To review the concepts behind MVVM pattern programming using ReactiveUI, see [here](../../concepts/reactiveui/). +要查看使用 ReactiveUI 进行 MVVM 模式编程的背后概念，请参阅[这里](../../concepts/reactiveui/)。 ::: -The purpose of the view model is organise data and actions for the application in a way that suits the views. For reasons that will become clear in a future step of this tutorial, you will adopt the convention of naming a view model after the view that it supports in this way. +视图模型的目的是以适合视图的方式组织数据和操作应用程序。由于在本教程的后续步骤中将变得清楚的原因，您将采用按照此方式支持视图的视图模型的命名约定。 - Follow this procedure to add the to do list view model to your app: +按照以下步骤将待办事项列表视图模型添加到应用程序中： -- Locate the **ViewModels** folder and add a new class. -- Name the new class 'ToDoListViewModel'. -- Add the following code: +- 定位 **ViewModels** 文件夹，并添加一个新的类。 +- 将新类命名为“ToDoListViewModel”。 +- 添加以下代码： ```csharp using System.Collections.Generic; @@ -37,34 +37,34 @@ namespace ToDoList.ViewModels } ``` -Your view model is very simple at this stage. Its constructor takes a collection of to do item data models and keeps them in an observable collection . This is publicly available through the `ListItems` property here on the view model. +在目前阶段，您的视图模型非常简单。其构造函数接收一个待办事项数据模型的集合，并将其保存在可观察的集合中。通过视图模型上的 `ListItems` 属性，该集合对外可用。 -The view model derives from the base class `ViewModelBase` that was created by the solution template. More about this later in the tutorial. +视图模型从由解决方案模板创建的基类 `ViewModelBase` 派生。在教程的后面部分会详细介绍它。 -## Separation in MVVM +## MVVM 中的分离 -You have seen that the to do list view model has a constructor that requires a collection of to do item data models to be provided as the parameter. In turn this collection will be retrieved from the fake data service (model) at some point. +您已经看到待办事项列表视图模型具有一个需要提供待办事项数据模型集合的构造函数参数。反过来，此集合将在某个时候从虚拟数据服务（模型）中检索。 -Before you start to populate the view model with data, have another look at the MVVM pattern: +在开始填充视图模型数据之前，再次查看 MVVM 模式：
-The stated purpose of the pattern is to separate the view and view model so that, for example, the view model may be independently tested. This removes the dependency between the view and view model. +该模式的声明目的是将视图和视图模型分开，以便例如可以独立测试视图模型。这消除了视图和视图模型之间的依赖关系。 -In a real application, you would aim to ensure separation between the view model and the model, for similar reasons. However this is beyond the scope of this tutorial, so here you will make the view model dependent on the model. +在真实的应用程序中，您会努力确保视图模型和模型之间的分离，原因类似。但是，这超出了本教程的范围，因此在这里，您将使视图模型依赖于模型。 :::info -Separation of the view model and the model in the MVVM pattern can be achieved by Dependency Injection (DI). For guidance on how to use DI with MVVM and _Avalonia UI_, see [here](../../guides/implementation-guides/how-to-implement-dependency-injection.md). +可以通过依赖注入（DI）实现 MVVM 模式中视图模型和模型的分离。有关如何在 MVVM 和 Avalonia UI 中使用 DI 的指导，请参阅[这里](../../guides/implementation-guides/how-to-implement-dependency-injection.md). ::: -## View Model to Model Dependency +## 视图模型对模型的依赖 -Follow this procedure to make the main window view model depend on the model, that is dependent on the to do list data service: +按照以下步骤，使主窗口视图模型依赖于模型，即依赖于待办事项列表数据服务： -- Locate the **MainWindowViewModel** class file, in the **ViewModels** folder. -- Alter the code as follows: +- 找到 **ViewModels** 文件夹中的 **MainWindowViewModel** 类文件。 +- 将代码更改如下： ```csharp using ToDoList.Services; @@ -73,7 +73,7 @@ namespace ToDoList.ViewModels { public class MainWindowViewModel : ViewModelBase { - //this has a dependency on the ToDoListService + // 这个视图模型依赖于 ToDoListService public MainWindowViewModel() { @@ -86,4 +86,4 @@ namespace ToDoList.ViewModels } ``` -On the next page you will learn how to connect the views to the view models using data binding. +在下一页中，您将学习如何使用数据绑定将视图连接到视图模型。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view.md index 990b914ac..edc0b8c8a 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/creating-a-view.md @@ -2,35 +2,35 @@ description: TUTORIALS - To Do List App --- -# Create a New View +# 创建新视图 -On this page, you will add a view to display the list of to do items, with a button to add a new item. +在本页中，您将添加一个视图来显示待办事项列表，其中包含一个添加新项目的按钮。 -To get the tutorial started, you will use hard-coded data for the list items. Later you will connect the view to some data in the view model. +为了开始教程，您将使用硬编码的数据作为列表项。稍后，您将把视图连接到视图模型中的一些数据。 -In _Avalonia UI_, the UI element corresponding to a MVVM view can be either a window or a user control. This new view will be user control, and later you will use the main window to display it. +在 _Avalonia UI_ 中，对应于 MVVM 视图的 UI 元素可以是窗口或用户控件。这个新视图将是一个用户控件，稍后您将使用主窗口来显示它。 ### Visual Studio -Follow these instructions to add a new user control: +按照以下说明添加一个新的用户控件： -- In the **Solution Explorer** locate and right-click the **Views** folder. -- Click **Add** and then **New Item** -- Click **Avalonia** under **C# Items** and then click **User Control (Avalonia)** -- In **Name** enter 'ToDoListView' -- Click **Add** +- 在 **解决方案资源管理器** 中找到并右键单击 **Views** 文件夹。 +- 点击 **添加**，然后点击 **新建项** +- 在 **C# 项** 下点击 **Avalonia** ，然后点击 **UserControl (Avalonia)** +- 在 **名称** 中输入 `ToDoListView` +- 点击 **添加** ### .NET Core CLI -Run the following command from the root folder of your project, that is the folder that contains the `Program.cs` file and the `/Views` folder: +从您的项目根文件夹（包含 `Program.cs` 文件和 `/Views` 文件夹的文件夹）运行以下命令： ``` dotnet new avalonia.usercontrol -o Views -n ToDoListView --namespace ToDoList.Views ``` -### The User Control +### 用户控件 -You will see the new AXAML file created in the `/Views` folder +您会看到在 `/Views` 文件夹中创建了新的 AXAML 文件 ```markup ``` -You will also find a `ToDoListView.axaml.cs` file containing the code-behind for the view (in Visual Studio this is nested under the AXAML file. The code-behind looks like this: +您还会找到一个包含视图code-behind的 `ToDoListView.axaml.cs` 文件（在 Visual Studio 中，它嵌套在 AXAML 文件下面）。code-behind如下所示： ```csharp using Avalonia.Controls; @@ -60,11 +60,11 @@ namespace ToDoList.Views } ``` -You are not going to change the code-behind file in this tutorial, but notice that the user control class is called `ToDoListView` and it is located in the `ToDoList.Views` namespace. +在本教程中，您不会更改code-behind文件，但请注意，用户控件类名为 `ToDoListView`，位于 `ToDoList.Views` 命名空间中。 -### Resize the Preview Pane +### 调整预览窗格大小 -To make the design-time preview look more like a mobile phone in portrait orientation, locate the design-time width and height properties for the user control and set them as shown: +为了使设计时预览更像是纵向定向的手机，找到用户控件的设计时宽度和高度属性，并设置如下： 
<UserControl 
 ...
@@ -73,11 +73,11 @@ To make the design-time preview look more like a mobile phone in portrait orient
-Repeat the process with the main window. +然后对主窗口进行同样的操作。 -### Edit the User Control +### 编辑用户控件 -Edit the contents of `Views/TodoListView.axaml` to contain the following: +编辑 `Views/TodoListView.axaml` 的内容如下： ```markup ``` -If you are using the Visual Studio extension you should see the contents of the control displayed in the previewer after completing a build: +如果您使用 Visual Studio 扩展，完成构建后应该可以在预览器中看到控件内容的显示：
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/index.md index 39ceca3b2..e0f827baf 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/index.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/index.md @@ -1,9 +1,9 @@ --- id: index -title: To Do List App +title: 待办事项列表应用 --- -In this tutorial you will create a simple to do list application using _Avalonia UI_ and the Model View View-Model (MVVM) pattern with binding to the to do list (collection) data. +在本教程中，您将使用 Avalonia UI 和 Model View View-Model (MVVM) 模式来创建一个简单的待办事项列表应用，该应用与待办事项列表（集合数据）进行绑定。
@@ -12,21 +12,21 @@ In this tutorial you will create a simple to do list application using _Avalonia :::info -You can find the code for the completed application [here](https://github.com/grokys/todo-tutorial). +您可以在此找到已完成应用程序的代码：[这里](https://github.com/grokys/todo-tutorial). ::: -## MVVM Pattern +## MVVM 模式 -In this tutorial you will learn more about using the Model-View-ViewModel (MVVM) pattern. It is common to use the MVVM pattern when writing GUI applications, and MVVM is recommended in most scenarios for _Avalonia UI_ applications. +在本教程中，您将学习更多关于使用 Model-View-ViewModel (MVVM) 模式的知识。在编写图形用户界面应用程序时，通常会使用 MVVM 模式，并且在大多数情况下，Avalonia UI 应用程序都推荐使用 MVVM。 :::info -To revise some of the background concepts behind using the MVVM pattern with _Avalonia UI_, and when its use is appropriate, see [here](../../concepts/the-mvvm-pattern/). +要了解有关在 Avalonia UI 中使用 MVVM 模式以及何时适用该模式的一些背景概念，请参阅：[这里](../../concepts/the-mvvm-pattern/). ::: -## Development Methods +## 开发方法 -This tutorial contains instructions for you to use whether you program with _Microsoft Visual Studio_ on Windows, or the .NET Core Command Line Interface (.NET Core CLI) and a different editor. The screenshots shown are all from _Microsoft Visual Studio_ and running on Windows. +本教程包含供您使用的说明，无论您是在 Windows 上使用 _Microsoft Visual Studio_，还是在 .NET Core 命令行界面 (.NET Core CLI) 和其他编辑器进行编程。所展示的屏幕截图均来自 _Microsoft Visual Studio_，并在 Windows 上运行。 :::info -To read about other tutorials in this documentation, see [here](../index.md). +要了解本文档中的其他教程，请参阅：[这里](../index.md). ::: diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/inspect-the-xaml.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/inspect-the-xaml.md index 830412a19..918cc5f3e 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/inspect-the-xaml.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/inspect-the-xaml.md @@ -2,11 +2,11 @@ description: TUTORIALS - To Do List App --- -# Inspect the XAML +# 检查 XAML -This is a good time for you to take a look at the code generated by the view template. +现在是时候看一下视图模板生成的代码了。 -Start with the root element, its declarations of namespaces and settings: +首先从根元素开始，它的命名空间和设置的声明如下： ```xml ``` - -The root element in the XAML file starts ` ``` -This declares that the XAML in the file contains _Avalonia UI_ XAML. +这表示文件中的 XAML 包含 _Avalonia UI_ XAML。 :::warning -Without this entry nothing will work in your _Avalonia UI_ project! +如果没有这个声明，您的 _Avalonia UI_ 项目将无法工作！ ::: -The next namespace is `xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"` and this is used to import Microsoft XAML language features that are used by _Avalonia UI_. +下一个命名空间是 `xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"` 用于导入 _Avalonia UI_ 使用的 Microsoft XAML 语言特性。 :::info -For more information see the Microsoft documentation [here](https://learn.microsoft.com/en-us/dotnet/desktop/xaml-services/namespace-language-features). +有关更多信息，请参阅 [Microsoft 文档](https://learn.microsoft.com/en-us/dotnet/desktop/xaml-services/namespace-language-features). ::: -The remaining two namespaces are used to communicate information to the _Avalonia UI_ designer (code and preview panes). +其余的两个命名空间用于向 _Avalonia UI_ 设计器（代码和预览窗格）传递信息。 ```xml ``` -For example, as you have already done, you can specify the width and height of the control as it is displayed in the designer preview pane: +例如，就像您已经做过的那样，您可以在设计时预览窗格中指定控件的宽度和高度： 
<UserControl ...
 mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450" ... >
-The entry `mc:Ignorable="d"` tells the _Avalonia UI_ XAML engine that entries beginning with `d:` can be ignored at runtime. +`mc:Ignorable="d"` 条目告诉 _Avalonia UI_ XAML 引擎在运行时可以忽略以 `d:` 开头的条目。 -The last line links the XAML file with its code-behind class. Note that the fully-qualified class name has to be used here. +最后一行将 XAML 文件链接到其代码后台类。请注意，这里必须使用完全限定的类名。 ```markup ``` -## Control Content +## 控件内容 -The content zone of the user control is occupied by a dock panel: +用户控件的内容区域由 DockPanel 占据： ```xml ``` :::info -To review the concept of layout zones, see [here](../../concepts/layout/layout-zones). +要了解布局区域的概念，请参阅 [这里](../../concepts/layout/layout-zones). ::: -A user control can only contain a single child control in its content zone; so you will often need to start a layout with one of the _Avalonia UI_ panel controls, as these allow you to contain multiple child controls in the space instead. +用户控件只能包含一个子控件在其内容区域中，因此您通常需要以 _Avalonia UI_ 面板控件之一开始布局，因为这些面板允许您在空间中包含多个子控件。 :::info -You can browse the full range of _Avalonia UI_ panel controls in the reference section [here](../../reference/controls/panel.md). +您可以在参考部分浏览完整范围的 _Avalonia UI_ [面板控件](../../reference/controls/panel.md)。 ::: -In this example, you are using the dock panel `` control. This is a type of panel which lays out its child controls along the edges of its content zone. Each child control can specify which edge: top, bottom, left or right. This is done using the `DockPanel.Dock` attribute. For example, this XAML aligns a button at the bottom of the view; and it is stretched to fit the width, with its text centered. +在这个例子中，您使用了 `` 控件。这是一种面板类型，它沿着其内容区域的边缘布局其子控件。每个子控件都可以指定哪个边：顶部、底部、左侧或右侧。这是通过 `DockPanel.Dock` 属性完成的。例如，这个 XAML 将一个按钮对齐在视图底部，并且它会被拉伸以适合宽度，并且它的文本居中。 ```xml ``` -In a dock panel there must be a single control filling the remaining space in its content zone (wherever that is located); or it will not display correctly. This filling control must have no `DockPanel.Dock` attribute. The tutorial uses a stack panel to fill the remainng space: +在 DockPanel 中，必须有一个单一的控件填充其内容区域的剩余空间（无论该空间位于何处）；否则它将无法正确显示。这个填充控件不能有 `DockPanel.Dock` 属性。本教程使用 StackPanel 来填充剩余空间： ```xml ``` -The stack panel lays out its child controls in a stack, which is vertical by default. (You can make the stack horizontal by setting the `Orientation` attribute.) You will often use the stack panel in your _Avalonia UI_ layouts. +StackPanel 在默认情况下会将其子控件垂直堆叠。（您可以通过设置 `Orientation` 属性使堆叠水平。）在 _Avalonia UI_ 布局中，您会经常使用 StackPanel。 :::info -To more detail about the stack panel, see the reference [here](../../reference/controls/stackpanel.md). +有关 StackPanel 的更多细节，请参阅参考 [这里](../../reference/controls/stackpanel.md). ::: -The remaining XAML adds the hard-coded to do list items as check boxes: +剩余的 XAML 将硬编码的待办事项列表项作为复选框添加： ```markup Walk the dog Buy some milk ``` -Notice that these controls have the margin attribute set. This will separate them a little visually. +请注意，这些控件设置了 margin 属性。这将在视觉上将它们分隔开一点。 :::info -The margin is one of the _Avalonia UI_ control layout zones. To review the concept of layout zones, see [here](../../concepts/layout/layout-zones). +margin 是 _Avalonia UI_ 控件布局区域之一。要了解布局区域的概念，请参阅 [这里](../../concepts/layout/layout-zones). ::: -On the next page, you will learn how to display the view created here in the main window of the app. +在下一页中，您将学习如何在应用程序的主窗口中显示此处创建的视图。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/locating-views.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/locating-views.md index 3cd2ca00a..41348cfae 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/locating-views.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/locating-views.md @@ -2,11 +2,11 @@ description: TUTORIALS - To Do List App --- -# The View Locator +# 视图定位器 -On this page you will learn how the view locator class that the solution template added to your project is being used. You will see how this implements a 'convention over configuration' paradigm inside the content zone of your main window. +在本页面中，您将学习到解决方案模板向您的项目添加的视图定位器类是如何使用的。您将看到这如何在主窗口的内容区域内实现“约定优于配置”的范例。 -To help learn how it works, take some time to examine the view locator class: +为了帮助您了解其工作原理，请花些时间查看视图定位器类： ```csharp using Avalonia.Controls; @@ -41,12 +41,12 @@ namespace ToDoList } ``` -The view locator class defines a data template in code which takes a view model and can return a corresponding view. It works by defining two methods: +视图定位器类在代码中定义了一个数据模板，该模板接受一个视图模型并返回对应的视图。它通过定义两个方法来实现： -* `Match(object data)` looks at the data and checks that it inherits from the `ViewModelBase` class - as both your view models do! If this check passes, then the `Build` method is called: -* `Build(object data)` takes the fully qualified name of the view model type and replaces the string `"ViewModel"` with the string `"View"`. It then tries to create the view type, and if that is successful returns it. +* `Match(object data)` 查看数据并检查它是否继承自 `ViewModelBase` 类 - 正如您的视图模型所做的！如果此检查通过，则调用 `Build` 方法： +* `Build(object data)` 接受视图模型类型的完全限定名称，并将字符串 `"ViewModel"` 替换为字符串 `"View"`。然后，它尝试创建视图类型，如果成功，返回该视图。 -An instance of `ViewLocator` is present in the **App.axaml** file in the app project (it was added by the solution template). It should look like this: +视图定位器的一个实例存在于应用程序项目的 **App.axaml** 文件中（它由解决方案模板添加）。它应该如下所示： ```markup ``` -In your to do list app, the main window has had its content set to an object that is not a built-in control, user control or custom control. So _Avalonia UI_ searches up the tree of controls for a **data template** that matches the class of the content data. +在您的待办事项列表应用程序中，主窗口的内容已设置为一个不是内置控件、用户控件或自定义控件的对象。因此，_Avalonia UI_ 在控件树中向上搜索以找到与内容数据类匹配的**数据模板**。 :::info -For more information about the concepts behind data templates, see [here](../../concepts/templates/). +有关数据模板背后的概念信息，请参阅[这里](../../concepts/templates/)。 ::: -As no other data templates match, the search will eventually reach the `ViewLocator` in the application data templates element. This will run its checks and if they pass, return an instance of the corresponding view. It your app this will be the to do list view. +由于没有其他数据模板匹配，搜索最终会到达应用程序数据模板元素中的 `ViewLocator`。这将运行其检查，如果检查通过，则返回对应视图的实例。在您的应用程序中，这将是待办事项列表视图。
-In this way the content of the main window is set to the correct view, based on the type of the view model and the naming convention. +通过这种方式，主窗口的内容根据视图模型的类型和命名约定设置为正确的视图。 -## Source not Framework +## 源码而非框架 -Note that the view locator class is included in the project source rather than being part of the _Avalonia UI_ framework itself. This is because using an implementation of the 'convention over configuration' paradigm is an architectural choice for the application developer. +请注意，视图定位器类包含在项目源代码中，而不是 _Avalonia UI_ 框架本身的一部分。这是因为使用“约定优于配置”范例的实现是应用程序开发人员的架构选择。 -If you do not want to use the view locator (in a diffent app); then remove it from the project and the **App.axaml** file. +如果您不想使用视图定位器（在不同的应用程序中）；那么请从项目和 **App.axaml** 文件中删除它。 -On the next page you will learn how to add revealed functionality and actions to the **OK** and **Cancel** buttons. +在下一页中，您将学习如何向 **OK** 和 **Cancel** 按钮添加额外的功能和操作。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/main-window-content.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/main-window-content.md index 04fc9f473..fcf8b7d65 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/main-window-content.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/main-window-content.md @@ -2,18 +2,18 @@ description: TUTORIALS - To Do List --- -# Main Window Content +# 主窗口内容 -At this point your main window still displays the greeting text created by the solution template. On this page you will change the main window content zone, so it displays your new user control instead. +此时，您的主窗口仍然显示解决方案模板创建的问候文本。在本页中，您将更改主窗口的内容区域，使其显示您的新用户控件。 -Follow this procedure to change the main window content: +按照以下步骤更改主窗口内容： -- Locate and open the main window XAML file:`Views/MainWindow.axaml` -- Add the namespace declaration `xmlns:views="clr-namespace:ToDoList.Views"` -- Retitle the app by changing the title attribute to `Title="Avalonia To Do List"` -- Replace the `` element with `` +- 定位并打开主窗口的 XAML 文件：`Views/MainWindow.axaml` +- 添加命名空间声明 `xmlns:views="clr-namespace:ToDoList.Views"` +- 通过将 `Title` 属性更改为 `Title="Avalonia To Do List"` 来更改应用程序的标题 +- 将 `` 元素替换为 `` -The main window XAML should now look like this: +现在，主窗口的 XAML 应如下所示： ```markup ``` -## Examine the XAML +## 检查 XAML -This XAML is similar in may ways to the user control XAML you had a lookup on the previous page. Specifically, here you added: +这个 XAML 在很多方面与您在前一页上查看的用户控件 XAML 相似。具体来说，您添加了： 
<Window ... 
         xmlns:views="clr-namespace:ToDoList.Views" ..>
-This maps the code namespace `ToDoList.Views` to the XML namespace alias `views`. +这将代码命名空间 `ToDoList.Views` 映射到 XML 命名空间别名 `views`。 :::warning -Any user control that you create will need this kind of mapping, or the Avalonia UI XAML engine will be unable to find it, and you will get an error. +您创建的任何用户控件都需要这种类型的映射，否则 Avalonia UI XAML 引擎将无法找到它，您将收到错误信息。 ::: -The last step sets the content zone of the window to display your new user control view: +最后一步将窗口的内容区域设置为显示您的新用户控件视图： ```markup ``` -## Run the Application +## 运行应用程序 -Now run the application you have built so far. If you are using Visual Studio, press the function key F5. If you are using .NET Core CLI, execute the command: +现在运行您已经构建的应用程序。如果您使用的是 Visual Studio，请按功能键 F5。如果您使用的是 .NET Core CLI，请执行以下命令： ``` dotnet run ``` - You will see the main window, with its new title and user control: +您将看到主窗口，带有新的标题和用户控件：
-That is just the view - nothing really does anything yet! On the next pages, you will learn how to create the working parts of the app: the model and the view model. +这只是视图 - 目前还没有任何实际功能！在接下来的页面上，您将学习如何创建应用程序的工作部分：模型和视图模型。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/navigate-views.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/navigate-views.md index 16131e800..7e1155264 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/navigate-views.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/todo-list-app/navigate-views.md @@ -2,21 +2,21 @@ description: TUTORIALS - To Do List App --- -# Navigate Views +# 导航视图 -On this page you will learn how to change the view in the content zone of the main window to display the new item view, when the user clicks **Add Item**. +在本页面中，您将学习如何在单击**Add Item**按钮时更改主窗口内容区域中的视图，以显示新项目视图。
-Up to this point, you have used the MVVM pattern for this tutorial app. This means that the application logic is controlled from the view models, and the view model in charge of what appears in the main window is the main window view model. +到目前为止，在本教程中，您已经使用了 MVVM 模式。这意味着应用程序逻辑受到视图模型的控制，而负责在主窗口中显示的视图模型是主窗口视图模型。 -Therefore to start with, follow this procedure to add a method to the main window view model that will change what is loaded in the main window content zone: +因此，首先按照以下步骤向主窗口视图模型添加一个方法，该方法将更改加载在主窗口内容区域中的内容： -- Stop the app if it is running. -- Locate the **MainWindowViewModel.cs** file in the **/ViewModels** folder. -- Edit the code as shown. +- 如果应用程序正在运行，请停止它。 +- 在 **/ViewModels** 文件夹中找到 **MainWindowViewModel.cs** 文件。 +- 编辑代码如下： ```csharp using ReactiveUI; @@ -28,7 +28,7 @@ namespace ToDoList.ViewModels { private ViewModelBase _contentViewModel; - //this has a dependency on the ToDoListService + // 这个视图模型依赖于 ToDoListService public MainWindowViewModel() { @@ -50,20 +50,20 @@ namespace ToDoList.ViewModels } ``` -Take some time to examine the code you just added. There is a new `ContentViewModel` property that can get and set the view model in the main window content zone. This is initially set in the constructor to be the to do list view model, with to do list data provided from the service. +请花一些时间查看您刚刚添加的代码。有一个新的 `ContentViewModel` 属性，它可以获取和设置主窗口内容区域中的视图模型。这在构造函数中最初设置为待办事项列表视图模型，其中待办事项列表数据来自服务。 -There is also now a new `AddItem()` method that can reassign the content to be the add item view model. +现在有了一个新的 `AddItem()` 方法，可以重新分配内容以使用添加项目视图模型。 -Notice that the `ContentViewModel` property set calls `RaiseAndSetIfChanged` which will cause a notification to be generated every time the property changes value. The _Avalonia UI_ binding system requires change notifications like this so it knows when to update the user interface. +请注意，`ContentViewModel` 属性设置调用了 `RaiseAndSetIfChanged`，这会在属性更改值时生成通知。 _Avalonia UI_ 绑定系统需要这样的更改通知，以便知道何时更新用户界面。 -## Main Window Content Binding +## 主窗口内容绑定 -Now that you have passed control of what is shown in the main window over to the main window view model (in accordance with the MVVM pattern), you need to complete the link by changing the main window content to use a binding. +既然您已经按照 MVVM 模式将主窗口中显示的控制权交给了主窗口视图模型，您需要通过更改主窗口内容来完成链接。 -Follow this procedure: +按照以下步骤操作： -- Locate the **MainWindow.axaml** file in the **/Views** folder. -- Edit the XAML as shown. +- 在 **/Views** 文件夹中找到 **MainWindow.axaml** 文件。 +- 编辑 XAML 如下： ```markup
-## Button Command +## 按钮命令 -Lastly, to make the add item button call the `AddItem()` method, follow this procedure: +最后，要使 Add Item 按钮调用 `AddItem()` 方法，请按照以下步骤操作： -* Locate the **ToDoListView.axaml** file in the **/Views** folder. -* Edit the XAML for the button as shown: +* 在 **/Views** 文件夹中找到 **ToDoListView.axaml** 文件。 +* 编辑按钮的 XAML 如下： ```markup