控制項的精簡尺寸

WinUI 3 的控制項設計上，間距優化為觸控互動。 對於主要使用滑鼠或鍵盤的桌面應用程式，你可以套用緊湊密度風格來減少控制鍵的高度與填充。 這讓更多內容在螢幕上可見，且使用者不必捲動。

緊湊大小適用於常見的互動式控制項，如 Button、 CheckBox、 ComboBoxTextBoxSlider及其他。

將精簡尺寸套用至頁面

將緊湊尺寸資源字典加入你的頁面或面板資源中：

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

Important

之後XamlControlsResources合併壓縮字典，使其正確覆蓋預設大小值。

在執行階段切換大小設定

你可以在執行時透過新增或移除面板資源中的資源字典來切換精簡大小：

// 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);

選擇密度

Scenario Recommendation
生產力或資料輸入應用程式（表格、表單、設定） 緊湊尺寸
消費者應用程式或專為觸控輸入設計的應用程式 預設尺寸
附有設定面板的混合式應用程式 僅對設定面板套用緊湊尺寸設定

WinUI 3 僅提供兩種密度等級：預設與緊湊。 沒有API可以設定任意的密度值。

開啟 WinUI 3 Gallery 應用程式，實際看看精簡尺寸配置的效果

WinUI 3 圖庫圖示 WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。 你可以從 Microsoft Store 下載應用程式，或瀏覽 GitHub 的原始碼。
  • Last updated on