diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/animation-settings.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/animation-settings.md index 945abb4a2..5711ca8d4 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/animation-settings.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/animation-settings.md @@ -36,18 +36,14 @@ import SineEaseOutScreenshot from '/img/reference/animation-settings/sine-ease-o # 动画设置 -This section contains full lists of the _Avalonia UI_ animation settings: -本节包含 _Avalonia UI_ 动画设置的完整列表： - -* 缓动函数（Easing Functions） -* 填充模式（FillMode） -* 播放方向（PlaybackDirection） -* 重复（IterationCount） +本节描述了如何自定义 `Animation` 播放。 ## 缓动函数（Easing Functions） -| Default | -|---------------------------------------------------------------| +`Easing` 函数描述了动画属性在动画时间内从起始值到结束值的变化速度。`Avalonia.Animation.Easings` 包含以下缓动函数： + +| 默认 | +|-------------------------------------------------------------| | `LinearEasing`
| | Ease-In | Ease-Out | Ease-In-Out | @@ -63,36 +59,38 @@ This section contains full lists of the _Avalonia UI_ animation settings: | `ElasticEaseIn`
| `ElasticEaseOut`
| `ElasticEaseInOut`
| | `BounceEaseIn`
| `BounceEaseOut`
| `BounceEaseInOut`
| -## 填充模式（FillMode） +此外，您可以通过继承 `Easing` 或通过向 `SplineEasing` 或 `SpringEasing` 提供参数来提供自己的缓动函数。 -动画的填充模式属性定义了动画运行后设置属性在延迟运行之间的持续方式。 +## 填充模式（FillModes） -以下表格描述了可能的行为： +`Animation` 的 `FillMode` 属性定义了动画完成后以及在运行之间的延迟期间动画属性的持久化方式。 -| 值 | 描述 | -|------------|---------------------------------| -| `None` | 在动画后值不会持续，也不会在延迟时应用第一个值。 | -| `Forward` | 最后一个插值值将持续到目标属性。 | -| `Backward` | 第一个插值值将在动画延迟时显示。 | -| `Both` | 同时应用 `Forward` 和 `Backward` 行为。 | +下表描述了支持的行为： -## 播放方向（PlaybackDirection） +| 值 | 描述 | +|------------|-----------------------------------------------------------------------------------------------------------| +| `None` | 动画完成后值不会持久化，动画延迟时不会应用第一个值。 | +| `Forward` | 最后插值的值将持久化到目标属性。 | +| `Backward` | 动画延迟时将显示第一个插值的值。 | +| `Both` | 将应用 `Forward` 和 `Backward` 行为。 | -播放方向定义了动画的播放方式，包括任何重复。以下表格描述了可能的设置： +## 播放方向（PlaybackDirection） +`PlaybackDirection` 定义了 `Animation` 的播放方式。下表描述了可能的设置： -| Value | Description | -|--------------------|-----------------| -| `Normal` | 动画以正常方式播放。 | -| `Reverse` | 动画以反向方向播放。 | -| `Alternate` | 动画先正向播放，然后反向播放。 | -| `AlternateReverse` | 动画先反向播放，然后正向播放。 | +| 值 | 描述 | +|--------------------|---------------------------------------------------------| +| `Normal` | 动画正常播放。 | +| `Reverse` | 动画反向播放。 | +| `Alternate` | 动画先正向播放，然后反向播放。 | +| `AlternateReverse` | 动画先反向播放，然后正向播放。 | ## 重复（IterationCount） -动画元素上的重复属性设置了动画的重复次数。有两种格式的设置方式： +`Animation` 元素上的 `IterationCount` 设置动画要重播的次数。此设置有两种格式： + +| 值 | 描述 | +|------------|------------------------------------------| +| `N` | (N 是一个整数) - 播放 N 次, N 可以为零。 | +| `Infinite` | 永远重复 | -| 值 | 描述 | -|------------|-----------------------| -| `N` | N 是整数——重复 N 次。N 可以是零。 | -| `Infinite` | 无限重复。 | diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/built-in-data-binding-converters.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/built-in-data-binding-converters.md index e0c3438f2..42330802f 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/built-in-data-binding-converters.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/built-in-data-binding-converters.md @@ -6,41 +6,41 @@ description: REFERENCE _Avalonia UI_ 包含许多用于常见场景的内置数据绑定转换器： -| 转换器 | 描述 | -|-------------------------------------|-----------------------------------------| -| 否定运算符 | 可以将 `!` 运算符放在数据绑定路径前面，返回布尔值的反转。参见下面的备注。 | -| `StringConverters.IsNullOrEmpty` | 如果输入字符串为 null 或空字符串，则返回 `true`。 | -| `StringConverters.IsNotNullOrEmpty` | 如果输入字符串不为 null 且不为空字符串，则返回 `false`。 | -| `ObjectConverters.IsNull` | 如果输入对象为 null，则返回 `true`。 | -| `ObjectConverters.IsNotNull` | 如果输入对象不为 null，则返回 `false`。 | -| `BoolConverters.And` | 这是一个多值转换器，如果所有输入值都为 `true`，则返回 true。 | -| `BoolConverters.Or` | 这是一个多值转换器，如果任何输入值为 `true`，则返回 true。 | +| 转换器 | 描述 | +| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| 取反运算符 | 可以在数据绑定路径前面放置 ! 运算符以返回布尔值的反值。另请参见下面的注释。 | +| `StringConverters.IsNullOrEmpty` | 如果输入字符串为空或为 null，则返回 `true` | +| `StringConverters.IsNotNullOrEmpty` | 如果输入字符串为空或为 null，则返回 `false` | +| `ObjectConverters.IsNull` | 如果输入为 null，则返回 `true` | +| `ObjectConverters.IsNotNull` | 如果输入为 null，则返回 `false` | +| `BoolConverters.And` | 一个多值转换器，如果所有输入都为 true，则返回 `true` | +| `BoolConverters.Or` | 一个多值转换器，如果任何输入为 true，则返回 `true` | -## 否定运算符示例 +## 取反运算符示例 -这个例子展示了当绑定的值为false时，文本块的情况： +此示例显示当绑定值为 false 时的 `TextBlock`： ```xml - Input is not allowed + 不允许输入 ``` -否定运算符在绑定到非布尔值时也可以工作。这是因为绑定的值首先会被转换为布尔值（使用函数`Convert.ToBoolean`），然后结果会被取反。 +当您绑定到非布尔值时，取反运算符也有效。这是因为绑定值首先转换为布尔值（使用函数 `Convert.ToBoolean`），然后结果被取反。 -例如，整数零会被转换为false（通过函数`Convert.ToBoolean`），而其他所有整数值都会被转换为true，因此你可以使用否定运算符来在集合为空时显示一条消息，像这样： +例如，由于整数零被转换为 false（通过函数 `Convert.ToBoolean`），而所有其他整数值被转换为 true，您可以使用取反运算符在集合为空时显示消息，如下所示： ```xml - No results found + 未找到结果 ``` -你也可以连续使用否定运算符两次。例如，在你想要将整数转换为布尔值，然后对该值取反时，可以这样写： +您还可以使用取反运算符两次。例如，当您希望执行从整数到布尔值的转换，然后取反该值时。 -你可以使用这种方式来在集合为空时隐藏一个控件（计数为零），像这样： +您可以使用此方法在集合为空（计数为零）时隐藏控件，如下所示： ```xml @@ -50,7 +50,7 @@ _Avalonia UI_ 包含许多用于常见场景的内置数据绑定转换器： ## 其他转换示例 -这个绑定示例将在绑定的文本为null或空字符串时隐藏文本块： +此示例绑定将在绑定文本为空或为 null 时隐藏文本块： ```xml ``` -而这个示例将在绑定的对象为null或为空时隐藏内容控件： +此示例将在绑定对象为空或为 null 时隐藏内容控件： ```xml 属性描述Background背景颜色。BorderBrush边框颜色。BorderThickness边框线条厚度（整数）。CornerRadius所有四个角的半径（一个值），或指定为列表 - 见下文。BoxShadow定义阴影（见下文）。 + +## 圆角属性 + +您可以将圆角属性的值设置为单个值。在这种情况下，_Avalonia UI_ 将在子控件的所有四个角上使用相同的半径。 + +或者，您可以指定一个值列表；这必须采用以下两种格式之一。 + +当列表中只有两个值时，_Avalonia UI_ 将使用以下模式解释它们： + +`CornerRadius="上方值 下方值"` + +左上角和右上角的半径由第一个值设置，左下角和右下角的半径由第二个值设置。 + +当列表中有四个值时，_Avalonia UI_ 将使用以下模式解释它们： + +`CornerRadius="左上值 右上值 右下值 左下值"` + +:::warning +如果您使用四值模式；您必须提供所有四个值，即使其中一个为零。列表中不允许有三个值。 +::: + +### 示例 + +此示例添加了一些边框控件以在布局中创建“pod”外观： + +```xml + + + Box 1 + + + Box 2 + + +``` + + + +## 盒廓阴影 + +您可以通过设置其盒廓阴影属性来定义边框的阴影。您可以使用以下方式指定单个盒廓阴影： + +* 一个可选的 `inset` 关键字 - 这将在边框内绘制阴影 - 不常用！ +* 两个、三个或四个长度值 - 见下文。 +* 一个颜色值。 + +如果只给出两个长度值，将它们解释为 `offset-x` 和 `offset-y`。如果给出第三个值，则将其解释为 `blur-radius`，如果给出第四个值，则将其解释为 `spread-radius`。 + +:::info +您可以通过提供逗号分隔的阴影定义列表来指定多个阴影。 +::: + +此表描述了盒廓阴影值，按它们出现的顺序： + +
值描述
inset如果未指定（默认），则假定阴影为投影（如同盒廓被抬高在内容之上）。inset 关键字的存在将阴影更改为框架内部（如同内容被压入盒廓内部）。内嵌阴影绘制在边框内（即使是透明的），并且在背景之上但在任何内容之下
offset-x 指定水平距离。负值将阴影放置在元素的左侧。
offset-y指定垂直距离。负值将阴影放置在元素的上方。
blur-radius此值越大，模糊效果越大，因此阴影变得更大且更轻。负值不允许。如果未指定，则使用默认值（零），阴影边缘是锐利的。
spread-radius正值将导致阴影扩展和变大，负值将导致阴影收缩。如果未指定，它将为 0（阴影将与元素大小相同）。
color使用颜色名称（例如红色）或带有 # 前缀的十六进制颜色值的阴影颜色。例如：#dadada
+ +:::info +如果两个偏移值都设置为零，阴影将放置在元素后面，并且只有在同时或者单独设置了 `blur-radius` , `spread-radius` 时才会生成模糊效果。 +::: + +### 示例 + +这是一个投影的示例： + +```xml +< + + Box with a drop shadow + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/Border/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`Border.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Border.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/button.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/button.md index e6d230ecb..4d49e444f 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/button.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/button.md @@ -8,7 +8,7 @@ import ButtonClickScreenshot from '/img/reference/controls/buttons/button-click. 按钮是一种对指针动作做出反应的控件（也有一些键盘等效操作）。当指针按下时，它会呈现出被按下的状态。 -将指针按下到释放的序列解释为点击；此行为是可配置的。 +指针按下到释放的序列会解释为点击，并且此行为是可配置的。 :::warning 在确定按钮是否被用户按下时，请始终使用`Click`事件而不是`PointerPressed`。`Click`是`Button`特有的高级事件，表示按钮已被按下。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/buttonspinner.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/buttonspinner.md index 9ae850d0c..3fa5776d6 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/buttonspinner.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/buttonspinner.md @@ -8,13 +8,13 @@ import ButtonSpinnerScreenshot from '/img/reference/controls/buttons/button-spin 按钮微调器是一个包含向上和向下微调按钮的控件。该按钮的内容是灵活的，但您需要编写相当多的行为代码。 -## 有用的属性 +## 常用属性 您可能经常使用以下属性：
属性描述
ButtonSpinnerLocation微调按钮的位置：左侧或右侧。
ValidSpinDirection用于限制微调方向：增加、减少或无。
-## 更多信息 +## 示例代码 ```xml diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/radiobutton.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/radiobutton.md index d35c9aa57..0e453643c 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/radiobutton.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/radiobutton.md @@ -22,7 +22,7 @@ import RadioButtonScreenshot from '/img/reference/controls/buttons/radiobutton.g | `IsChecked` | 单选按钮选项是否被选中（true）或未选中（false）。 | | `IsEnabled` | 单选按钮选项是否启用。禁用的选项呈现为透明。 | -## 更多信息 +## 示例代码 以下示例展示了两组独立工作的单选按钮： diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/repeatbutton.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/repeatbutton.md index e4ad585dd..fea03c8ed 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/repeatbutton.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/repeatbutton.md @@ -17,7 +17,7 @@ import RepeatButtonHoldScreenshot from '/img/reference/controls/buttons/repeatbu | `Delay` | 在开始生成重复点击之前等待的时间（毫秒）。默认为300毫秒。 | | `Interval`| 生成点击事件之间的时间间隔（毫秒）。默认为100毫秒。 | -## 更多信息 +## 示例代码 下面的示例演示了一个重复按钮，使用默认的间隔和延迟来生成点击事件。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/splitbutton.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/splitbutton.md index 5ca2863e0..d3c76837e 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/splitbutton.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/splitbutton.md @@ -38,7 +38,7 @@ import SplitButtonExportButtonScreenshot from '/img/reference/controls/buttons/s [SplitButton.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/SplitButton/SplitButton.cs) -## 更多信息 +## 示例代码 ### 基本示例 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/togglesplitbutton.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/togglesplitbutton.md index fd5d39ec4..ca70dae83 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/togglesplitbutton.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/buttons/togglesplitbutton.md @@ -46,7 +46,7 @@ import ToggleSplitButtonTextListScreenshot from '/img/reference/controls/buttons [ToggleSplitButton.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/SplitButton/ToggleSplitButton.cs) -## 更多信息 +## 示例代码 ### 基本示例 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/README.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/README.md new file mode 100644 index 000000000..f7cc62e20 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/README.md @@ -0,0 +1,80 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import CalendarBasicUsageScreenshot from '/img/gitbook-import/assets/calendar3.gif'; +import CalendarSingleSelectionScreenshot from '/img/gitbook-import/assets/calendar.gif'; +import CalendarMultipleSelectionScreenshot from '/img/gitbook-import/assets/calendar2.gif'; +import CalendarCustomRangeScreenshot from '/img/gitbook-import/assets/calendar4.gif'; + +# Calender 日历 + +日历控件用于用户选择日期或日期范围。 + + + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
SelectionMode指示允许哪种选择。可选择：单个日期、单个范围、多个范围和无。
DisplayMode定义日历在其下钻级别中的起始位置。可选择：十年、年份和月份（默认）。
SelectedDate当前选择的日期。
SelectedDates选定日期的集合，包括单个和多个范围内的日期。
DisplayDate控件首次显示时要显示的日期。
DisplayDateStart要显示的第一个日期。
DisplayDateEnd要显示的最后一个日期。
BlackoutDates显示为不可用且无法选择的日期集合。
+ +## 示例 + +这是一个允许单个日期选择的基本日历。日历的选定日期显示在下面的文本块中。 + +```xml + + + + +``` + + + +此示例允许选择多个范围： + +```xml + + + +``` + +单击开始日期后，可以通过按住 Shift 键并单击结束日期来扩展单个范围。您可以通过按住 Control 键并单击其他日期来添加额外的日期和范围。 + + + +此示例具有自定义的开始和结束日期，并且某些日期不可用。这使用 codebehind 中的 C# 代码。 + +```xml + + + +``` + +```csharp title='C#' +public partial class MainWindow : Window +{ + public MainWindow() + { + InitializeComponent(); + var today = DateTime.Today; + calendar.DisplayDateStart = today.AddDays(-25); + calendar.DisplayDateEnd = today.AddDays(25); + calendar.BlackoutDates.Add( + new CalendarDateRange( today.AddDays(5), today.AddDays(10))); + } +} +``` + + + + + +## 更多信息 + +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/Calendar/)。 + +在 _GitHub_ 上查看源代码 [`Calendar.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Calendar/Calendar.cs) + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/calendar-date-picker.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/calendar-date-picker.md new file mode 100644 index 000000000..e27a0d279 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/calendar/calendar-date-picker.md @@ -0,0 +1,38 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import CalendarDatePickerScreenshot from '/img/gitbook-import/assets/calendardatepicker.gif'; + +# CalenderDatePicker 日历日期选择器 + +这是日历控件的扩展，包含一个文本框和按钮。当用户点击按钮时显示日历（再次点击时隐藏）。当点击日历上的日期时，选定的日期会显示在文本框中。 + +用户也可以通过在文本框中输入日期来选择日期。日期选择器能够将多种日期格式处理为在没有选定日期时显示为水印的格式。 + +:::info +有关此控件的日历部分的详细信息，请参见之前的参考资料[这里](./)。 +::: + +## 示例 + +此示例显示了一个基本的单日期选择日历，当按钮被点击时显示： + +```xml + + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整API文档，请参见[这里](https://reference.avaloniaui.net/api/Avalonia.Controls/CalendarDatePicker/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`CalendarDatePicker.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/CalendarDatePicker/CalendarDatePicker.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/data-grid-template-columns.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/data-grid-template-columns.md new file mode 100644 index 000000000..ff6285eae --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/data-grid-template-columns.md @@ -0,0 +1,111 @@ +--- +title: 数据表格模板列 +description: REFERENCE - Built-in Controls +--- +import TemplateColumnsScreenshot from '/img/gitbook-import/assets/grid4.gif'; + + +# 数据表格模板列 + +您可以使用此列类型自定义数据网格列的显示和编辑。 + +有两个数据模板，您可以将其定义为附加属性： + +
数据模板描述
CellTemplate 列值的显示（未编辑）呈现。
CellEditingTemplate 列值的编辑模板。
+ +:::info +如果您未设置编辑模板，该列将保持只读状态。 +::: + +## 示例 + +此示例在编辑某人的年龄属性时添加一个数字上下控件： + +```xml + + + + + + + + + + + + + + + + + + + + + + + +``` + +```csharp title='C# View Model' +using AvaloniaControls.Models; +using System.Collections.Generic; +using System.Collections.ObjectModel; + +namespace AvaloniaControls.ViewModels +{ + public class MainWindowViewModel : ViewModelBase + { + public ObservableCollection People { get; } + + public MainWindowViewModel() + { + var people = new List + { + new Person("Neil", "Armstrong", 55), + new Person("Buzz", "Lightyear", 38), + new Person("James", "Kirk", 44) + }; + People = new ObservableCollection(people); + } + } +} +``` + +```csharp title='C# Item Class' +public class Person +{ + public string FirstName { get; set; } + public string LastName { get; set; } + public int AgeInYears { get; set; } + + + public Person(string firstName , string lastName, int ageInYears) + { + FirstName = firstName; + LastName = lastName; + AgeInYears = ageInYears; + } +} +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridTemplateColumn/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`DataGridTemplateColumn.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridTemplateColumn.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/README.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/README.md deleted file mode 100644 index 1b2378a0a..000000000 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/README.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -description: REFERENCE - Built-in Controls ---- - -import CalendarBasicUsageScreenshot from '/img/gitbook-import/assets/calendar3.gif'; -import CalendarSingleSelectionScreenshot from '/img/gitbook-import/assets/calendar.gif'; -import CalendarMultipleSelectionScreenshot from '/img/gitbook-import/assets/calendar2.gif'; -import CalendarCustomRangeScreenshot from '/img/gitbook-import/assets/calendar4.gif'; - -# Calendar - -The calendar is a control for users to select dates or date ranges. - - - -## 常用属性 - -你可能最常使用这些属性： - -
PropertyDescription
SelectionModeIndicates what kind of selections are allowed. Choose from: single date, single range, multiple ranges and none.
DisplayModeDefines where the calendar starts in its drill-down levels. Choose from: decade, year and month (default).
SelectedDateThe currently selected date.
SelectedDatesA collection of selected dates, includes the dates in single and multiple ranges.
DisplayDateThe date to display when the control first shows.
DisplayDateStartThe first date to be displayed.
DisplayDateEndThe last date to be displayed.
BlackoutDatesA collection of dates that are displayed as unavailable, and cannot be selected.
- -## 示例 - -This is a basic calendar allowing a single date selection. The calendar's selected date is shown in the text block below. - -```xml - - - - -``` - - - -This example allows multiple range selections: - -```xml - - - -``` - -After clicking a start date you can extend a single range by holding the shift key and clicking on the end date. You can add extra dates and ranges by holding the control key and clicking on other dates. - - - -This example has custom start and end dates, and some dates unavailable. This uses C# code behind the window. - - - -```xml - - - -``` - - -```csharp title='C#' -public partial class MainWindow : Window -{ - public MainWindow() - { - InitializeComponent(); - var today = DateTime.Today; - calendar.DisplayDateStart = today.AddDays(-25); - calendar.DisplayDateEnd = today.AddDays(25); - calendar.BlackoutDates.Add( - new CalendarDateRange( today.AddDays(5), today.AddDays(10))); - } -} -``` - - - - - -## 更多信息 - -For the complete API documentation about this control, see [here](http://reference.avaloniaui.net/api/Avalonia.Controls/Calendar/). - -View the source code on _GitHub_ [`Calendar.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Calendar/Calendar.cs) diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/calendar-date-picker.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/calendar-date-picker.md deleted file mode 100644 index 37c83b343..000000000 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/calendar/calendar-date-picker.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -description: REFERENCE - Built-in Controls ---- - -import CalendarDatePickerScreenshot from '/img/gitbook-import/assets/calendardatepicker.gif'; - -# Calendar Date Picker - -This is an extension of the calendar control that includes a text box and button. The calendar shows when the user clicks the button (and hides on a subsequent click). The selected date shows in the text box when a date on the calendar is clicked. - -The user can also enter a date by typing in the text box. The date picker is able to process multiple date formats into the format that is displayed as a watermark when there is no selected date. - -:::info -For details on the calendar part of this control, see the previous reference [here](./). -::: - -## 示例 - -This example shows a basic single date selection calendar when the button is clicked: - -```xml - - - -``` - - - -## 更多信息 - -:::info -For the complete API documentation about this control, see [here](https://reference.avaloniaui.net/api/Avalonia.Controls/CalendarDatePicker/). -::: - -:::info -View the source code on _GitHub_ [`CalendarDatePicker.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/CalendarDatePicker/CalendarDatePicker.cs) -::: - diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/label.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/label.md deleted file mode 100644 index 2c90a5782..000000000 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/label.md +++ /dev/null @@ -1,15 +0,0 @@ -# Label - -A text label control that does not receive the focus, but transfers it to a defined target control. This behaviour occurs on pointer click or when an access key is pressed in combination with the Alt key. - - - -## 更多信息 - -:::info -For the complete API documentation about this control, see [here](https://reference.avaloniaui.net/api/Avalonia.Controls/Label/). -::: - -:::info -View the source code on _GitHub_ [`Label.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Label.cs) -::: diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/drawing-image.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/drawing-image.md new file mode 100644 index 000000000..52c3a06e3 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/drawing-image.md @@ -0,0 +1,20 @@ +--- +description: REFERENCE - Built-in Controls +--- + +# Drawing-image 绘图图像 + +## 常用属性 + +你可能最常使用这些属性： + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见此处。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`DrawingImage.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Base/Media/DrawingImage.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/grid/sharedsizegroup.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/grid/sharedsizegroup.md new file mode 100644 index 000000000..12876cebd --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/grid/sharedsizegroup.md @@ -0,0 +1,90 @@ +--- +id: sharedsizegroup +title: SharedSizeGroup +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import GridSharedSizeGroupScreenshot from '/img/reference/controls/grid/grid-sharedsizegroup.png'; + +`SharedSizeGroup` 允许在多个 `Grid` 控件之间共享自动调整大小的行和列定义的大小信息。 + +## 示例 + +以下示例演示了如何使用 `SharedSizeGroup` 在 `ListBox` 内外一致地调整列的大小。 + + + + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +:::info +请注意，`` 元素在弹出菜单中不起作用。要制作分隔线，请使用 `Header` 设置为 '-' 的 `` 元素，如上所示。 +::: + +生成的弹出菜单如下所示： + + + +## 动态弹出菜单 + +这是一个在运行时根据类型为 `MyMenuItemViewModel` 的集合 `MyMenuItems` 动态创建 `MenuFlyout` 的示例。 + +```xml + +``` + +## 更多信息 + +有关此控件的完整 API 文档，请参阅[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/MenuFlyout/)。 + +在 _GitHub_ 上查看源代码 [`MenuFlyout.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Flyouts/MenuFlyout.cs) diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/path-icon.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/path-icon.md similarity index 73% rename from i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/path-icon.md rename to i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/path-icon.md index f4d93ca54..7ad3e2dbf 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/detailed-reference/path-icon.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/path-icon.md @@ -4,27 +4,27 @@ description: REFERENCE - Built-in Controls import PathIconHouseScreenshot from '/img/reference/controls/pathicon/pathicon-house.png'; -# Path Icon +# PathIcon 路径图标 -The path icon control can draw an icon graphic from a stream geometry. For example, you can use the icon geometries from the _Avalonia UI_ Fluent icons resource. +`PathIcon` 控件可以从流几何图形绘制图标。例如，您可以使用 _Avalonia UI_ Fluent 图标资源中的图标几何图形。 :::info -To see the full list of Fluent icons available with _Avalonia UI_, see [https://avaloniaui.github.io/icons.html](https://avaloniaui.github.io/icons.html) +要查看 _Avalonia UI_ 提供的 Fluent 图标的完整列表，请参见 [https://avaloniaui.github.io/icons.html](https://avaloniaui.github.io/icons.html) ::: -This control is most often used as part of a composition inside another control. For example, to create an icon in a menu or a button. +此控件通常作为另一个控件内部组合的一部分使用。例如，在菜单或按钮中创建图标。 -## 常用属性 +## 有用的属性 -你可能最常使用这些属性： +您可能最常使用这些属性： -
PropertyDescription
DataThe geometry for the icon.
ForegroundThe color used to draw the icon.
+
属性描述
Data图标的几何图形。
Foreground用于绘制图标的颜色。
## 示例 ```xml + Data="{StaticResource building_shop_regular}"/> ``` ```xml title='Resources' @@ -33,12 +33,12 @@ This control is most often used as part of a composition inside another control. ``` -It works in the preview pane as well: +它在预览窗格中也能正常工作： ## 更多信息 -For the complete API documentation about this control, see [here](https://reference.avaloniaui.net/api/Avalonia.Controls/PathIcon/). +有关此控件的完整 API 文档，请参见 [这里](https://reference.avaloniaui.net/api/Avalonia.Controls/PathIcon/)。 -View the source code on _GitHub_ [`PathIcon.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/PathIcon.cs) +在 _GitHub_ 上查看源代码 [`PathIcon.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/PathIcon.cs) diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/selectable-textblock.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/selectable-textblock.md new file mode 100644 index 000000000..976925a7e --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/selectable-textblock.md @@ -0,0 +1,55 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TextBlockBasicScreenshot from '/img/reference/controls/textblock/textblock-basic.png'; + +# SelectableTextBlock 可选文本块 + +`SelectableTextBlock` 块是一个用于显示文本的标签，允许选择和复制文本。它可以显示多行，并且可以完全控制所使用的字体。 + +## 有用的属性 + +您可能最常使用这些属性： + +| 属性 | 描述 | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| SelectionStart | 当前选择的起始字符索引。 | +| SelectionEnd | 当前选择的结束字符索引。 | +| SelectionBrush | 高亮显示选中文本的画刷。 | +| SelectionForeground | 用于选中文本前景的画刷。 | +| FontSize | 字体的大小。 | +| FontWeight | 字体的粗细。默认是正常，选项包括 `Bold`。 | +| FontStyle | 应用于字母的样式。默认是正常，选项包括 `Italic`。 | +| TextDecorations | 应用于字母的线条装饰。默认是无，选项包括 `Underline`、`Strikethrough`、`Baseline` 和 `Overline`。要同时应用多个，请在选项之间用空格分隔。 | +| xml:space | TextBlock 本身会尊重其内容在 XAML 中设置的换行和空白，但如果没有 `xml:space="preserve"`，它将被解析器过滤掉。 | + +## 示例 + +此示例显示了用作标题、单行和多行显示的文本块。 + +```xml + + Heading + This is a single line. + This is a multi-line display + that has returns in it. + The text block respects the line breaks + as set out in XAML. + +``` + +样式在预览窗格中有效： + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/SelectableTextBlock/)。 +::: + +:::info +在 GitHub 上查看源代码 [`SelectableTextBlock.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/SelectableTextBlock.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabcontrol.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabcontrol.md new file mode 100644 index 000000000..e1d95cb62 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabcontrol.md @@ -0,0 +1,53 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TabControlZonesScreenshot from '/img/reference/controls/tabcontrol/tabcontrol-zones.png'; +import TabControlNavigationScreenshot from '/img/reference/controls/tabcontrol/tabcontrol-navigation.gif'; + +# TabControl 选项卡控件 + +`TabControl` 允许您将视图细分为选项卡项。 + + + +每个选项卡项都有一个标题和一个内容区。标题按它们在 XAML 中出现的顺序呈现在一个条带中。当用户点击选项卡标题时，其内容变得可见，并放置在选项卡控件的内容区中，位于选项卡条带下方。 + +您可以在标题和内容区中组合 UI，以满足 _Avalonia UI_ 应用程序的 UI 要求。 + +:::info +如果您只需要此控件的选项卡标题部分的功能，请考虑使用选项卡条带。请参见[这里](./tabstrip.md)。 +::: + +## 示例 + +这是一个简单的选项卡示例。选项卡内容只是一些文本： + +```xml + + + This is tab 1 content + + + This is tab 2 content + + + This is tab 3 content + + +``` + +选项卡控件甚至可以在预览窗格中工作！ + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/TabControl/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`TabControl.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TabControl.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabstrip.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabstrip.md new file mode 100644 index 000000000..7dfe316c5 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tabstrip.md @@ -0,0 +1,42 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TabStripNavigation from '/img/reference/controls/tabstrip/tabstrip-navigation.gif'; + +# TabStrip 选项卡头条带 + +显示一条选项卡头的条带。您可以将此控件用作水平菜单。 + +选项卡条由 `` 元素组成。这些元素按它们在 XAML 中出现的顺序显示。 + +## 有用的属性 + +您可能最常使用此属性： + +
属性描述
TabItem.Header选项卡的文本。
+ +## 示例 + +```xml + + + + + +``` + +在 Windows 上运行时，它看起来像这样： + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls.Primitives/TabStrip/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`TabStrip.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Primitives/TabStrip.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textblock.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textblock.md new file mode 100644 index 000000000..b674d019d --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textblock.md @@ -0,0 +1,129 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TextBlockBasicScreenshot from '/img/reference/controls/textblock/textblock-basic.png'; +import TextBlockRunScreenshot from '/img/reference/controls/textblock/textblock-run.png'; +import TextBlockSpanScreenshot from '/img/reference/controls/textblock/textblock-span.png'; +import TextBlockUIContainerScreenshot from '/img/reference/controls/textblock/textblock-uicontainer.png'; + +# TextBlock 文本块 + +`TextBlock` 是一个用于显示文本的只读标签。它可以显示多行文本，并且可以完全控制所使用的字体。 + +## 常用属性 + +你可能最常使用这些属性： + +| 属性 | 描述 | +|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| Text | 要显示的文本。 | +| FontSize | 字体的大小。 | +| FontWeight | 字体的粗细。默认是正常，选项包括 `Bold`。 | +| FontStyle | 应用于字母的样式。默认是正常，选项包括 `Italic`。 | +| TextDecorations | 应用于字母的线条装饰。默认是无，选项包括 `Underline`、`Strikethrough`、`Baseline` 和 `Overline`。要同时应用多个，请在选项之间用空格分隔。 | +| xml:space | `xml:space="preserve"` 指示 XML 解析器保留分配给 `TextBlock` 的内容的换行符和空白，否则默认情况下会被删除。 | + +## 示例 + +此示例演示使用多个 `TextBlock` 控件来显示标题、包含额外空格的单行和多行显示。 + +```xml + + Heading + This is a single line. + This is a multi-line display +that has returns in it. +The text block respects the line breaks +as set out in XAML. + +``` + +样式在预览窗格中工作： + + + +## 内联 + +文本内联允许在单个 `TextBlock` 内对文本和控件进行多样化格式化。虽然 `TextBlock.Text` 通常用于显示单一格式的文本，但其子 `Content` 允许包含内联集合。 + +### Run + +`Run` 内联表示一段连续的统一格式文本。 + +```xml + + + + + + + + +``` + + + +### LineBreak + +`LineBreak` 内联强制换行。 + +```xml + + This is the first line andhere comes the second + +``` + +### Span + +`Span` 内联允许对内联进行分组，包括非文本内联。虽然 `Span` 可以应用自己的文本格式，但有一些预定义的格式内联派生自 `Span`：`Bold`、`Italic` 和 `Underline`。用户还可以从 `Span` 派生以创建自己的格式，而不是使用样式。 + +```xml + + This text is green with bold sections, + italic red sections, + some + enlarged font runs, + and + back to the original formatting + +``` + + + +### InlineUIContainer + +`InlineUIContainer` 允许将任何 `Control` 作为内联包含。 + +```xml + + 🚀 This example shows the power of + + + + in creating rich text displays with + + + + inline controls 📈 + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/TextBlock/)。 +::: + +:::info +在 GitHub 上查看源代码 [`TextBlock.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TextBlock.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textbox.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textbox.md new file mode 100644 index 000000000..587763a68 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/textbox.md @@ -0,0 +1,43 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TextBoxEntryScreenshot from '/img/reference/controls/textbox/textbox-entry.gif'; + +# TextBox 文本框 + +文本框提供了一个用于键盘输入的区域。它可以用于单行或多行输入。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
Text输入中的当前文本。
PasswordChar隐藏任何输入的字符，并用给定的字符代替。
Watermark当输入为空时，显示为淡化的提示。
AcceptsReturn允许用户输入换行符，使输入变为多行。如果内容超过可用高度，将出现垂直滚动条。
TextWrapping定义如何处理水平行溢出。选项有：'NoWrap'、'Wrap' 和 'WrapWithOverflow'。
+ +## 示例 + +此示例包含一个基本的单行文本框、一个密码框和一个文本换行的多行文本框： + +```xml + + Name: + + Password: + + Notes: + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见 [这里](http://reference.avaloniaui.net/api/Avalonia.Controls/TextBox/)。 +::: + +:::info +在 GitHub 上查看源代码 [TextBox.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TextBox.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/timepicker.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/timepicker.md new file mode 100644 index 000000000..25cf50755 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/timepicker.md @@ -0,0 +1,59 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TimePickerScreenshot from '/img/reference/controls/timepicker/timepicker.gif'; + +# TimePicker 时间选择器 + +时间选择器有两个或三个“微调”控件，允许用户选择一个时间值。时间选择器可以使用24小时或12小时格式。当点击控件时，选择器控件会显示。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
ClockIdentifier选择12小时和24小时格式。12小时格式会显示一个用于AM/PM的第三个微调控件。
MinuteIncrement定义分钟的可选增量。默认值为1（可以指定任意分钟数）。
SelectedTime（可空的TimeSpan）所选时间。
+ +## 示例 + +此示例显示如何创建一个24小时制的时间选择器，时间间隔为20分钟： + +```xml + + +``` + + + +## **初始化时间** + +你可以在XAML中将时间值设置为属性。使用 _Hh:Mm_ 格式的字符串，其中 _Hh_ 是小时，可以在0到23之间， _Mm_ 是分钟，可以在0到59之间。 + +```xml + +``` + +如果需要编写后台代码，可以这样写： + +```csharp +TimePicker timePicker = new TimePicker +{ + SelectedTime = new TimeSpan(9, 15, 0) // 秒数会被忽略。 +}; +``` + +你可以通过将所选时间重置为null来清除显示。 + +## 更多信息 + +:::info +有关此控件的完整API文档，请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/TimePicker/)。 +::: + +:::info +在_GitHub_上查看源代码 [`TimePicker.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/DateTimePickers/TimePicker.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tooltip.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tooltip.md new file mode 100644 index 000000000..4d70f440a --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tooltip.md @@ -0,0 +1,54 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import ToolTipTextHoverScreenshot from '/img/reference/controls/tooltip/tooltip-text-hover.gif'; +import ToolTipContentScreenshot from '/img/reference/controls/tooltip/tooltip-content-hover.gif'; + +# ToolTip 工具提示 + +工具提示是一个弹出窗口，当用户将鼠标悬停在附加到的“宿主”控件上时显示其内容。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
ToolTip.Tip工具提示内容的附加属性。
ToolTip.Placement定义工具提示相对于宿主或指针的位置。可选择顶部、底部、左侧、右侧、锚点和重力、指针。默认值是指针，它将提示内容放置在指针停止移动的位置。
ToolTip.HorizontalOffset工具提示相对于位置的水平偏移（默认值为0）。
ToolTip.VerticalOffset工具提示相对于位置的垂直偏移（默认值为20）。
ToolTip.ShowDelay指针必须保持静止的时间，工具提示才会出现。以微秒为单位（默认值为400）。
+ +## 示例 + +这是一个简单的基于文本的工具提示，使用默认的放置和延迟属性值；此矩形放置在具有较大尺寸的窗口中： + +```xml + +``` + + + +要为工具提示提供更丰富的呈现，请使用 `` 元素。例如： + +```xml + + + + Rectangle + Some explanation here. + + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整API文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/ToolTip/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`ToolTip.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/ToolTip.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/transitioningcontentcontrol.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/transitioningcontentcontrol.md new file mode 100644 index 000000000..a6f9fccad --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/transitioningcontentcontrol.md @@ -0,0 +1,62 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TransitioningContentControlFadeScreenshot from '/img/reference/controls/transitioningcontentcontrol/transitioningcontentcontrol-fade.webp'; +import TransitioningContentControlSlideScreenshot from '/img/reference/controls/transitioningcontentcontrol/transitioningcontentcontrol-slide.webp'; + +# TransitioningContentControl 切换内容控件 + +切换内容控件可以使用页面过渡来为内部控件的内容更改添加动画。 + +您可以使用此控件在幻灯片中显示不同图像的集合。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
Content要在控件中显示的内容。
TransitioningContentControl.ContentTemplate用于显示内容的数据模板。
TransitioningContentControl.PageTransition用于为内容更改添加动画的页面过渡。应用的主题将提供默认的页面过渡。要禁用过渡，请将此属性设置为 null。
+ +## 示例 + +在此示例中，视图模型包含一个不同图像的集合，以在幻灯片中显示它们。以下 XAML 将使用默认的页面过渡来更改图像（在数据模板中），每当绑定的 `SelectedImage` 属性更改时： + +```xml + + + + + + + +``` + + + +在此示例中，指定了不同的页面过渡以水平滑动图像： + +```xml + + + + + + + + + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.ReactiveUI/TransitioningContentControl/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`TransitioningContentControl.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TransitioningContentControl.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tray-icon.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tray-icon.md new file mode 100644 index 000000000..605f1d24c --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/tray-icon.md @@ -0,0 +1,62 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TrayIconScreenshot from '/img/reference/controls/trayicon/trayicon.gif'; + +# TrayIcon 托盘图标 + +## 概述 + +托盘图标允许 _Avalonia UI_ 应用程序在系统托盘中显示图标和本地菜单。它支持 _Windows_、_macOS_ 和一些 _Linux_ 发行版（已确认在 _Ubuntu_ 上工作）。 + +您必须在应用程序的 XAML 文件中定义托盘菜单。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
Icon在系统托盘中显示的图标。通常从应用程序资源中加载。
ToolTipText当用户将鼠标悬停在托盘图标上时显示的工具提示文本。
TrayIcon.Menu附加到托盘图标的本地菜单控件。
+ +:::info +您必须使用托盘图标的**本地菜单**，而不是 _Avalonia UI_ 菜单控件。有关本地菜单的详细信息，请参见[此处](./nativemenu.md)的参考。 +::: + +## 示例 + +此示例在 `App.xaml` 文件中定义了一个简单的托盘图标菜单： + +```xml + + + + + + + + + + + + + + + + + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见此处。 +::: + +:::info +在 GitHub 上查看源代码 [`TrayIcon.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TrayIcon.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/README.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/README.md new file mode 100644 index 000000000..7ffb054aa --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/README.md @@ -0,0 +1,102 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TreeDataGridFilesScreenshot from '/img/reference/controls/treedatagrid/treedataggrid-files.png'; +import TreeDataGridCountriesScreenshot from '/img/reference/controls/treedatagrid/treedataggrid-countries.png'; +import TreeDataGridNuGetScreenshot from '/img/reference/controls/treedatagrid/treedataggrid-nuget.png'; + +# TreeDataGrid 树状数据表格 + +`TreeDataGrid` 在单个视图中同时显示分层数据和表格数据。它是树视图和数据网格的组合。 + +:::info +有关树视图控件的完整信息，请参见[此处](../treeview-1.md)的参考。 +::: + +:::info +有关数据网格控件的完整信息，请参见[此处](../datagrid/)的参考。 +::: + +该控件有两种操作模式： + +* _分层 -_ 数据以树形结构显示，并带有可选列 +* _平面 -_ 数据以二维表格显示，类似于数据网格控件 + +## 分层数据 + +这是一个显示分层数据的树数据网格的示例： + + + +## 平面数据 + +这是一个显示平面数据的树数据网格的示例： + + + +## NuGet 包引用 + +您必须安装数据网格的 _NuGet_ 包，有几种方法可以做到这一点。您可以使用 IDE 项目菜单中的 **Manage NuGet Packages**： + + +或者，您可以从命令行运行以下指令： + +```bash +dotnet add package Avalonia.Controls.TreeDataGrid +``` + +或者直接将包引用添加到项目 (`.csproj`) 文件中： + +```xml + +``` + +:::warning +注意，您必须始终安装与您使用的 _Avalonia UI_ 版本匹配的数据网格版本。 +::: + +## 包含数据网格样式 + +您必须引用数据网格主题以包含树数据网格使用的附加样式。您可以通过在应用程序 (`App.axaml` 文件) 中添加 `` 元素来实现这一点。 + +例如： + +```xml + + + + + + +``` + +## 有用的属性 + +您可能最常使用这些属性： + +| 属性 | 描述 | +| ---------------------- | --------------------------------------------------------------------------------------------- | +| `Source` | 用作控件数据源的绑定集合。 | +| `CanUserResizeColumns` | 指示用户是否可以使用指针调整列宽。（默认值为 false。） | +| `CanUserSortColumns` | 指示用户是否可以通过单击列标题对列进行排序。（默认值为 true。） | + +## Source + +您将使用 `Source` 属性绑定到代码中定义的视图模型。视图模型包括列如何映射到保存网格项的类的属性的定义。 + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见此处。 +::: + +:::info +在 GitHub 上查看源代码 [TreeDataGrid.cs](https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid) +::: + +下一页展示了创建带有列的分层树数据网格的示例。 + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-flat-treedatagrid.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-flat-treedatagrid.md new file mode 100644 index 000000000..34c8003ed --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-flat-treedatagrid.md @@ -0,0 +1,80 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import FlatTreeDataGridSourceScreenshot from '/img/reference/controls/treedatagrid/treedatagrid-flat.gif'; + +# 扁平树数据表格 + +## 示例 + +在此示例中，视图模型包含一个可观察集合，该集合填充了数据，然后用于创建一个 `FlatTreeDataGridSource` 属性以绑定到树数据网格的源。网格的项是 `Person` 类。 + +``` + +``` + +```csharp title='C# View Model' +using Avalonia.Controls.Models.TreeDataGrid; +using Avalonia.Controls; +using AvaloniaControls.Models; +using System.Collections.ObjectModel; +using System.Linq; + +namespace AvaloniaControls.ViewModels +{ + public class MainWindowViewModel : ViewModelBase + { + private ObservableCollection _people; + + public FlatTreeDataGridSource PersonSource { get; } + + public MainWindowViewModel() + { + _people = new ObservableCollection() + { + new Person ("Eleanor", "Pope", 32 ), + new Person ("Jeremy", "Navarro", 74 ), + new Person ( "Lailah ", "Velazquez", 16 ), + new Person ( "Jazmine", "Schroeder", 52 ), + }; + + PersonSource = new FlatTreeDataGridSource(_people) + { + Columns = + { + new TextColumn + ("First Name", x => x.FirstName), + new TextColumn + ("Last Name", x => x.LastName), + new TextColumn + ("Age", x => x.Age), + }, + }; + } + } +} + +``` + +```csharp title='C# Item Class' +public class Person +{ + public string FirstName { get; set; } + public string LastName { get; set; } + public int Age { get; set; } + + public Person(string firstName, string lastName, int age) + { + FirstName = firstName; + LastName = lastName; + Age = age; + } +} +``` + +数据源还定义了如何将数据模型映射到树数据网格中的行和列。因为此示例显示的是扁平数据，所以数据源在视图模型上使用 `FlatTreeDataGridSource` 属性。 + +使用 `TextColumn` 类定义了三列。每个列都使用一个 lambda 表达式来返回列值。 + + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-hierarchical-treedatagrid.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-hierarchical-treedatagrid.md new file mode 100644 index 000000000..3c74e2ab8 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/creating-a-hierarchical-treedatagrid.md @@ -0,0 +1,117 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import HierarchicalTreeDataGridSourceScreenshot from '/img/reference/controls/treedatagrid/treedatagrid-hierarchical.gif'; + +# 分层树数据表格 + +## 示例 + +在此示例中，视图模型包含一个可观察集合，该集合填充了数据，然后用于创建一个 `HierarchicalTreeDataGridSource` 属性，以绑定到树数据网格的源。网格的项目是类 `Person`。 + +``` + +``` + +```csharp title='C# View Model' +using Avalonia.Controls.Models.TreeDataGrid; +using Avalonia.Controls; +using AvaloniaControls.Models; +using System.Collections.ObjectModel; +using System.Linq; + +namespace AvaloniaControls.ViewModels +{ + public class MainWindowViewModel : ViewModelBase + { + private ObservableCollection _people; + + public HierarchicalTreeDataGridSource PersonSource { get; } + + public MainWindowViewModel() + { + _people = new ObservableCollection() + { + new Person + { + FirstName = "Eleanor", + LastName = "Pope", + Age = 32, + Children = + { + new Person + { + FirstName = "Marcel", + LastName = "Gutierrez", + Age = 4 + }, + } + }, + new Person + { + FirstName = "Jeremy", + LastName = "Navarro", + Age = 74, + Children = + { + new Person + { + FirstName = "Jane", + LastName = "Navarro", + Age = 42 , + Children = + { + new Person + { + FirstName = "Lailah ", + LastName = "Velazquez", + Age = 16 + } + } + }, + } + }, + new Person + { + FirstName = "Jazmine", + LastName = "Schroeder", + Age = 52 + }, + }; + + PersonSource = new HierarchicalTreeDataGridSource(_people) + { + Columns = + { + new HierarchicalExpanderColumn( + new TextColumn + ("First Name", x => x.FirstName),x => x.Children), + new TextColumn + ("Last Name", x => x.LastName), + new TextColumn("Age", x => x.Age), + }, + }; + } + } +} + +``` + +```csharp title='C# Item Class' +public class Person +{ + public string? FirstName { get; set; } + public string? LastName { get; set; } + public int Age { get; set; } + public ObservableCollection Children { get; } = new(); +} +``` + +数据源还定义了如何将数据模型映射到树数据网格中的行和列。因为此示例显示的是分层数据，所以数据源在视图模型上使用 `HierarchicalTreeDataGridSource` 属性。 + +定义了三列： + +第一列用 `HierarchicalExpanderColumn` 包围。此元素包含一个 `TextColumn`，它采用一个 lambda 来返回列值，另一个返回行的子项。该列将显示一个带有折叠或展开子行（如果有）的按钮。其余列仅用 `TextColumn` 定义。 + + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/treedatagrid-column-types.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/treedatagrid-column-types.md new file mode 100644 index 000000000..25dfdfb25 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treedatagrid/treedatagrid-column-types.md @@ -0,0 +1,65 @@ +--- +description: REFERENCE - Built-in Controls +--- + +# 树形数据表格列类型 + +树形数据网格支持三种不同的列类型： + +* 文本列 +* 层次结构展开列 +* 模板列 + +### 文本列 + +文本列（类 `TextColumn`）在您希望列中的单元格具有文本值时非常有用。可以这样创建文本列： + +```csharp +new TextColumn("Column Header", x => x.Property) +``` + +这里的第一个泛型参数是构成网格行的项目的类。第二个泛型参数是属性的类型。 + +![](https://user-images.githubusercontent.com/53405089/157456551-dd394781-903a-4c7b-8874-e631e21534a1.png) + +上图是 `TextColumn` 构造函数的签名。前两个参数是必需的：第一个是列标题，第二个是获取属性值的表达式。 + +`TextColumn` 类实现了列接口 `IColumn`。 + +### 层次结构展开列 + +层次结构展开列（类：`HierarchicalExpanderColumn`）只能与 _层次结构_ 数据操作模式一起使用，并且必须与数据源类 `HierarchicalTreeDataGridSource` 一起使用。此列类型必须包含一个内部列（接口 `IColumn`）来定义其标题和值属性。层次结构展开列在层次树数据网格中显示展开和收缩的按钮。 + +这种列类型可以这样创建： + +```csharp +new HierarchicalExpanderColumn( + new TextColumn("Column Header", x => x.Property), + x => x.Children) +``` + +泛型参数是构成网格行的项目的类。这与内部列的项目类相同。 + +![](https://user-images.githubusercontent.com/53405089/157536079-fd14f1ed-0a7d-438a-abba-fd56766709a9.png) + +上图是 `HierarchicalExpanderColumn` 构造函数的签名。构造函数中的第一个参数是内部列，第二个参数是（可为空的）子元素选择器。 + +### 模板列 + +模板列（类 `TemplateColumn`）是一种完全可定制的方式来创建列。它本质上为列形成一个**数据模板**。 + +您可以这样创建模板列： + +```csharp +new TemplateColumn("Column Header", + new FuncDataTemplate((a,e) => new SomeControl())) +``` + +![](https://user-images.githubusercontent.com/53405089/157664231-8653bce9-f8d6-4fbc-8e78-e3ff93f1ace2.png) + +上图是 `TemplateColumn` 构造函数的签名。它有两个必需的参数：第一个是列标题，第二个是返回 `IDataTemplate` 的函数。 + +:::info +有关在代码中创建**数据模板**概念的更多信息，请参见[此处](../../../concepts/templates/creating-data-templates-in-code)。 +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treeview-1.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treeview-1.md new file mode 100644 index 000000000..20a54c164 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treeview-1.md @@ -0,0 +1,182 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import TreeViewAnimalHierarchyScreenshot from '/img/reference/controls/treeview/treeview-animal-hierarchy.gif'; +import TreeViewEnhancedAnimalHierarchyScreenshot from '/img/reference/controls/treeview/treeview-enhanced-animal-hierarchy.gif'; + +# TreeView 树视图 + +树视图控件可以呈现层次数据并允许项目选择。项目是模板化的，因此您可以自定义它们的显示方式。 + +有两个数据源：控件的主要项目源，这提供了层次数据的根。然后是项目模板中的项目源，它允许控件列出层次数据的下一级。 + +## 示例 + +此示例使用 MVVM 模式视图模型来保存一些基于 C# 节点类的层次数据。在此示例中，视图模型的 `Nodes` 集合中有一个根节点： + +```xml + + + + + + + +``` + +```csharp title='C# View Model' +using AvaloniaControls.Models; +using System.Collections.ObjectModel; + +namespace AvaloniaControls.ViewModels +{ + public class MainWindowViewModel : ViewModelBase + { + public ObservableCollection Nodes{ get; } + + public MainWindowViewModel() + { + Nodes = new ObservableCollection + { + new Node("Animals", new ObservableCollection + { + new Node("Mammals", new ObservableCollection + { + new Node("Lion"), new Node("Cat"), new Node("Zebra") + }) + }) + }; + } + } +} +``` + +```csharp title='C# Node Class' +using System.Collections.ObjectModel; + +namespace AvaloniaControls.Models +{ + public class Node + { + public ObservableCollection? SubNodes { get; } + public string Title { get; } + + public Node(string title) + { + Title = title; + } + + public Node(string title, ObservableCollection subNodes) + { + Title = title; + SubNodes = subNodes; + } + } +} +``` + +默认情况下显示根节点（或节点）。用户可以通过单击相邻的箭头来展开或收缩每个节点。单击节点标题选择项目。 + + + +这是前一个示例的开发版本，具有多个根节点、修订的项目模板以及在视图模型代码中进行的初始选择： + +```xml + + + + + + + + + +``` + +```csharp title='C# View Model' +using AvaloniaControls.Models; +using System.Collections.ObjectModel; +using System.Linq; + +namespace AvaloniaControls.ViewModels +{ + public class MainWindowViewModel : ViewModelBase + { + public ObservableCollection Nodes { get; } + public ObservableCollection SelectedNodes { get; } + + public MainWindowViewModel() + { + SelectedNodes = new ObservableCollection(); + Nodes = new ObservableCollection + { + new Node("Animals", new ObservableCollection + { + new Node("Mammals", new ObservableCollection + { + new Node("Lion"), new Node("Cat"), new Node("Zebra") + }) + }), + new Node("Birds", new ObservableCollection + { + new Node("Robin"), new Node("Condor"), + new Node("Parrot"), new Node("Eagle") + }), + new Node("Insects", new ObservableCollection + { + new Node("Locust"), new Node("House Fly"), + new Node("Butterfly"), new Node("Moth") + }), + }; + + var moth = Nodes.Last().SubNodes?.Last(); + if (moth!=null) SelectedNodes.Add(moth); + } + } +} +``` + +```csharp title='C# Node Class' +using System.Collections.ObjectModel; + +namespace AvaloniaControls.Models +{ + public class Node + { + public ObservableCollection? SubNodes { get; } + public string Title { get; } + + public Node(string title) + { + Title = title; + } + + public Node(string title, ObservableCollection subNodes) + { + Title = title; + SubNodes = subNodes; + } + } +} +``` + +树视图在需要时添加滚动条。可以通过按住 Ctrl 键来扩展选择。 + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/TreeView/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`TreeView.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TreeView.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/uniform-grid.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/uniform-grid.md new file mode 100644 index 000000000..9939c51c2 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/uniform-grid.md @@ -0,0 +1,40 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import UniformGridFrenchFlagScreenshot from '/img/reference/controls/uniformgrid/uniformgrid-french-flag.png'; + +# UniformGrid 均匀网格 + +Uniform Grid 将可用空间在两个方向上均匀地划分为单元格。您可以指定使用多少个划分，并且这些划分在两个方向上可以不同。 + +然后，您可以使用附加的行和列索引属性（从零开始）将子控件分配到创建的单元格中。 + +## 常用属性 + +您可能最常使用这些属性： + +
属性描述
Rows整数。设置高度中相等行的数量。
Columns整数。设置宽度中相等列的数量。
Grid.Column附加到子控件以设置其列索引。
Grid.Row附加到子控件以设置其行索引。
+ +## 示例 + +```xml + + + + + +``` + + + +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[此处](https://reference.avaloniaui.net/api/Avalonia.Controls.Primitives/UniformGrid/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`UniformGrid.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Primitives/UniformGrid.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/viewbox.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/viewbox.md new file mode 100644 index 000000000..a74df32ef --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/viewbox.md @@ -0,0 +1,67 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import ViewboxScaleUniformBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-uniform-both.gif'; +import ViewboxScaleUniformFillBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-uniformtofill-both.gif'; +import ViewboxScaleFillBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-fill-both.gif'; +import ViewboxScaleNoneBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-none-both.gif'; + +import ViewboxScaleUniformDownOnlyScreenshot from '/img/reference/controls/viewbox/viewbox-uniform-downonly.gif'; +import ViewboxScaleUniformUpOnlyScreenshot from '/img/reference/controls/viewbox/viewbox-uniform-uponly.gif'; + +# Viewbox 视图盒 + +`Viewbox` 是一个可以缩放其内容的容器控件。可以定义内容的拉伸方式，以及拉伸发生的方向（拉伸方向）。 + +## 常用属性 + +你可能最常使用这些属性： + +| 属性 | 默认值 | 描述 | +| ------------------ | ------- |--------------------------------------------------------------| +| `Stretch` | Uniform | 决定内容如何适应可用空间。 | +| `StretchDirection` | Both | 决定缩放何时发生。 | + +`Stretch` 属性的值如下： + +
Stretch描述
Uniform(默认) 内容被调整大小以适应容器的尺寸，同时保持其原生的宽高比。
Fill内容被调整大小以填充容器的尺寸。宽高比不被保持。
UniformToFill内容被调整大小以完全填充容器，同时保持其原生的宽高比。然而，如果内容的宽高比与分配空间的宽高比不匹配，则内容的一部分可能会被隐藏。
+ +`StretchDirection` 属性的值如下： + +| Stretch Direction | 描述 | +| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| `UpOnly` | 仅当内容小于可用空间时才缩放内容。如果内容较大，则不进行缩小。 | +| `DownOnly` | 仅当内容大于可用空间时才缩放内容。如果内容较小，则不进行放大。 | +| `Both` | (默认) 始终根据拉伸模式适应可用空间。 | + +### 示例 + +这个简单的示例展示了一个 `Viewbox` 以统一的方式放大一个圆（拉伸和方向均为默认值）。 + +```xml + + + +``` + +### 演示 + +以下演示展示了不同的拉伸和拉伸方向属性设置的组合效果。第一组展示了拉伸属性的效果： + +
Stretch 值演示
Uniform
UniformToFill
Fill
None
+ +第二组演示展示了拉伸方向属性的效果： + +
Stretch Direction演示
UpOnly
DownOnly
+ +## 更多信息 + +:::info +有关此控件的完整 API 文档，请参见 [这里](http://reference.avaloniaui.net/api/Avalonia.Controls/Viewbox/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`Viewbox.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Viewbox.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/wrappanel.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/wrappanel.md new file mode 100644 index 000000000..92e4f75cc --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/wrappanel.md @@ -0,0 +1,55 @@ +--- +description: REFERENCE - Built-in Controls +--- + +import WrapPanelHorizontalScreenshot from '/img/reference/controls/wrappanel/wrappanel-horizontal.png'; +import WrapPanelVerticalScreenshot from '/img/reference/controls/wrappanel/wrappanel-vertical.png'; + +# WrapPanel 顺序换行面板 + +WrapPanel 使用默认排列方式将多个子元素从左到右依次排列，直到宽度不够时换行（包括任何边距和边框）。当没有剩余空间时，它会开始新的一行。 + +当 Orientation 属性设置为 Vertical 时，排列方式为从上到下，当没有剩余高度时开始新的一列。 + +## 常用属性 + +你可能最常使用这些属性： + +
属性描述
Orientation更改排列方向。
+ +## 示例 + +```xml + + + + + + + +``` + + + +```xml + + + + + + + +``` + + + +### 更多信息 + +:::info +有关此控件的完整 API 文档，请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/WrapPanel/)。 +::: + +:::info +在 _GitHub_ 上查看源代码 [`WrapPanel.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/WrapPanel.cs) +::: + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/gestures/pinchgesturerecognizer.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/gestures/pinchgesturerecognizer.md index 156bca31b..811ed105f 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/gestures/pinchgesturerecognizer.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/gestures/pinchgesturerecognizer.md @@ -2,11 +2,10 @@ description: REFERENCE - Gestures --- -# PinchGestureRecognizer - +# PinchGestureRecognizer 捏合手势识别器 一个用于追踪捏合手势的手势识别器。捏合手势发生在两个触控点向彼此靠近或远离的情况下。这在实现捏合缩放交互的控件中非常有用。 -## Using a PinchGestureRecognizer +## 使用捏合手势识别器 可以通过将 `PinchGestureRecognizer` 添加到控件的 `GestureRecognizers` 属性来将其附加到控件上。 ```xml x.OfType().NthChild(0, 3)); | `:nth-child(odd)` | 奇数元素：**1**，**3**，**5**... | | `:nth-child(even)` | 偶数元素：**2**，**4**，**6**... | | `:nth-child(2n+1)` | 奇数元素：**1**_(2×0+1)_，**3**_(2×1+1)_，**5**_(2×2+1)_...，等同于 `:nth-child(odd)` | -| `:nth-child(2n)` | 偶数元素：**2**_(2×1)_，**4**_(2×2)_，**6**_(2×3)_...，等同于 `:nth-child(even)`。请注意，**0**_(2×0)_是有效表示，但不匹配任何元素，因为索引从1开始。 | +| `:nth-child(2n)` | 偶数元素：**2**_(2×1)_，**4**_(2×2)_，**6**_(2×3)_...，等同于 `:nth-child(even)`。请注意，**0**_(2×0)_ 是有效表示，但不匹配任何元素，因为索引从1开始。 | | `:nth-child(7)` | 第7个元素 | | `:nth-child(n+7)` | 从第7个元素开始的每个元素：**7**_(0+7)_，**8**_(1+7)_，**9**_(2+7)_... | | `:nth-child(3n+4)` | 从第4个开始的每3个元素：**4**_(3×0+4)_，**7**_(3×1+4)_，**10**_(3×2+4)_，**13**_(3×3+4)_... |