WinUI 3 Gallery 技术文档

WinUI 3 Gallery 技术文档

【免费下载链接】WinUI-Gallery This app demonstrates the controls available in WinUI and the Fluent Design System. 项目地址: https://gitcode.com/gh_mirrors/wi/WinUI-Gallery

1. 安装指南

1.1 环境准备

在开始安装之前，请确保您的开发环境满足以下要求：

• 操作系统: Windows 10 或更高版本。
• 开发工具: Visual Studio 2022 或更高版本。
• 必备组件:
  • .NET Desktop Development
  • Windows App SDK C# Templates
  • Windows 10 SDK (10.0.19041.0)

如果您是第一次使用 Windows App SDK 开发应用，请按照官方安装指南进行环境配置。

1.2 克隆项目仓库

使用以下命令克隆 WinUI 3 Gallery 项目仓库到本地：

git clone https://github.com/microsoft/WinUI-Gallery.git

1.3 打开并构建项目

1. 打开 Visual Studio 并导航到克隆的项目目录。
2. 打开 WinUIGallery\WinUIGallery.DesktopWap.sln 解决方案文件。
3. 在解决方案资源管理器中，右键点击 WinUIGallery.DesktopWap.Package 项目，并选择“设为启动项目”。
4. 点击“生成”菜单中的“生成解决方案”以构建项目。

2. 项目的使用说明

2.1 主要功能

WinUI 3 Gallery 是一个展示 WinUI 3 控件和样式的示例应用，主要功能包括：

• WinUI 控件示例: 每个控件页面展示了创建示例所需的标记和代码。
• 使用 Microsoft.UI.Xaml 库: 应用包含最新的 WinUI NuGet 包，并展示了如何使用 NavigationView、SwipeControl 等控件。
• 基本布局: 展示了应用中所有可能的布局选项，并允许用户与面板交互，以展示如何实现所需的布局。
• 自适应 UI: 展示了每个控件在不同设备上的响应方式，应用本身也是响应式的，展示了实现自适应 UI 的各种方法。
• 设计与可访问性指南: 设计和可访问性页面帮助开发者更好地使用该应用。
• 版本自适应代码: 展示了如何编写版本自适应代码，使应用能够在旧版本的 Windows 上运行，同时在新版本上使用最新功能。

2.2 使用方法

1. 启动应用: 在 Visual Studio 中，按 F5 键启动应用。
2. 浏览控件: 应用启动后，您可以浏览各个控件页面，查看示例代码和标记。
3. 交互体验: 通过与控件交互，了解其在不同布局和设备上的表现。

3. 项目API使用文档

3.1 WinUI 控件 API

WinUI 3 Gallery 展示了多种 WinUI 控件的使用方法，以下是一些常用控件的 API 说明：

• NavigationView: 用于创建应用的导航菜单。
  • IsPaneOpen: 控制导航窗格的打开状态。
  • MenuItems: 导航菜单项的集合。
• SwipeControl: 用于实现滑动操作。
  • LeftItems: 左侧滑动操作的集合。
  • RightItems: 右侧滑动操作的集合。
• CommandBar: 用于创建命令栏。
  • PrimaryCommands: 主要命令的集合。
  • SecondaryCommands: 次要命令的集合。

3.2 自适应布局 API

WinUI 3 Gallery 展示了如何使用自适应布局 API 来实现不同设备上的 UI 适配：

• VisualStateManager: 用于管理视觉状态。
  • GoToState: 切换到指定的视觉状态。
• AdaptiveTrigger: 用于根据窗口大小调整布局。
  • MinWindowWidth: 最小窗口宽度触发器。
  • MinWindowHeight: 最小窗口高度触发器。

4. 项目安装方式

WinUI 3 Gallery 可以通过以下方式安装：

1. 从 Microsoft Store 安装: 访问 Microsoft Store 下载并安装应用。
2. 本地构建安装: 按照上述安装指南，在本地构建并运行应用。

通过以上步骤，您可以顺利安装并使用 WinUI 3 Gallery 应用，深入了解 WinUI 3 控件和样式的使用方法。

【免费下载链接】WinUI-Gallery This app demonstrates the controls available in WinUI and the Fluent Design System. 项目地址: https://gitcode.com/gh_mirrors/wi/WinUI-Gallery