共用方式為

控制項大小和密度

  • 發行項

使用控制項大小和密度的組合對您的 Windows 應用程式進行最佳化，並提供最適合您應用程式功能及互動需求的使用者體驗。

根據預設，XAML 應用程式會以低密度 （或 Standard） 配置來轉譯。 不過，從 WinUI 2.1 開始，也支援高密度 (或 Compact) 版面配置選項 (適用於資訊豐富的 UI 和類似的特殊情況)。 這可透過基本樣式資源指定 (請參閱以下範例)。

雖然功能和行為尚未變更，並且在兩個大小和密度選項之間保持一致，但所有控制項的預設主體字型大小已更新為 14px，以支援這兩個密度選項。 這個字型大小適用於各個區域和裝置，確保您的應用程式保持平衡且方便使用者使用。

範例

開啟 WinUI 3 資源庫應用程式，並查看精簡大小調整運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

Fluent 標準大小調整

「Fluent 標準大小調整」旨在提供資訊密度和使用者舒適度之間平衡。 實際上，畫面上所有的項目都會對齊 40x40 有效像素 (epx) 目標，其可讓 UI 元素貼齊格線並根據系統層級縮放適度調整。

大小調整的設計訴求是要適應觸控和指標輸入。

注意

如需有效像素與縮放規模的詳細資訊，請參閱螢幕大小和中斷點

如需系統層級縮放的詳細資訊，請參閱對齊、邊界、邊框距離。

Fluent 精簡大小調整

精簡大小調整讓密集、資訊豐富的控制項群組對下列作業有所幫助：

  • 瀏覽大量內容。
  • 將頁面上可見的內容最大化。
  • 瀏覽控制項和內容並與其互動

大小調整的主要設計訴求是要適應指標輸入。

精簡大小調整的範例

精簡大小調整是透過特殊資源字典實作，您可以在應用程式中的頁面層級或特定版面配置上指定該字典。 在 WinUI Nuget 套件中可取得資源字典。

下列範例顯示頁面和個別格線控制項如何才能套用 Compact 樣式。

頁面層級

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

格線層級

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

Windows 10 中的重設大小

針對 Windows 10 2018 年 10 月更新 （1809 版），所有 Windows XAML 控件的標準預設大小會減少，以在所有使用案例中增加可用性。

下圖顯示 Windows 10 2018 年 10 月更新所引進的一些控制項版面配置變更。 具體而言，控制項的標頭與頂端之間的邊界從 8epx 縮小為 4epx，且 44epx 格線已變更為 40epx 格線。

控制項版面配置範例

下圖顯示對 Windows 10 2018 年 10 月更新的控制項大小所做的變更。 具體來說，對齊 40epx 格線。

標準命令範例