トレーニング
モジュール
モデル駆動型フォームでの特殊なコンポーネントの使用 - Training
ビジネス プロセス フローを作成する方法、キャンバス アプリを埋め込む方法、タイムラインを追加する方法、およびモデル駆動型フォームでレポートを作成する方法を学習します。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
フォームは、ユーザーからデータを収集して送信するコントロールのグループです。 通常、フォームは、ページの設定、調査、アカウントの作成、その他に使われます。
この記事では、フォーム用の XAML レイアウトを作成するためのデザイン ガイドラインについて説明します。
フォームは、明確に相互に関連性のあるデータ入力を収集するための専用ページです。 ユーザーから明示的にデータを収集する必要がある場合は、フォームを使用する必要があります。 ユーザー用のフォームは次の目的に作成する場合があります。
ユーザー入力を送信および表示する方法を考えた場合、フォームには 2 つの種類があります。
フォームで値を変更した結果をユーザーがすぐに確認できるようにする場合は、即時更新フォームを使います。 たとえば、設定ページでは、現在の選択が表示されていて、選択内容を変更するとすぐに適用されます。 アプリで変更を確認するには、各入力コントロールにイベント ハンドラーを追加する必要があります。 ユーザーが入力コントロールを変更した場合、アプリで適切に応答できます。
もう 1 つの種類のフォームでは、ユーザーがボタンをクリックすることで、データを送信するタイミングを選択できます。
この種類のフォームでは、ユーザーは柔軟に応答できます。 通常、この種類のフォームにはより自由な形式の入力フィールドが含まれているため、受け取る応答も多様です。 有効なユーザー入力と正しく書式設定されたデータの送信が確実に行われるようにするには、次の推奨事項を考慮してください。
ユーザー エクスペリエンスを使いやすくして、ユーザーが確実に正しく入力できるようにするには、フォームのレイアウトをデザインするときに次の推奨事項を考慮してください。
ラベルは左揃えにして、入力コントロールの上に配置する必要があります。 多くのコントロールには、ラベルを表示するための Header プロパティが組み込まれています。 Header プロパティがないコントロールの場合、またはコントロールのグループにラベルを付ける場合は、代わりに TextBlock を使います。
アクセシビリティ対応の設計にするには、個別のコントロールとコントロールのグループのすべてに、人間とスクリーン リーダーの両方のためにわかりやすいラベルを付けます。
フォント スタイルには既定の Windows 書体見本を使います。 ページのタイトルには TitleTextBlockStyle
を、グループの見出しには SubtitleTextBlockStyle
を、コントロールのラベルには BodyTextBlockStyle
を使います。
実行 | できません |
---|---|
コントロールのグループを視覚的に相互に分離するには、配置、余白、パディングを使います。 個々の入力コントロールの高さは 80 ピクセルであり、24 ピクセルの間を空ける必要があります。 入力コントロールのグループの間には、48 ピクセルのスペースを設ける必要があります。
列を作成すると、フォームの不要な空白を減らすことができます (特に大きい画面サイズの場合)。 ただし、複数列のフォームを作成する場合は、ページ上の入力コントロールの数と、アプリ ウィンドウの画面サイズに応じて、列の数を決める必要があります。 画面に多数の入力コントロールを詰め込むのではなく、複数ページのフォームの作成を検討します。
実行 | できません |
---|---|
画面やウィンドウのサイズが変化したらフォームのサイズを変更し、ユーザーが入力フィールドを見落とさないようにする必要があります。 詳しくは、「レスポンシブ デザインの手法」をご覧ください。 たとえば、画面がどのようなサイズであっても、フォームの特定の領域が常に表示されているようにします。
ユーザーは、キーボードを使ってタブ ストップでコントロール間を移動できます。 既定では、コントロールのタブ オーダーには、XAML でのコントロールの作成順序が反映されます。 既定の動作をオーバーライドするには、コントロールの IsTabStop または TabIndex プロパティを変更します。
入力コントロールは、ユーザーがフォームに情報を入力できる UI 要素です。 フォームに追加できる一般的なコントロールと、それらを使用する状況に関する情報と、以下に示します。
コントロール | 用途 | 例 |
---|---|---|
TextBox | 1 行または複数行のテキストをキャプチャします | 名前、自由形式の応答、フィードバック |
PasswordBox | 文字を非表示にすることで、プライベート データを収集します | パスワード、社会保障番号 (SSN)、暗証番号、クレジット カード情報 |
AutoSuggestBox | ユーザーが入力した対応するデータのセットから候補の一覧をユーザーに示します | データベース検索、メールの宛先行、前のクエリ |
RichEditBox | 書式設定されたテキスト、ハイパーリンク、およびイメージでテキスト ファイルを編集します | アップロード ファイル、プレビュー、アプリでの編集 |
コントロール | 用途 | 例 |
---|---|---|
CheckBox | 1 つまたは複数のアクション項目を選択または選択解除します | 使用条件への同意、省略可能な項目の追加、該当するものすべての選択 |
RadioButton | 2 つ以上の選択肢から 1 つのオプションを選択します | 種類の選択、出荷方法など |
ToggleSwitch | 相互排他の 2 つのオプションのいずれかを選択します | オン/オフ |
注: 5 つ以上の選択項目がある場合は、リスト コントロールを使用します。
コントロール | 用途 | 例 |
---|---|---|
ComboBox | コンパクトな状態で開始し、展開して選択可能な項目の一覧を表示します | 州や国などの長い項目一覧からの選択 |
ListView | 項目の分類とグループ ヘッダーの割り当て、項目のドラッグ アンド ドロップ、コンテンツの整理、項目の順序変更を行います | ランク オプション |
GridView | イメージ ベースのコレクションを配置および参照します | 写真、色、表示テーマの選択 |
コントロール | 使用 |
---|---|
CalendarView | 常に表示されるカレンダーから 1 つの日付または日付の範囲を選択します |
CalendarDatePicker | コンテキストに対応するカレンダーから 1 つの日付を選択します |
DatePicker | コンテキスト情報が重要ではないときに、ローカライズされた 1 つの日付を選択します |
TimePicker | 1 つの時刻の値を選択します |
UWP コントロールの完全な一覧については、機能別コントロールのインデックスに関する記事をご覧ください。
さらに複雑な UI コントロールおよびカスタム UI コントロールについては、Telerik、SyncFusion、DevExpress、Infragistics、ComponentOne、ActiPro などの企業から入手できるリソースをご覧ください。
この例では、Acrylic のリストと詳細リスト ビューおよび 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 コントロール、Acrylic 背景、CommandBar を使います。
<Grid>
<Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
<Pivot.TitleTemplate>
<DataTemplate>
<Grid>
<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 アプリのサンプルを参照してください。
Windows developer に関するフィードバック
Windows developer はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。
トレーニング
モジュール
モデル駆動型フォームでの特殊なコンポーネントの使用 - Training
ビジネス プロセス フローを作成する方法、キャンバス アプリを埋め込む方法、タイムラインを追加する方法、およびモデル駆動型フォームでレポートを作成する方法を学習します。