表單 - Windows apps | Microsoft Learn

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

2. 透過按鈕提交

另一種表單允許使用者點擊按鈕選擇何時提交資料。

這種表單讓使用者在回應時更具彈性。通常，這類形式包含更多自由形式的輸入欄位，因此能接收更多樣的回應。為確保用戶輸入有效且提交時資料格式正確，請考慮以下建議：

使用正確的控制項（例如，對於日曆日期，使用日曆日期選擇器而非文字框），以確保無法提交無效資訊。請參考後面的「輸入控制」章節，了解如何在表單中選擇合適的輸入控制。

使用 TextBox 控制項時，請透過 PlaceholderText 屬性提供使用者所需的輸入格式提示。

透過 InputScope 屬性，指定控制項的預期輸入，提供使用者適當的螢幕鍵盤。

在標籤上標示「必要輸入」並標註星號*。

在填寫所有必要資訊前，請關閉提交按鈕。

若提交時資料無效，請以高亮欄位或邊框標示無效輸入的控制項，並要求使用者重新提交表單。

對於其他錯誤，例如網路連線失敗，請確保向使用者顯示適當的錯誤訊息。

為了促進使用者體驗並確保使用者能輸入正確的輸入，請參考以下設計表單版面的建議。

Labels

標籤應左對齊並置於輸入控制鍵上方。許多控制項內建標頭屬性來顯示標籤。對於沒有標頭屬性的控制項，或是要標記控制項群組，你可以用 TextBlock 來取代。

為了設計無障礙，請標示所有個體及控制組，以便對人類與螢幕閱讀者都更清楚。

字型風格方面，請使用預設的 Windows 字型梯級系統。用於 TitleTextBlockStyle 頁面標題、 SubtitleTextBlockStyle 群組標題及 BodyTextBlockStyle 控制標籤。

Columns

建立欄位可以減少表單中不必要的留白，尤其是螢幕尺寸較大時。不過，如果你想建立多欄表單，欄位數量應依頁面上的輸入控制項數量及應用程式視窗的螢幕大小而定。與其讓螢幕被眾多輸入控制鍵淹沒，不如考慮為表單建立多個頁面。

其他控制項

欲了解完整的 UWP 控制清單，請參閱按功能分類的控制索引。

若想獲得更複雜且客製化的使用者介面控制，可以參考 Telerik 、 SyncFusion 、 DevExpress 、 Infragistics 、 ComponentOne 和 ActiPro 等公司的資源。

單欄形式範例

此範例使用壓克力清單/詳細清單檢視及 NavigationView 控制。

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>
雙欄形式範例
此範例除了輸入控制之外，還使用了 Pivot 控制、壓克力 背景和 CommandBar。
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <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>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>
客戶訂單資料庫範例
               想了解如何將表單輸入連接到 Azure 資料庫並查看完整實作的表單，請參閱 Customers Orders Database 應用程式範例。