コントロールのサイズと密度Control size and density

コントロールのサイズと密度の組み合わせを使って、ユニバーサル Windows プラットフォーム (UWP) アプリケーションを最適化し、アプリの機能と対話の要件に最適なユーザー エクスペリエンスを提供します。Use a combination of control size and density to optimize your Universal Windows Platform (UWP) application and provide a user experience that is most appropriate for your app's functionality and interaction requirements.

既定では、UWP アプリは低密度 (または Standard) のレイアウトでレンダリングされます。By default, UWP apps are rendered with a low-density (or Standard) layout. ただし、WinUI 2.1 以降では、情報量の多い UI や同様の特殊なシナリオのための高密度 (またはCompact) レイアウト オプションもサポートされます。However, beginning with WinUI 2.1, a high-density (or Compact) layout option, for information rich UI and similar specialized scenarios, is also supported. これは、基本的なスタイル リソースで指定できます (次の例を参照)。This can be specified through a basic style resource (see examples below).

機能と動作は変わらず、サイズと密度の 2 つのオプション間で一貫性が保たれていますが、既定の本文フォント サイズは、これら 2 つの密度オプションをサポートするため、すべてのコントロールで 14 ピクセルに更新されました。While functionality and behavior has not changed and remains consistent across the two size and density options, the default body font size has been updated to 14px for all controls to support these two density options. このフォント サイズは領域やデバイスが異なっても機能し、アプリケーションのバランスが取れたユーザーに使いやすい状態を保ちます。This font size works across regions and devices and ensures your application remains balanced and comfortable for users.

Fluent Standard サイズFluent Standard sizing

"Fluent Standard サイズ" は、情報の密度とユーザーの快適さのバランスを取るために作成されました。Fluent Standard sizing was created to provide a balance between information density and user comfort. 実質的に、画面上のすべての項目が 40 x 40 の有効ピクセル (epx) ターゲットに揃えられ、UI 要素をグリッドに位置合わせし、システム レベルのスケーリングに基づいて適切にスケーリングできますEffectively, all items on the screen align to a 40x40 effective pixels (epx) target, which lets UI elements align to a grid and scale appropriately based on system level scaling.

Standard サイズは、タッチ入力とポインター入力の両方に対応するように設計されています。Standard sizing is designed to accommodate both touch and pointer input.

注意

有効ピクセルとスケーリングについて詳しくは、「UWP アプリ設計の概要」をご覧くださいFor more info on effective pixels and scaling, see Introduction to UWP app design

システム レベルのスケーリングについて詳しくは、「配置、余白、パディング」をご覧ください。For more info on system level scaling, see Alignment, margin, padding.

Windows 10 October 2018 Update (バージョン 1809) では、すべての UWP コントロールに対する標準の既定サイズが、すべての使用シナリオで使いやすさが向上するように、小さくされました。For the Windows 10 October 2018 Update (version 1809), the standard, default size for all UWP controls was decreased to increase usability across all usage scenarios.

次の図では、Windows 10 October 2018 Update で導入されたコントロールのレイアウト変更の一部を示します。The following image shows some of the control layout changes that were introduced with the Windows 10 October 2018 Update. 具体的には、ヘッダーとコントロール上端の間の余白が 8 epx から 4 epx に減らされ、44epx のグリッドが 40 epx のグリッドに変更されました。Specifically, the margin between a header and the top of a control was decreased from 8epx to 4epx, and the 44epx grid was changed to a 40epx grid.

Standard コントロール レイアウトの例

Standard コントロール レイアウトの例Standard control layout example

次の図では、Windows 10 October 2018 Update でコントロールのサイズに対して行われた変更を示します。This next image shows the changes made to control sizes for the Windows 10 October 2018 Update. 具体的には、40 epx グリッドへの配置です。Specifically, alignment to the 40epx grid.

Standard のコマンドの例

Fluent Compact サイズFluent Compact sizing

Compact サイズは、高密度で情報量の多いコントロールのグループに対応しており、次のような場合に役立ちます。Compact sizing enables dense, information-rich groups of controls and can help with the following:

  • 大量のコンテンツの閲覧。Browsing large amounts of content.
  • 1 ページに表示できるコンテンツの最大化。Maximizing visible content on a page.
  • コントロールとコンテンツの移動および操作。Navigating and interacting with controls and content

Compact サイズは、主にポインター入力に対応するために設計されています。Compact sizing is designed primarily to accommodate pointer input.

Examples

Compact サイズは、アプリケーションにおいてページ レベルまたは特定のレイアウトで指定できる特殊なリソース ディクショナリによって実装されます。Compact sizing is implemented through a special resource dictionary that can be specified in your application at either the page level or on a specific layout. リソース ディクショナリは、WinUI Nuget パッケージで使用できます。The resource dictionary is available in the WinUI Nuget package.

次の例では、Compact スタイルをページおよび個々のグリッド コントロールに対して適用できる方法を示します。The following examples show how the the Compact style can be applied for the page and an individual Grid control.

ページ レベルPage level

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

グリッド レベルGrid level

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>