コントロール用のコンパクトなサイズ設定

WinUI 3 コントロールは、タッチ操作用に最適化された間隔で設計されています。 ユーザーが主にマウスまたはキーボードを使用するデスクトップ アプリケーションでは、コンパクトな密度スタイルを適用して、コントロールの高さと埋め込みを減らすことができます。 これにより、ユーザーがスクロールしなくても、画面に表示されるコンテンツが増えます。

コンパクト サイズ設定は、 Button、 CheckBox、 ComboBox、 TextBox、 Sliderなどの一般的な対話型コントロールに適用されます。

ページにコンパクトなサイズ設定を適用する

ページまたはパネルのリソースにコンパクト サイズ設定リソース ディクショナリを追加します。

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

このオーバーライドは、ページ内のすべてのコントロールに適用されます。 ページのResourcesではなく、パネルのResourcesにリソース ディクショナリを配置することで、特定のパネルにスコープを設定できます。

アプリ全体にコンパクトなサイズ設定を適用する

アプリケーション内のすべてのページにコンパクトなサイズ設定を適用するには、リソース ディクショナリを App.xamlに追加します。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

実行時のスイッチのサイズ設定

パネルのリソースにリソース ディクショナリを追加または削除することで、実行時にコンパクトなサイズ設定を切り替えることができます。

// Apply compact sizing
var compactDict = new ResourceDictionary
{
    Source = new Uri("ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml")
};
MyPanel.Resources.MergedDictionaries.Add(compactDict);

// Remove compact sizing (restore default sizing)
MyPanel.Resources.MergedDictionaries.Remove(compactDict);

密度の選択

WinUI 3 では、既定とコンパクトの 2 つの密度レベルのみが提供されます。 任意の密度値を設定する API はありません。

WinUI 3 ギャラリーを開く

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

関連資料

• XAML テーマ リソース
• レイアウト パネル