フォームを作成してカスタマイズするCreate and customize a form

ユーザーが大量の情報を入力する必要のあるアプリを作成している場合は、ユーザーが入力するフォームが必要になる可能性があります。この記事では、利便性と信頼性の高いフォームを作成するために知っておく必要のあることについて説明します。If you're creating an app that requires users to input a significant amount of information, chances are you'll want to create a form for them to fill out. This article will show you what you need to know in order to create a form that is useful and robust.

これはチュートリアルではありません。This is not a tutorial. チュートリアルが必要な場合は、「アダプティブ レイアウトのチュートリアル」を参照してください。このチュートリアルでは、手順を説明したガイド付きのエクスペリエンスが提供されます。If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

フォームに含める XAML コントロール、ページ上で XAML コントロールを最適に配置する方法、画面のサイズを変更するためにフォームを最適化する方法について説明します。We'll discuss what XAML controls go into a form, how to best arrange them on your page, and how to optimize your form for changing screen sizes. ただし、フォームは visual 要素の相対位置に関することなので、まず XAML を使ったページ レイアウトについて詳しく説明します。But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

理解しておく必要があることWhat do you need to know?

UWP には、アプリに追加して構成することができる明示的なフォーム コントロールはありません。UWP does not have an explicit form control that you can add to your app and configure. 代わりに、ページ上に UI 要素のコレクションを配置することによって、フォームを作成する必要があります。Instead, you'll need to create a form by arranging a collection of UI elements on a page.

そのためには、レイアウト パネルを理解する必要があります。To do so, you'll need to understand layout panels. レイアウト パネルは、アプリの UI 要素を保持するコンテナーで、アプリの UI 要素を配置およびグループ化することができます。These are containers that hold your app's UI elements, allowing you to arrange and group them. レイアウト パネルを他のレイアウト パネル内に配置すると、相互の関連で項目の表示場所や表示方法を自由に制御できます。Placing layout panels within other layout panels gives you a great deal of control over where and how your items display in relation to one another. また、これにより画面サイズ変更にアプリを対応させることがはるかに簡単になります。This also makes it far easier to adapt your app to changing screen sizes.

レイアウト パネルに関するこちらのドキュメントをお読みください。Read this documentation on layout panels. フォームは通常 1 つ以上の垂直列に表示されるため、類似した項目を StackPanel にまとめ、必要であれば RelativePanel 内に配置します。Because forms are usually displayed in one or more vertical columns, you'll want to group similar items in a StackPanel, and arrange those within a RelativePanel if you need to. それでは、一部のパネルの編成を開始してください。リファレンスが必要な場合は、2 列のフォームの基本的なレイアウト フレームワークが以下に用意されています。Start putting together some panels now — if you need a reference, below is a basic layout framework for a two-column form:

<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>

フォームに含めるものWhat goes in a form?

各種の XAML コントロール を使用してフォームに入力する必要があります。You'll need to fill your form with an assortment of XAML Controls. XAML コントロールは使い慣れているかもしれませんが、思い出す必要がある場合は、自由に目を通してください。You're probably familiar with those, but feel free to read up if you need a refresher. 特に、ユーザーがテキストを入力するか、または値の一覧から選択できるようにするコントロールが必要になります。In particular, you'll want controls that allow your user to input text or choose from a list of values. これは追加することができる基本的なオプションの一覧です。それらについてすべて読む必要はありません。それらの外観やしくみを理解するために十分な情報が記載されています。This is a basic list of options you could add – you don't need to read everything about them, just enough so you understand what they look like and how they work.

  • TextBox では、ユーザーがアプリにテキストを入力できます。TextBox lets a user input text into your app.
  • ToggleSwitch では、ユーザーが 2 つのオプションから選択できます。ToggleSwitch lets a user choose between two options.
  • DatePicker では、ユーザーが日付値を選択できます。DatePicker lets a user select a date value.
  • TimePicker では、ユーザーが時刻値を選択できます。TimePicker lets a user select a time value.
  • ComboBox は、選択可能な項目の一覧を表示するために展開します。ComboBox expand to display a list of selectable items. これらの詳細については、こちらを参照してください。You can learn more about them here

また、ユーザーが保存やキャンセルを行うことができるように、ボタンを追加することができます。You also might want to add buttons, so the user can save or cancel.

レイアウトでのコントロールの書式設定Format controls in your layout

レイアウト パネルを配置する方法を理解し、追加したい項目がありますが、どのように書式設定すればいいでしょうか。You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? フォーム ページにはいくつかの詳しい設計ガイダンスが記載されています。The forms page has some specific design guidance. フォームの種類レイアウトに関するセクションに目を通して役立つアドバイスを確認してください。Read through the sections on Types of forms and layout for useful advice. アクセシビリティと相対レイアウトについては簡単に説明します。We'll discuss accessibility and relative layout more shortly.

そのアドバイスに留意し、選択したコントロールをレイアウトに追加し始め、ラベルと行間が正しく指定されていることを確認します。With that advice in mind, you should start adding your controls of choice into your layout, being sure they're given labels and spaced properly. 例として、上記のレイアウト、コントロール、設計ガイダンスを使用した単一ページ フォームの必要最小限の概要を次に示します。As an example, here's the bare-bones outline for a single-page form using the above layout, controls, and design guidance:

<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>

視覚エクスペリエンスを向上させるために、さらにプロパティを使って自由にコントロールをカスタマイズしてください。Feel free to customize your controls with more properties for a better visual experience.

レイアウトの応答性を向上させるMake your layout responsive

ユーザーは、さまざまな画面幅の多様なデバイスで UI を表示する可能性があります。Users might view your UI on a variety of devices with different screen widths. 画面に関係なく優れたエクスペリエンスを確実に提供するには、レスポンシブ デザインを使用する必要があります。To ensure that they have a good experience regardless of their screen, you should use responsive design. そのページに目を通し、作業を進めるうえで留意する設計哲学に関する優れたアドバイスを確認してください。Read through that page for good advice on the design philosophies to keep in mind as you proceed.

XAML でのレスポンシブ レイアウトのページでは、この実装方法に関する詳細な概要について説明しています。The Responsive layouts with XAML page gives a detailed overview of how to implement this. ここでは、柔軟なレイアウトXAML での表示状態を中心に説明します。For now, we'll focus on fluid layouts and visual states in XAML.

用意されている基本的なフォームのアウトラインは、特定のピクセル サイズと位置を最小限にしか使用しないコントロールの相対位置にほぼ依存しているため、既に柔軟なレイアウトになっています。The basic form outline that we've put together is already a fluid layout, as it's depending mostly on the relative position of controls with only minimal use of specific pixel sizes and positions. ただし、今後作成する可能性がある追加の UI についてはこのガイダンスに留意してください。Keep this guidance in mind for more UIs you might create in the future, though.

レスポンシブ レイアウトでさらに重要なのは表示状態です。More important to responsive layouts are visual states. 表示状態は、特定の条件が該当する場合に指定された要素に適用されるプロパティ値を定義します。A visual state defines property values that are applied to a given element when a given condition is true. xaml でこれを行う方法について目を通し、フォームに実装してください。Read up on how to do this in xaml, and then implement them into your form. 前のサンプルでの非常に基本的な例の外観を次に示します。Here's what a very basic one might look like in our previous sample:

<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 が添付されていることを必ず確認してください。When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. ここでは、Grid がルートの Page 要素の最初の子です。Here, Grid is the first child of the root Page element.

幅広い画面サイズに対応する表示状態を作成するのは実用的ではなく、アプリのユーザー エクスペリエンスに大きな影響を及ぼす可能性もそれほど高くはありません。It's not practical to create visual states for a wide array of screen sizes, nor are more than a couple likely to have significant impact on the user experience of your app. その代わり、いくつかの主要なブレークポイントを設計することをお勧めします。こちらを参照してください。We recommend designing instead for a few key breakpoints - you can read more here.

アクセシビリティのサポートの追加Add accessibility support

これで、画面サイズの変更に対応する、適切に構築されたレイアウトが用意できたので、最後にユーザー エクスペリエンスを向上させるために、アプリをアクセシビリティ対応にすることができます。Now that you have a well-constructed layout that responds to changes in screen sizes, a last thing you can do to improve the user experience is to make your app accessible. 詳しく説明できることはたくさんありますが、このようなフォームでは見た目よりも簡単です。There's a lot that can go into this, but in a form like this one it's easier than it looks. 次の点を中心に説明します。Focus on the following:

  • キーボードのサポート - ユーザーが簡単にタブ移動できるように、UI パネルの要素の順序が、画面上に表示される方法と一致するようにします。Keyboard support - ensure the order of elements in your UI panels match how they're displayed on screen, so a user can easily tab through them.
  • スクリーン リーダーのサポート - すべてのコントロールにわかりやすい名前があることを確認します。Screen reader support - ensure all your controls have a descriptive name.

より多くの視覚要素を含む複雑なレイアウトを作成する場合は、詳細について、「アクセシビリティのチェック リスト」を参照する必要があります。When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. 結局のところ、アクセシビリティがアプリに必要なくても、アクセシビリティによってより多くの人にリーチして感心を高めることができます。After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

追加情報Going further

ここではフォームを作成しましたが、レイアウトとコントロールの概念は、作成する可能性のあるすべての XAML UI で適用可能です。Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. リンクしたドキュメントに自由に戻って自分のフォームを試し、新しい UI 機能を追加して、さらにユーザー エクスペリエンスを改良してください。Feel free to go back through the docs we've linked you to and experiment with the form you have, adding new UI features and further refining the user experience. より詳細なレイアウト機能の手順を説明したガイダンスが必要な場合は、「アダプティブ レイアウトのチュートリアル」を参照してくださいIf you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

また、フォームは真空に存在する必要はありません。一歩進んで、自分のフォームをマスター/詳細パターンまたはピボット コントロールに組み込むことができます。Forms also don't have to exist in a vacuum - you could go one step forward and embed yours within a master/details pattern or a pivot control. または、自分のフォームで分離コードを使用する場合は、イベントの概要を参照して作業を開始することをお勧めします。Or if you want to get to work on the code-behind for your form, you might want to get started with our events overview.

便利な API とドキュメントUseful APIs and docs

データ バインディングを操作するうえで役立つ API の簡単な概要とその他の役立つドキュメントを次に示します。Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

便利な APIUseful APIs

APIAPI 説明Description
フォームに役立つコントロールControls useful for forms フォームを作成するために役立つ入力コントロールの一覧と、それを使用する場所に関する基本的なガイダンスです。A list of useful input controls for creating forms, and basic guidance of where to use them.
GridGrid 複数行および段組レイアウトで要素を配置するためのパネルです。A panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel その他の要素とパネルの境界を基準にして項目を配置するためのパネルです。A panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel 単一の水平線または垂直線に要素を配置するためのパネルです。A panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState UI 要素が特定の状態にあるときに要素の外観を設定できます。Allows you to set the appearance of UI elements when they're in particular states.

役立つドキュメントUseful docs

トピックTopic 説明Description
アクセシビリティの概要Accessibility overview アプリでのアクセシビリティ オプションの広範囲にわたる概要です。A broad-scale overview of accessibility options in apps.
アクセシビリティのチェック リストAccessibility checklist アプリがアクセシビリティの基準を満たしていることを確認するための実用的なチェックリストです。A practical checklist to ensure your app meets accessibility standards.
イベントの概要Events overview UI 操作を処理するイベントの追加と構築に関する詳細です。Details on adding and structuring events to handle UI actions.
フォームForms フォームを作成するための全体的なガイダンスです。Overall guidance for creating forms.
レイアウト パネルLayout panels レイアウト パネルの種類とそれらを使用する場所に関する概要を示します。Provides an overview of the types of layout panels and where to use them.
マスター/詳細パターンMaster/details pattern 1 つまたは複数のフォームの周囲に実装できる設計パターンです。A design pattern that can be implemented around one or multiple forms.
ピボット コントロールPivot control 1 つまたは複数のフォームを含めることができるコントロールです。A control that can contain one or multiple forms.
レスポンシブ デザインResponsive design 大規模なレスポンシブ デザインの原則の概要です。An overview of large-scale responsive design principles.
XAML でのレスポンシブ レイアウトResponsive layouts with XAML レスポンシブ デザインの表示状態とその他の実装に関する具体的な情報です。Specific information on visual states and other implementations of responsive design.
レスポンシブ デザインの画面サイズScreen sizes for responsive design レスポンシブ レイアウトの対象とする画面サイズに関するガイダンスです。Guidance on which screen sizes to which responsive layouts should be scoped.

役立つコード サンプルUseful code samples

コード サンプルCode sample 説明Description
アダプティブ レイアウトのチュートリアルAdaptive layout tutorial アダプティブ レイアウトやレスポンシブ デザインの手順を説明したガイド付きエクスペリエンスです。A step-by-step guided experience through adaptive layouts and responsive design.
顧客注文データベースCustomer Orders Database マルチページのエンタープライズのサンプルで、レイアウトとフォームの動作を確認してください。See layout and forms in action on a multi-page enterprise sample.
XAML コントロール ギャラリーXAML Controls Gallery 一部の XAML コントロール、およびそれらの実装方法を参照してください。See a selection of XAML controls, and how they're implemented.
その他のコード サンプルAdditional code samples [カテゴリ] ドロップダウン リストで [コントロール、レイアウト、テキスト] を選択し、関連するコード サンプルを参照してください。Choose Controls, layout, and text in the category drop-down list to see related code samples.