共用方式為

建立和自訂表單

如果您要建立需要使用者輸入大量資訊的應用程式，您可能想要建立表單，讓他們填寫。本文將說明您需要知道的事項，才能建立有用且健全的窗體。

我們將討論 XAML 控件 進入表單的內容、如何最好地在頁面上排列控件，以及如何優化表單以變更螢幕大小。 但是，因為表單涉及視覺元素的相對位置，因此讓我們首先討論使用 XAML 的頁面佈局。

您需要知道什麼？

UWP 沒有您可以新增至應用程式並設定的明確表單控制件。 相反地，您必須藉由排列頁面上的 UI 元素集合來建立表單。

若要這樣做，您必須瞭解 版面配置面板。 這些是保存您 app 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)。

回應式版面配置更重要的是 視覺狀態。 視覺狀態會定義屬性值，這些屬性值會在指定的條件成立時套用至指定的元素。 閱讀如何在 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（應用程式介面） 說明
適用於表單的控制件 用來建立表單的實用輸入控件清單，以及其使用位置的基本指引。
方格 在多列和多欄配置中排列元素的面板。
RelativePanel 用來排列專案相對於其他元素和面板界限的面板。
StackPanel 將元素排列成單一水平或垂直方向的面板。
VisualState 可讓您在 UI 元素處於特定狀態時設定其外觀。

有用的檔

主題 說明
無障礙概覽 應用程式中輔助功能選項的廣泛概觀。
輔助功能檢查清單 確保您的應用程式符合輔助功能標準的實用檢查清單。
事件概觀 新增和建構事件以處理UI動作的詳細數據。
表單 建立表單的整體指引。
版面配置面板 提供關於版面配置面板類型及其適用場合的概觀。
清單/詳細數據模式 可以圍繞一個或多個形式實作的設計模式。
NavigationView （導航檢視） 可包含一或多個表單的控制件。
回應式設計 大規模回應式設計原則的概觀。
使用 XAML 的回應式版面配置 關於視覺狀態和其他回應式設計實作的特定資訊。
螢幕大小 回應式設計 響應式佈局應針對哪些螢幕尺寸進行範疇設定的指導方針。

實用的程式代碼範例

程式代碼範例 說明
客戶訂單資料庫 請查看在多頁面的企業範例中，版面配置和表單的運作情形。
XAML 控件庫 查看 XAML 控制項的選擇，以及它們的實作方法。
其他程式代碼範例 選擇 [類別] 下拉式清單中的 [控件]、[版面配置] 和 [文字]， 以查看相關的程式代碼範例。
  • Last updated on