控件的紧凑尺寸

WinUI 3 控件采用了针对触摸交互优化的间距设计。 对于用户主要使用鼠标或键盘的桌面应用程序，可以应用紧凑密度样式以减少控件的高度和填充。 这样，屏幕上会显示更多内容，而无需用户滚动。

压缩大小适用于常见的交互式控件，例如Button、CheckBox、ComboBoxTextBox、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>

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