创建和自定义窗体

2025-06-10

如果要创建需要用户输入大量信息的应用，则可能需要创建表单供他们填写。本文将介绍你需要了解的内容，以便创建一个有用且可靠的窗体。

我们将讨论如何将 XAML 控件 放入窗体、如何最优地在页面上安排它们，以及如何优化窗体以响应不同的屏幕大小。但是，由于窗体与视觉元素的相对位置有关，让我们首先使用 XAML 讨论页面布局。

需要了解哪些信息？

UWP 没有可以添加到应用并配置的显式表单控件。相反，你需要通过在页面上排列 UI 元素的集合来创建窗体。

为此，你需要了解 布局面板。这些容器包含应用的 UI 元素，允许你排列和分组它们。在其他布局面板中放置布局面板可让你对项目的显示位置和方式有很大的控制，以便项目彼此之间的排列更为合理。这也使你的应用更容易适应不断变化的屏幕大小。

阅读这份关于布局面板的文档。由于窗体通常显示在一个或多个垂直列中，因此，如果需要，需要在 StackPanel中对类似项进行分组，并在 RelativePanel 中排列这些项。现在开始组合一些面板 - 如果需要参考，下面是两列窗体的基本布局框架：

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

表单中有哪些内容？

需要用各种 XAML 控件填充表单。你可能熟悉这些内容，但如果需要刷新，可以随意阅读。具体而言，你需要允许用户输入文本或从值列表中选择的控件。这是可以添加的选项的基本列表 - 你不需要阅读有关它们的所有内容，只是足以让你了解它们的外观及其工作原理。

TextBox 允许用户将文本输入到应用中。
ToggleSwitch 允许用户在两个选项之间进行选择。
DatePicker 允许用户选择日期值。
TimePicker 允许用户选择时间值。
ComboBox 展开以显示可选择项目的列表。您可以在这里了解更多关于它们的信息

你可能还需要添加按钮，以便用户可以保存或取消。

设置布局中的控件格式

你知道如何排列布局面板并具有要添加的项目，但应如何设置其格式？窗体页面具有一些特定的设计指南。阅读有关表单类型和布局的部分，以获取有用的建议。我们将很快讨论辅助功能和相对布局。

考虑到这一建议，你应该开始将所选控件添加到布局中，确保它们已获得标签并正确设置空间。例如，下面是遵循上述布局、控件和设计指南的单页表单的简要大纲：

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

您可以随意添加更多属性自定义控件，以提升视觉体验。

使您的布局具有响应式设计

用户可能会在具有不同屏幕宽度的各种设备上查看 UI。为了确保无论屏幕如何，他们都有良好的体验，应使用响应式设计。阅读该页，了解设计理念方面的良好建议，以便在继续作时记住这一点。

使用 XAML 页面的响应式布局提供了有关如何实现此内容的详细概述。目前，我们将重点介绍 XAML 中的 流畅布局 和 视觉状态。

我们组合在一起的基本窗体轮廓已经是一个 流动布局，因为它主要依赖控件的相对位置，仅在必要时使用最少的特定像素大小和位置。记住这一指导，以备你可能在将来创建的更多UI之用。

响应式布局更重要的是 视觉状态。 视觉状态定义在给定条件为 true 时应用于给定元素的属性值。了解如何在 xaml中进行此操作，然后将这些实现到你的窗体中。下面是一个非常的基本示例，在前面的示例中可能如下所示：

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

重要

使用 StateTriggers 时，始终确保 VisualStateGroups 附加到根元素的第一个子元素。在这里，Grid 是根 Page 元素的第一个子元素。

为各种屏幕大小创建视觉状态并不可行，再加上超过一两个的增加也不太可能对您的应用用户体验产生重大影响。我们建议改为为几个关键断点进行设计 - 你可以在此处阅读详细信息。

添加辅助功能支持

现在，你已经有了一个能够响应屏幕大小变化的布局，改善用户体验的最后一步是增强你应用的可访问性功能。有很多因素会影响这个，但在这种形式中，它比看起来的要简单得多。重点介绍以下内容：

确保键盘支持 - 确保 UI 面板中的元素顺序与在屏幕上的显示一致，以便用户可以轻松地通过键盘切换它们。
屏幕阅读器支持 - 确保所有控件都具有描述性名称。

当您创建具有更多视觉元素的复杂布局时，您需要查阅辅助功能清单，以获取更多详细信息。毕竟，虽然应用程序不需要具备可访问性，但具备可访问性可以帮助它接触并吸引更多的受众。

更进一步

虽然你在此处创建了一个窗体，但布局和控件的概念适用于你可能构造的所有 XAML UI。请随时返回我们已将你链接到的文档，并试用你拥有的表单，添加新的 UI 功能，并进一步优化用户体验。若要逐步了解更详细的布局功能，请参阅我们的自适应布局教程

表单也不必存在于真空中 - 可以进一步将表单嵌入列表/细节模式或 NavigationView 中。或者，如果要处理表单的后台代码，可以从我们的事件概述开始着手。

有用的 API 和文档

下面是 API 和其他有用文档的快速摘要，可帮助你开始使用数据绑定。

有用的 API

API（应用程序编程接口）	DESCRIPTION
适用于表单的控件	用于创建表单的有用输入控件列表，以及有关如何使用表单的基本指南。
网格	用于排列多行和多列布局中的元素的面板。
RelativePanel	用于将项目相对于其他元素和面板边界进行排列的面板。
堆叠面板（StackPanel）	用于将元素排列为单个水平线或垂直线的面板。
VisualState	允许在 UI 元素处于特定状态时设置 UI 元素的外观。

有用的文档

主题	DESCRIPTION
辅助功能概述	应用中辅助功能选项的全面概述。
无障碍性清单	确保应用符合辅助功能标准的实用清单。
事件概述	有关添加和组织事件以处理UI操作的详细信息。
表单	有关创建表单的总体指南。
布局面板	概述布局面板的类型以及使用位置。
列表/详细信息模式	可以围绕一个或多个表单实现的设计模式。
NavigationView	可以包含一个或多个窗体的控件。
响应式设计	大规模响应式设计原则概述。
使用 XAML 进行响应式布局	有关视觉状态和其他响应式设计实现的特定信息。
响应式设计的屏幕大小	关于应将响应式布局限定到哪些屏幕大小的指南。

有用的代码示例

代码示例	DESCRIPTION
客户订单数据库	亲眼见证多页企业示例中布局和表单的实际应用。
XAML 控件库	查看一系列 XAML 控件及其实现方式。
其他代码示例	在类别下拉列表中选择 “控件”、“布局”和“文本 ”以查看相关的代码示例。

通过