フォームの作成とカスタマイズ

ユーザーが大量の情報を入力する必要があるアプリを作成する場合は、入力するフォームを作成する必要があります。この記事では、便利で堅牢なフォームを作成するために知っておくべきことを示します。

フォームに入 XAML コントロール 、ページ上で最適に配置する方法、および画面サイズを変更するためにフォームを最適化する方法について説明します。 ただし、フォームはビジュアル要素の相対的な位置に関するものです。まず、XAML を使用してページ レイアウトについて説明します。

何を知る必要がありますか?

UWP には、アプリに追加して構成できる明示的なフォーム コントロールがありません。 代わりに、ページ上に UI 要素のコレクションを配置してフォームを作成する必要があります。

そのためには、 レイアウト パネルを理解する必要があります。 これらは、アプリの UI 要素を保持するコンテナーであり、それらを配置してグループ化できます。 他のレイアウト パネル内にレイアウト パネルを配置すると、項目が相互に関連して表示される場所と方法を大きく制御できます。 これにより、画面サイズの変更に合わせてアプリを簡単に調整できます。

レイアウト パネル に関するこのドキュメントをお読みください。 フォームは通常、1 つ以上の垂直列に表示されるため、 StackPanel で類似の項目をグループ化し、必要に応じて RelativePanel 内で並べ替えます。 いくつかのパネルを今すぐまとめ始めます。参照が必要な場合は、2 列フォームの基本的なレイアウト フレームワークを次に示します。

<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 を すると、ユーザーは 2 つのオプションから選択できます。
• 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>

さまざまな画面サイズに対応する表示状態を作成することは現実的ではありません。また、アプリのユーザーエクスペリエンスに大きな影響を与えるのは、多くても数種類に限られるでしょう。 いくつかの重要なブレークポイントに合わせて設計することをお勧めします。詳細については、こちらをお読みください。

アクセシビリティサポートを追加する

画面サイズの変化に対応する適切に構築されたレイアウトが作成されたので、ユーザー エクスペリエンスを向上させるために最後にできることは、アプリをアクセス することです。 これには多くのことができますが、このような形式では、見た目よりも簡単です。 次の点に注目してください。

• キーボードのサポート - UI パネル内の要素の順序が画面上での表示方法と一致していることを確認して、ユーザーが簡単にタブ移動できるようにします。
• スクリーン リーダーのサポート - すべてのコントロールにわかりやすい名前が付けられていることを確認します。

より多くの視覚的要素を含むより複雑なレイアウトを作成する場合は、 アクセシビリティチェックリスト を参照して詳細を確認してください。 結局のところ、アクセシビリティはアプリには必要ありませんが、より多くのユーザーにリーチして関心を引き付けるのに役立ちます。

さらに進む

ここでフォームを作成しましたが、レイアウトとコントロールの概念は、構築するすべての XAML UI に適用できます。 リンク先のドキュメントに戻って、自分のフォームを試し、新しい UI 機能を追加し、ユーザー エクスペリエンスをさらに改良してください。 より詳細なレイアウト機能に関する詳細なガイダンスが必要な場合は、アダプティブ レイアウトのチュートリアルを参照してください。

フォームは孤立して存在する必要はありません。さらに一歩進んで、リスト/詳細パターン や NavigationViewの中に埋め込むこともできます。 フォームのコードビハインドに取り組みたい場合は、イベントの概要から始めることをお勧めします。

便利な API とドキュメント

データ バインディングの使用を開始するのに役立つ API とその他の便利なドキュメントの概要を次に示します。

便利な API

役に立つドキュメント

便利なコード サンプル