Merge pull request #585 from CatfishWen/main

update some zh-CN translation

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/add-a-control.md

@@ -14,7 +14,7 @@ import ButtonIntellisenseScreenshot from '/img/get-started/test-drive/button-int
 Avalonia包含一个内置控件，用于创建按钮。按照以下步骤，将当前在窗口的内容区域中的文本字符串替换为按钮控件。
 
 - 如果应用程序正在运行，请停止它。
-- 在 `MainWindow.axaml` 文件中找到
+- 在 `MainView.axaml` 文件中找到
   `<TextBlock Text="text" HorizontalAlignment="Center" VerticalAlignment="Center"/>`。
 - 删除整行。
 - 插入一个`Button`标签，如下所示：

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/code-with-controls.md

@@ -9,13 +9,13 @@ import Highlight from '@site/src/components/Highlight';
 
 ## 控件名称
 
-当Avalonia在运行时创建主窗口时，它还会为窗口中定义的每个控件创建对象。您的代码可以在运行时访问这些控件，但是为了访问它们，您需要一些控件名称。
+当Avalonia在运行时会为窗口中定义的每个控件创建对象。您的代码可以在运行时访问这些控件，但是为了访问它们，您需要一些控件名称。
 
-要添加一些控件名称，请按照以下步骤进行操作：
+要添加控件名称，请按照以下步骤进行操作：
 
 - 如果应用程序正在运行，请停止它。
-- 找到摄氏度的`TextBox`。
-- 添加name属性，如下所示：
+- 找到摄氏度的 `TextBox`。
+- 添加 `Name` 属性，如下所示：
 
 ```xml
 <TextBox ... Name="celsius"/>
@@ -31,7 +31,7 @@ import Highlight from '@site/src/components/Highlight';
 
 为了演示如何访问`celsius`输入的文本值，请按照以下步骤进行操作：
 
-- 切换到**MainWindow.axaml.cs**代码后台文件。
+- 切换到**MainView.axaml.cs**代码后台文件。
 - 找到`ButtonClicked`事件处理程序。
 - 修改`Debug`语句以显示`celsius`输入的文本属性，如下所示：
 
@@ -43,7 +43,7 @@ Debug.WriteLine($"Click! Celsius={celsius.Text}");
 
 ## 在代码后台设置控件值
 
-为了使用将摄氏温度转换为华氏温度的简单公式，您首先需要确保摄氏度输入文本转换为数字。然后，公式为：
+为了使用将摄氏温度转换为华氏温度的简单公式，您首先需要确保摄氏度输入文本转换为数字。公式如下：
 
 ```
 Tf = Tc * (9/5) + 32
@@ -52,36 +52,39 @@ Tf = Tc * (9/5) + 32
 要添加转换公式，请按照以下步骤进行操作：
 
 - 找到`ButtonClicked`事件处理程序。
-- 修改事件处理程序中的代码，以检查摄氏度输入文本是否可以转换为数字。
+- 检查摄氏度输入文本是否可以转换为数字。
 - 修改代码以包含转换公式。
 - 将华氏度输入的文本更新为转换公式的结果。
 - 运行应用程序，检查您的工作。
 
 以下是上述操作的一种实现方式：
 
 ```csharp
-if (Double.TryParse(celsius.Text, out double C))
+public void ButtonClicked(object source, RoutedEventArgs args)
 {
-    var F = C * (9d / 5d) + 32;
-    fahrenheit.Text = F.ToString("0.0");
-}
-else
-{
-    celsius.Text = "0";
-    fahrenheit.Text = "0";
+    if (Double.TryParse(celsius.Text, out double C))
+    {
+        var F = C * (9d / 5d) + 32;
+        fahrenheit.Text = F.ToString("0.0");
+    }
+    else
+    {
+        celsius.Text = "0";
+        fahrenheit.Text = "0";
+    }
 }
 ```
 
 您可以使用以下转换表来检查您的工作：
 
 | 摄氏度 | 华氏度 |
-| ---------- | --------- |
-| -10        | 14.0      |
-| 0          | 32.0      |
-| 10         | 50.0      |
-| 21         | 69.8      |
-| 25         | 77.0      |
-| 32         | 89.6      |
+|---------|------------|
+| -10     | 14.0       |
+| 0       | 32.0       |
+| 10      | 50.0       |
+| 21      | 69.8       |
+| 25      | 77.0       |
+| 32      | 89.6       |
 
 ### 练习
 

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/input-controls.md

@@ -5,7 +5,7 @@ title: 输入控件
 
 import InputControlsScreenshot from '/img/get-started/test-drive/input-controls.png';
 
-在这个页面上，您将学习如何在一个整洁的布局中添加一些Avalonia输入控件。目标是在水平行中添加带有其关联标签的数字输入；在下面的行中添加一个输出控件。
+在这个页面上，您将学习如何添加一些Avalonia输入控件并将其排列整齐。目标是在一行中添加带有标签的数字输入控件，并在其下面一行中添加对应的输出控件。
 
 为了实现这个布局，您将使用内置的网格控件，并将标签和输入控件放置在其单元格中。
 
@@ -16,53 +16,62 @@ import InputControlsScreenshot from '/img/get-started/test-drive/input-controls.
 要使用网格控件创建布局，请按照以下步骤进行操作：
 
 - 如果应用正在运行，请停止应用。
-- 找到XAML中的中间堆栈面板，并删除该标签。
+- 在 XAML 中找到 `<Border>` 和 `<Button>` 之间的空行
 - 插入一个`<Grid>`标签，如下所示：
 
 ```xml
-<Grid ShowGridLines="True" Margin="5"
-      ColumnDefinitions="120, 100" 
-      RowDefinitions="Auto, Auto, Auto">  
-</Grid>
+<StackPanel>
+    <Border Margin="5" CornerRadius="10" Background="LightBlue">
+        <TextBlock Margin="5"
+            HorizontalAlignment="Center"
+            FontSize="24"
+            Text="Temperature Converter" />
+    </Border>
+    // highlight-start
+    <Grid ShowGridLines="True" Margin="5" 
+          ColumnDefinitions="120, 100"
+          RowDefinitions="Auto, Auto, Auto">
+    </Grid>
+    // highlight-end
+    <Button HorizontalAlignment="Center">Calculate</Button>
+</StackPanel>
 ```
 
-这将为网格设置列和行的大小（并使网格线可见 - 尽管现在它只会显示为一条直线，因为网格仍然是空的）。
-
-现在在网格的单元格中添加标签和输入控件：
+该标签可以用于指定网格的行和列，设置其的大小，并控制网格线是否可见。目前它只会显示为一条直线，因为网格内部是空的。`Auto` 表明行的大小与其内容相同，并且在添加内容之前高度为零。
 
-- 添加`<Label>`和`<TextBox>`（文本输入）控件，如下所示：
+- 在 `Grid` 中添加 `<Label>` 和 `<TextBox>`（文本输入）控件，如下所示：
 
 ```xml
 <Grid ShowGridLines="True" Margin="5"
       ColumnDefinitions="120, 100" 
       RowDefinitions="Auto, Auto, Auto">
-   <Label Grid.Row="0" Grid.Column="0">Celsius</Label>
-   <TextBox Grid.Row="0" Grid.Column="1"/>
-   <Label Grid.Row="1" Grid.Column="0">Fahrenheit</Label>
-   <TextBox Grid.Row="1"  Grid.Column="1"/>
+    // highlight-start
+    <Label Grid.Row="0" Grid.Column="0">Celsius</Label>
+    <TextBox Grid.Row="0" Grid.Column="1"/>
+    <Label Grid.Row="1" Grid.Column="0">Fahrenheit</Label>
+    <TextBox Grid.Row="1"  Grid.Column="1"/>
+    // highlight-end
 </Grid>
 ```
 
-最后，您可以使用它们的margin属性来整理网格中控件的对齐方式。还可以将按钮移动到网格中，如下所示：
-
-- 修改XAML如下所示：
+最后，您可以使用它们的 `Margin` 属性来整理网格中控件的对齐方式。还可以将按钮移动到网格中，如下所示：
 
 ```xml
 <Grid ShowGridLines="True"  Margin="5" 
       ColumnDefinitions="120, 100" 
       RowDefinitions="Auto, Auto, Auto">
-     <Label Grid.Row="0" Grid.Column="0" Margin="10">Celsius</Label>
-     <TextBox Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0"/>
-     <Label Grid.Row="1" Grid.Column="0" Margin="10">Fahrenheit</Label>
-     <TextBox Grid.Row="1"  Grid.Column="1" Margin="0 5" Text="0"/>
-     <Button Grid.Row="2" Grid.Column="1" Margin="0 5">Calculate</Button>
+    // highlight-start
+    <Label Grid.Row="0" Grid.Column="0" Margin="10">Celsius</Label>
+    <TextBox Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0"/>
+    <Label Grid.Row="1" Grid.Column="0" Margin="10">Fahrenheit</Label>
+    <TextBox Grid.Row="1"  Grid.Column="1" Margin="0 5" Text="0"/>
+    <Button Grid.Row="2" Grid.Column="1" Margin="0 5">Calculate</Button>
+    // highlight-end
 </Grid>
 ```
 
 - 运行应用以查看结果
 
-
-
 :::info
 有关Avalonia内置控件的完整信息以及它们的属性，请参阅参考部分[这里](../../reference/controls/)。
 :::

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/main-window.md

@@ -17,20 +17,21 @@ import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane
 
 ## 发生了什么？
 
-在 **MainWindow.axaml** XAML 文件中，`<Window>...</Window>` XAML 标记表示 Avalonia 窗口。与其他 Avalonia 控件一样，窗口将在目标平台上绘制，具有 4 个**布局区域**：边距、边框、内边距和内容。
+在 **MainWindow.axaml** XAML 文件中，`<Window>...</Window>` XAML 标记表示 Avalonia 窗口。与其他 Avalonia 控件一样，窗口将在目标平台上绘制，并具有 4 个**布局区域**：边距、边框、内边距和内容。
 
 <img src={LayoutZonesDiagram} alt="" />
 
+在当前的应用程序中，`Window` 的内容区域中引用了另一个视图 **`<views:MainView />`**。这是对 **MainView.axaml** 文件的引用，该文件是一个 `UserControl`，将显示在 `Window` 的内容区域中。
 
+## MainView 用户控件
 
-## MainWindow 用户控件
+在这个用户控件中，您将看到一个 `<TextBlock>...</TextBlock>` XAML 标记。这代表一个文本块控件。文本块的 `Text` 属性绑定到 **MainViewModel** 类中的 **Greeting** 属性。
 
-在这个**MainWindow.axaml**文件当中，您将看到一个 `<TextBlock>...</TextBlock>` XAML 标记。这代表一个文本块控件。文本块的 `Text` 属性绑定到 **MainWindowViewModel** 类的 **Greeting** 属性。这是在视图模型类的构造函数中设置的属性。
 ```
 <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 ```
 
-您可以更改文件 **MainWindowViewModel.cs** 中的文本，以查看界面上的更改。
+您可以更改文件 **MainViewModel.cs** 中的文本，以查看界面上的更改。
 
 <img className="center" src={ViewModelScreenshot} alt="" />
 <img className="center" src={AppRunningScreenshot} alt="" />
@@ -42,7 +43,7 @@ import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane
 ## Visual Studio 设计器
 
 如果您使用的是 Visual Studio，则应该看到 XAML 代码和预览窗格。
-切换到 **MainWindow.axaml** 文件，并单击编辑窗口顶部的 **Split View** 按钮。
+切换到 **MainView.axaml** 文件，并单击编辑窗口顶部的 **Split View** 按钮。
 
 <img className="center" src={VsPreviewerScreenshot} alt="" />
 
@@ -55,7 +56,7 @@ import VsPreviewPaneScreenshot from '/img/get-started/test-drive/vs-preview-pane
 
 <img className="center" src={VsPreviewPaneScreenshot} alt="" />
 
-- 删除绑定 `{Binding Greeting}` 并更改文本 `<TextBlock Text="my text" ...`
+- 删除绑定 `{Binding Greeting}` 并更改文本 `<TextBlock Text="my text" />`
 
 您会看到在输入时预览窗格中的新文本也会更改。这是 Avalonia 的**设计时预览行为**的一个示例，它将帮助您准确快速地开发用户界面呈现。
 

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/response-to-an-event.md

@@ -8,47 +8,44 @@ import EventDebugOutputScreenshot from '/img/get-started/test-drive/event-debug-
 
 在Avalonia应用程序中，您可以使用多种方式实现操作。在本页面中，您将了解如何使用最简单的方法之一：如何编写按钮点击的事件处理代码。
 
-首先，您将编写一个按钮点击事件处理程序，该处理程序不与任何其他控件交互。
+首先，您将编写一个不与任何其他控件交互的按钮单击事件处理程序。
 
 ## Code-behind
 
-主窗口的XAML文件与一个关联的C#代码后台文件。如果您使用的是一个IDE，您可以在**Solution Explorer**中找到这个文件 - 它是`.axaml`文件的子项。
+主窗口的XAML文件可以拥有一个关联的C#代码后台文件，用于访问命名控件并处理其的事件。如果您使用的是IDE，您可以在**Solution Explorer**中找到这个文件，它是`.axaml`文件的子项。
 
 <img className="center" src={SolutionCodeBehindScreenshot} alt="" />
 
-要更改主窗口的代码后台：
+修改 `MainView` 的代码后台：
 
-- 打开`MainWindow.axaml.cs`文件
+- 打开`MainView.axaml.cs`文件
 
 您将看到一些类似于以下代码的C#代码：
 
 ```csharp
 using Avalonia.Controls;
 
-namespace GetStartedApp
+namespace GetStartedApp.Views;
+public partial class MainView : UserControl
 {
-    public partial class MainWindow : Window
+    public MainView()
     {
-        public MainWindow()
-        {
-            InitializeComponent();
-        }
+        InitializeComponent();
     }
 }
 ```
 
-部分类`MainWindow`对应于由Avalonia UI根据您已有的XAML创建的窗口对象。您可以在XAML窗口标记中找到此类名称：
+分部类 `MainView` 对应于由 Avalonia 根据您已有的 XAML 创建的用户控件。分部类的命名空间必须XAML与保持一致，您可以在XAML标记中找到该类名：
 
 ```xml
-<Window 
-    ...
-    x:Class="GetStartedApp.MainWindow" >
-</Window>
+<UserControl x:Class="GetStartedApp.Views.MainView"
+    ...>
+</UserControl>
 ```
 
 要为按钮添加事件处理程序，请按照以下步骤进行操作：
 
-- 在代码后台文件中找到主窗口的`MainWindow`构造函数（参见上述说明）。
+- 在代码后台文件中找到主窗口的`MainView`构造函数（参见上述说明）。
 - 在构造函数之后添加以下代码：
 
 ```csharp
@@ -66,12 +63,11 @@ using System.Diagnostics;
 ```
 
 - 切换到XAML文件，找到`<Button>`标记。
-- 在标记的末尾输入click属性，如下所示：
+- 在标记的末尾添加 `Click` 属性，如下所示：
 
 ```xml
-<Button
-   ...
-   Click="ButtonClicked">
+<Button Grid.Row="2" Grid.Column="1" Margin="0,5" Click="ButtonClicked">
+    Calculate
 </Button>
 ```
 

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/the-design-preview.md

@@ -5,7 +5,7 @@ title: 设计预览
 
 import TemperatureDesignPreviewScreenshot from '/img/get-started/test-drive/temperature-design-preview.png';
 
-在这个页面上，您将探索窗口的属性；然后使用其中一些属性来调整窗口在预览窗格中显示时的大小。
+在这个页面上，您将探索窗口的属性，然后使用其中一些属性来调整窗口在预览窗格中显示时的大小。
 
 检查`<Window>`标签的XAML。它看起来像这样：
 
@@ -19,7 +19,7 @@ import TemperatureDesignPreviewScreenshot from '/img/get-started/test-drive/temp
         Title="GetStartedApp">
 ```
 
-窗口标签首先定义了Avalonia使用的一些XML命名空间。使用了别名'x'、'd'和'mc'。
+窗口标签首先定义了Avalonia使用的一些XML命名空间。并为其指定了别名'x'、'd'和'mc'。
 
 设计命名空间'd'允许设置设计时属性`d:DesignWidth`和`d:DesignHeight`。在上面的代码示例中的设置，可以使预览窗格看起来更像是纵向的移动设备。