> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 自定义触控控件预览

> 自定义触控控件预览

本文提供了使用 TAK 编辑器自定义触控适配布局预览的各种可用选项概述。预览可以自定义为模拟不同的游戏场景，并测试触控控件在不同情境下的外观。这可以通过为预览指定背景颜色或图像来完成。

## 背景

可以通过两种方式使用颜色或图像自定义背景：通过预览设置，或在命令面板中执行命令。

### 通过预览设置

1. 在编辑器中打开适配包的布局文件以启动预览。
2. 单击预览面板右上角的 "Open Settings"：

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-button.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=76434d8ea25185eb1c00727b8be29a8b" alt="布局预览中的 Open Settings 按钮屏幕截图" width="519" height="275" data-path="images/gdk/features/common/tak-editor-preview-settings-button.png" />
3. 会出现一个模态框，其中包含自定义背景的选项。可以指定颜色或图像：
   1. **颜色：** 单击颜色选择器选择颜色。或者，可以在输入字段中输入颜色。颜色可以以 CSS 支持的任何格式指定（例如 `#0000ffff`、`rgba(0, 0, 255, 1)`、`hsl(240, 100%, 50%)` 或 `blue`）。

      <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-color.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=816f42e6a66afdf5702d12b1a439b6df" alt="预览设置模态框中演示颜色选择器的屏幕截图" width="647" height="555" data-path="images/gdk/features/common/tak-editor-preview-settings-color.png" />
   2. **图像：** 单击 "Choose an image" 打开文件选择器。导航到图像的位置并选择它。或者，可以在输入字段中输入图像的 URL。

      <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-settings-image.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=a45cefa495628cb18cd14e9f181120c6" alt="预览设置模态框中选择的图像屏幕截图" width="842" height="602" data-path="images/gdk/features/common/tak-editor-preview-settings-image.png" />

### 通过命令面板

1. 在编辑器中打开适配包的布局文件以启动预览。**仅当预览打开时此命令才可用。**
2. 启动命令面板（Windows 上为 `Ctrl+Shift+P`，macOS 上为 `Cmd+Shift+P`）。
3. 搜索 "Background" 并选择 "Touch Adaptation Kit: Set preview background"：

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-set-preview-background-command.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=7ec8253efa3ff9381ab19c969b72f268" alt="从命令面板中选择 Set preview background 命令的屏幕截图" width="607" height="75" data-path="images/gdk/features/common/tak-editor-set-preview-background-command.png" />
4. 选择可用选项之一：

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-set-preview-background-options.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=cc839e056a1cfb08b27cce54555e738f" alt="设置预览背景的可用选项屏幕截图" width="605" height="167" data-path="images/gdk/features/common/tak-editor-set-preview-background-options.png" />

   1. `Default`：将背景重置为默认透明棋盘图案。
   2. `Color`：为背景指定颜色。必须以 CSS 颜色值格式作为文本输入。
   3. `Image`：为背景指定图像。将打开文件选择器以选择图像。
   4. `URL`：使用 URL 为背景指定图像。将出现一个文本输入以输入 URL。

## 下一步

> \[!div class="nextstepaction"]
> [打包适配包以提交给 XBOX](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-pack-bundles)


## Related topics

- [触控入门](/zh-CN/build/core-features/common/game-streaming/game-streaming-getting-started-with-touch.md)
- [为 XBOX 游戏串流构建触控布局](/zh-CN/build/core-features/common/game-streaming/building-touch-layouts/index.md)
- [模板](/zh-CN/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-templates.md)
- [Touch Adaptation Kit](/zh-CN/reference/system/touchadaptationkit/touchadaptationkit-reference.md)
- [构建触控的设计师指南](/zh-CN/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)