diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md new file mode 100644 index 000000000..84d2c81a3 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md @@ -0,0 +1,160 @@ +--- +id: container-queries +title: 容器查询 +--- + +# 容器查询 + +容器查询允许根据作为容器的祖先元素的大小来激活控件的样式。 + +:::tip +Avalonia 的容器查询类似于 CSS 的容器查询,但功能更有限,以适应 Avalonia 支持的平台和外形样式。如果将 Toplevel 设置为容器,它们也可以像媒体查询一样工作。 +::: + +## 工作原理 + +容器查询依赖于将祖先控件设置成容器。容器大小的更改会根据查询激活样式。这些查询可以检查容器的宽度或高度,或两者兼而有之。任何控件都可以是容器,但设置为容器的控件不能受链接到它的容器查询所托管的样式的影响。当查询被激活时,查询中托管的所有样式也将根据其选择器被激活。 + +## 如何使用查询 + +### 声明容器查询 +容器查询可以在 XAML 中定义为控件 `Styles` 属性的直接子元素,如下所示: + +```xml + + + + + + +``` + +它们也可以是 `ControlTheme` 样式的一部分: + +```xml + + ... + + + + + ... + + + + + + + + + + +``` +`Name` 属性定义了它将附加到的容器的名称。这不是一个唯一的标识符,多个容器查询可以使用相同的名称。 +`Query` 定义了激活包含大小的规则。请参阅下面的[查询](#查询)。 + +这使得它们在针对不同屏幕尺寸的主题,或根据其父元素中可用空间而具有不同形式的主题中非常易于使用。这带来了一些限制。 +1. 容器查询不能托管在 `Style` 元素中。 + 以下是无效的。 +```xml + + + + + + +``` +2. 在查询中声明的样式不能影响容器或其祖先。这与能够影响其父控件的普通 `Styles` 不同。因为容器查询依赖于容器的实际大小,让容器受到其查询激活的样式的影响可能会导致循环行为,即容器的大小被两个或多个查询连续更新。 + +### 声明容器 +只有当作为 `ContainerQuery` 主机后代的控件被声明为容器时,容器查询才起作用。设置任何控件的 `Container.Name` 和 `Container.Sizing` 附加属性将声明该控件为容器,如下所示: + +```xml + +``` + +2. **图像展示**:对于需要高质量画面的图像展示: +```xml + + + + + + + +``` + +## 性能考量 + +出于性能原因,插值模式是按控件设置的。更高质量的插值需要更多的计算资源,因此请考虑以下准则: + +- 对以下情况使用 `HighQuality`: + - 重要的 UI 元素,如徽标 + - 质量至关重要的缩小图像 + - 照片画廊或以图像为中心的界面 + +- 对以下情况使用默认的 `LowQuality`: + - 背景图像 + - 质量不太关键的装饰元素 + - 对性能敏感的应用程序 + +## 创建全局设置 + +虽然 Avalonia 没有提供内置的方法来设置全局插值模式,但您可以创建自定义附加属性或行为来在整个应用程序中管理此设置。以下是一个示例方法: + +```csharp +public static class GlobalImageOptions +{ + public static readonly AttachedProperty InterpolationModeProperty = + AvaloniaProperty.RegisterAttached( + "InterpolationMode", + typeof(GlobalImageOptions), + defaultValue: BitmapInterpolationMode.HighQuality); + + public static void SetInterpolationMode(Image image, BitmapInterpolationMode value) + { + image.SetValue(RenderOptions.BitmapInterpolationModeProperty, value); + } +} +``` + +然后在您的 XAML 中: + +```xml + +``` + +## 获得最佳效果的技巧 + +1. **素材准备**: + - 提供适合其预期显示尺寸的适当分辨率的图像 + - 考虑为重要素材包含多种分辨率 + - 尽可能使用矢量格式 (SVG) 以获得与分辨率无关的图形 + +2. **布局注意事项**: + - 注意原始图像尺寸与显示尺寸的关系 + - 使用适当的容器和布局面板来管理图像缩放 + - 考虑将 `UniformToFill` 或 `Uniform` 拉伸模式与高质量插值结合使用 + +3. **测试**: + - 在不同屏幕密度上测试图像渲染 + - 验证在许多图像上使用高质量插值时的性能影响 + - 检查不同插值设置下的内存使用情况 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/deployment/native-aot.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/deployment/native-aot.md new file mode 100644 index 000000000..aad53c3ef --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/deployment/native-aot.md @@ -0,0 +1,156 @@ +--- +id: native-aot +title: Native AOT 部署 +--- + +Native AOT (Ahead-of-Time) 编译允许您将 Avalonia 应用程序发布为具有本机性能特征的自包含可执行文件。本指南涵盖了 Avalonia 特定的注意事项和 Native AOT 部署的设置。 + +## Avalonia 应用程序的优势 + +Native AOT 编译为 Avalonia 应用程序提供了几个特别相关的优势: + +- 更快的应用程序启动时间,尤其有利于桌面应用程序 +- 减少资源受限环境的内存占用 +- 自包含部署,无需安装 .NET 运行时 +- 通过减少攻击面(无 JIT 编译)提高安全性 +- 与裁剪结合使用时,分发包更小 + +## 为 Avalonia 设置 Native AOT + +### 1. 项目配置 + +将以下内容添加到您的 csproj 文件中: + +```xml + + true + + false + link + +``` + +### 2. 裁剪配置 + +Native AOT 需要裁剪。添加这些特定于 Avalonia 的裁剪设置: + +```xml + + + + + +``` + +## Avalonia 特定注意事项 + +### XAML 加载 +使用 Native AOT 时,XAML 会在构建时编译到应用程序中。请确保您: +- 在 XAML 文件中使用 `x:CompileBindings="True"` +- 避免在运行时动态加载 XAML +- 尽可能使用静态资源引用而不是动态资源 + +### 资产和资源 +- 将所有资产捆绑为嵌入式资源 +- 对您的资产使用 `AvaloniaResource` 构建操作 +- 避免从外部源动态加载资产 + +### ViewModel 和依赖注入 +- 在启动时注册您的 ViewModel +- 使用编译时 DI 配置 +- 避免基于反射的服务定位 + +## 发布 Avalonia Native AOT 应用程序 + +### Windows +```bash +dotnet publish -r win-x64 -c Release +``` + +### Linux +```bash +dotnet publish -r linux-x64 -c Release +``` + +### macOS +基于 Intel 的 macOS +```bash +dotnet publish -r osx-x64 -c Release +``` +基于 Apple 芯片的 macOS +```bash +dotnet publish -r osx-arm64 -c Release +``` + +:::tip +然后,您可以使用 Apple 的 [lipo 工具](https://developer.apple.com/documentation/apple-silicon/building-a-universal-macos-binary) 来合并 Intel 和 Apple Silicon 的二进制文件,从而使您能够发布通用二进制文件。 +::: + +## 故障排除常见问题 + +### 1. 缺少 XAML 控件 +如果运行时缺少控件: +```xml + + + + +``` + +### 2. 反射相关错误 +对于使用反射的 ViewModel 或服务: +```xml + + + +``` + +创建一个 `TrimmerRoots.xml`: +```xml + + + + + +``` + +## 已知限制 + +将 Native AOT 与 Avalonia 一起使用时,请注意以下限制: +- 动态控件创建必须在裁剪器设置中配置 +- 某些第三方 Avalonia 控件可能与 AOT 不兼容 +- 特定于平台的功能需要显式配置 +- 设计时工具中的实时预览可能受限 + +## 平台支持 + +| 平台 | 状态 | +|----------|--------| +| Windows x64 | ✅ 支持 | +| Windows Arm64 | ✅ 支持 | +| Linux x64 | ✅ 支持 | | +| Linux Arm64 | ✅ 支持 | +| macOS x64 | ✅ 支持 | | +| macOS Arm64 | ✅ 支持 | +| 浏览器 | ❌ 不支持 | + +## 最佳实践 + +1. **应用程序结构** + - 始终如一地使用 MVVM 模式 + - 最大限度地减少反射的使用 + - 优先选择编译时配置 + +2. **资源管理** + - 尽可能使用静态资源 + - 捆绑所有必需的资产 + - 在 IDisposable 中实现正确的清理 + +3. **性能优化** + - 启用绑定编译 + - 使用已编译的绑定 + - 为大型集合实现适当的虚拟化 + +## 额外资源 + +- [使用 Native AOT 的 Avalonia 示例应用程序](https://github.com/AvaloniaUI/Avalonia.Samples) \ No newline at end of file diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-implement-multi-page-apps.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-implement-multi-page-apps.md index 3d7427eb1..2bc429cfc 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-implement-multi-page-apps.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-implement-multi-page-apps.md @@ -1,6 +1,6 @@ --- id: how-to-implement-multi-page-apps -title: How To Implement Multi-page Apps +title: 如何实现多页面应用 --- diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-show-and-hide-a-split-view-pane-with-mvvm.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-show-and-hide-a-split-view-pane-with-mvvm.md index 68f9ff4d5..eff25799c 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-show-and-hide-a-split-view-pane-with-mvvm.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/development-guides/how-to-show-and-hide-a-split-view-pane-with-mvvm.md @@ -1,18 +1,17 @@ --- id: how-to-show-and-hide-a-split-view-pane-with-mvvm -title: How To Show and Hide a Split View Pane with MVVM +title: 如何使用 MVVM 架构显示和隐藏分割视图面板 --- import SplitViewExpanderScreenshot from '/img/reference/controls/splitview/splitview-expander.gif'; -准备中的内容。 +内容准备中。 -您可以使用MVVM模式与分割视图控件来实现“工具窗格”样式的用户界面。 +您可以结合 MVVM 架构与分割视图控件,实现类似“工具窗格”的用户界面。 :::info -这种技术使用复杂的**binding path**来定位父视图模型。 - +此方法通过复杂的 **binding path** 来定位父视图模型。 +::: TO DO - diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/cross-fade-page-transition.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/cross-fade-page-transition.md index d6f971e9a..0448d9894 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/cross-fade-page-transition.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/cross-fade-page-transition.md @@ -1,6 +1,6 @@ --- id: cross-fade-page-transition -title: Cross Fade Page Transition +title: 跨淡入淡出页面过渡 --- import Tabs from '@theme/Tabs'; diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/page-slide-transition.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/page-slide-transition.md index bc5bac5b6..b4605e6f6 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/page-slide-transition.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/graphics-and-animation/page-transitions/page-slide-transition.md @@ -1,6 +1,6 @@ --- id: page-slide-transition -title: Page Slide Transition +title: 页面滑动过渡 --- # 页面滑动过渡 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/styles-and-resources/how-to-use-theme-variants.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/styles-and-resources/how-to-use-theme-variants.md index 90eb36778..5280d3d3d 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/styles-and-resources/how-to-use-theme-variants.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/styles-and-resources/how-to-use-theme-variants.md @@ -126,4 +126,8 @@ RequestedThemeVariant 属性允许覆盖主题变体并为 `Application`、`Wind ![自定义主题字典](/img/basics/user-interface/styling/custom-theme-dictionaries.png) +:::warning +注意,在 `ThemeDictionaries` 中定义的资源只能通过 `DynamicResource` 标记扩展来引用。`StaticResource` 标记扩展无法找到这些资源,如果在非 `ThemeDictionaries` 部分没有同名资源,则会在运行时抛出异常。 +::: + 有关使用资源的更多详细信息,请参阅 [如何使用资源](resources) 页面。 \ No newline at end of file diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/README.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/README.md index a87a89e3d..7e3fc6d28 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/README.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/README.md @@ -209,9 +209,9 @@ public class Person ::: :::info -有关此控件的完整API文档,请参阅[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGrid/)。 +有关此控件的完整API文档,请参阅[这里](https://reference.avaloniaui.net/api/Avalonia.Controls/DataGrid/)。 ::: :::info -在 _GitHub_ 上查看源代码 [`DataGrid.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGrid.cs) +在 _GitHub_ 上查看源代码 [`DataGrid.cs`](https://github.com/AvaloniaUI/Avalonia.Controls.DataGrid/blob/master/src/Avalonia.Controls.DataGrid/DataGridTemplateColumn.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 index ff6285eae..b16fb40fe 100644 --- 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 @@ -102,7 +102,7 @@ public class Person ## 更多信息 :::info -有关此控件的完整 API 文档,请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridTemplateColumn/)。 +有关此控件的完整 API 文档,请参见[此处](https://reference.avaloniaui.net/api/Avalonia.Controls/DataGridTemplateColumn/)。 ::: :::info diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/datagridcolumns.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/datagridcolumns.md index f77935406..6851345eb 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/datagridcolumns.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/datagrid/datagridcolumns.md @@ -121,13 +121,13 @@ public class Person ::: :::info -有关数据表格复选框列的完整 API 文档,请参阅[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridCheckBoxColumn/)。 +有关数据表格复选框列的完整 API 文档,请参阅[此处](https://reference.avaloniaui.net/api/Avalonia.Controls.DataGrid/DataGridCheckBoxColumn/)。 ::: :::info -查看 _GitHub_ 上的源代码[`DataGridTextColumn.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridTextColumn.cs)。 +查看 _GitHub_ 上的源代码[`DataGridTextColumn.cs`](https://github.com/AvaloniaUI/Avalonia.Controls.DataGrid/blob/master/src/Avalonia.Controls.DataGrid/DataGridTextColumn.cs)。 ::: :::info -查看 _GitHub_ 上的源代码[`DataGridCheckBoxColumn.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridCheckBoxColumn.cs)。 +查看 _GitHub_ 上的源代码[`DataGridCheckBoxColumn.cs`](https://github.com/AvaloniaUI/Avalonia.Controls.DataGrid/blob/master/src/Avalonia.Controls.DataGrid/DataGridCheckBoxColumn.cs)。 ::: \ No newline at end of file diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/nativemenu.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/nativemenu.md index ad6ef2877..3d255eef2 100644 --- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/nativemenu.md +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/nativemenu.md @@ -1,18 +1,10 @@ ---- -description: REFERENCE - Built-in Controls ---- +# NativeMenu (原生菜单) -# NativeMenu 原生菜单 +`NativeMenu` 可以在 _macOS_ 和一些 Linux 发行版上显示菜单。 -原生菜单可以在 _macOS_ 和一些 Linux 发行版上显示菜单。 +您可以通过嵌套 `` 元素来创建子菜单。 -:::warning -此控件仅可用于附加到托盘图标。有关托盘图标的完整详细信息,请参阅参考资料[这里](tray-icon.md)。 -::: - -你可以通过嵌套 `` 元素来创建子菜单。 - -你可以通过包含一个 `` 元素或添加一个其标题设置为减号的菜单项来添加菜单分隔线,如下所示: +您可以通过包含 `` 元素或添加一个将其 `Header` 设置为减号的菜单项来添加菜单分隔线,如下所示: ```xml @@ -20,13 +12,127 @@ description: REFERENCE - Built-in Controls ## 常用属性 -你可能最常使用这些属性: +您可能会最常使用这些属性: -
属性描述
Header菜单标题。
Command用户点击菜单项时执行的命令。
+ + + + + + + + + +
属性描述
Header菜单标题。
Command用户点击菜单项时执行的命令。
Gesture与菜单项关联的键盘快捷键。
-## 示例 +## 示例1 -此示例定义了一个可以附加到托盘图标的本地菜单: +此示例修改 macOS 中的默认应用程序菜单。 + +:::info +更改应用程序的 `Name` 属性将导致应用程序菜单标题更改。在此示例中,它被设置为 *Sample Application*。 +::: + +![image](https://github.com/user-attachments/assets/d30bab47-f133-4f79-9bdb-d4fb4569ed61) + +```xml + + + + + + + + + + + + + + + + + + +``` + +你还需要在 code-behind 中添加正确的事件处理器 + +```C# +private void AppAbout_OnClick(object? sender, System.EventArgs args) { + +} + +private void AppPreferences_OnClick(object? sender, System.EventArgs args) { + +} +``` + +## 示例2 + +这个示例添加了 *文件* 菜单以及 *编辑* 菜单。为了说明 `NativeMenu.Menu` 元素在 XAML 中的位置上下文,此示例包含了一些其他 XML 标签;但为简洁起见,这些标签省略了应用程序正常运行所必需的属性。 + + +```Xml + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +在 视图模型中,你还需要添加以下命令函数: + +```C# +public void CutCommand() { } + +public void CopyCommand() { } + +public void PasteCommand() { } +``` + +### 手势格式 + +`Gestrue` 属性是一个以 `+` 分隔的键修饰符列表,后跟一个 `+`,然后是一个单独的按键字符(该符号本身亦可能是 `+`)。允许的修饰符包括 `Alt`,`Control`,`Shift`,还有 `Meta`。如果 `Gestrue` 属性为空字符串或仅包含单个按键字符,则不会引发异常,但是该手势就不会再激活菜单项了。如果提供了键修饰符但没有提供按键,或者是属性值的格式不正确,则会引发 `ArgumentException`。有关的更多详细信息,请参阅:[`KeyGesture`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Base/Input/KeyGesture.cs),[`Key`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Base/Input/Key.cs),还有 [`KeyModifier`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Base/Input/IKeyboardDevice.cs)。 + + +:::info +请注意,如果没有代码隐藏的 `Click` 事件处理程序或使用 `Command` 属性绑定的函数,菜单项将不会启用。 +::: + +:::info +请注意,在 macOS 上,标题为 `Edit` 的菜单栏级别 `NativeMenuItem` 默认会包含一些额外的 macOS 功能。 +::: + +## 示例3 + +此示例定义了一个可以附加到托盘图标的本机菜单: ```xml @@ -44,9 +150,9 @@ description: REFERENCE - Built-in Controls ## 更多信息 :::info -有关此控件的完整 API 文档,请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/NativeMenu/)。 +有关此控件的完整API文档,请参阅 [此处](http://reference.avaloniaui.net/api/Avalonia.Controls/NativeMenu/). ::: :::info 在 GitHub 上查看源代码 [NativeMenu.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/NativeMenu.cs) -::: \ No newline at end of file +::: diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/groupbox.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/groupbox.md new file mode 100644 index 000000000..ef5c93bed --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorials/groupbox.md @@ -0,0 +1,77 @@ +--- +id: groupbox +title: 使用 HeaderedContentControl 创建 GroupBox +sidebar_label: 创建 GroupBox +--- + +import groupboxscreenshot from '/img/tutorials/groupbox/groupbox.png'; + + +虽然 Avalonia 没有内置的 `GroupBox` 控件,但您可以使用带有自定义样式的 `HeaderedContentControl` 来实现相同的功能和外观。`HeaderedContentControl` 提供了一个标题区域和内容区域,非常适合用于对相关的界面元素进行分组。 + + + +## 实现 +将以下样式添加到您的应用程序资源(通常在 App.axaml 中)或需要 `GroupBox` 功能的特定 `Window` 或 `UserControl` 中: + +```xml title='XAML' + +``` + +样式设置好后,您就可以在 XAML 中使用 `HeaderedContentControl` 了: + +```xml title='XAML' + + + +