Kompaktowanie rozmiaru kontrolek

Kontrolki WinUI 3 są zaprojektowane z odstępami zoptymalizowanymi pod kątem interakcji z dotykiem. W przypadku aplikacji komputerowych, w których użytkownicy korzystają głównie z myszy lub klawiatury, można zastosować styl o kompaktowej gęstości, aby zmniejszyć wysokość i wewnętrzne odstępy kontrolek. Dzięki temu na ekranie widocznych jest więcej treści bez konieczności przewijania.

Kompaktowy rozmiar dotyczy typowych interaktywnych kontrolek, takich jak Button, CheckBox, ComboBox, TextBox, Slider i innych.

Stosowanie kompaktowego rozmiaru do strony

Dodaj słownik zasobów kompaktowych rozmiarów do zasobów strony lub panelu:

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

To zastąpienie dotyczy wszystkich kontrolek na stronie. Zakres można ograniczyć do określonego panelu, umieszczając słownik zasobów w panelu Resources zamiast strony Resources.

Zastosuj kompaktowy rozmiar w całej aplikacji

Aby zastosować kompaktowanie rozmiaru do wszystkich stron w aplikacji, dodaj słownik zasobów do :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>

Ważna

Połącz kompaktowy słownik poXamlControlsResources, aby poprawnie nadpisał domyślne wartości rozmiaru.

Zmiana rozmiaru w czasie działania

Można przełączać kompaktowanie rozmiaru w czasie wykonywania, dodając lub usuwając słownik zasobów z zasobów panelu:

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

Wybieranie gęstości

Scenario Rekomendacja
Aplikacje zwiększające produktywność lub wprowadzanie danych (tabele, formularze, ustawienia) Kompaktowanie rozmiaru
Aplikacje lub aplikacje dla konsumentów przeznaczone do wprowadzania danych dotykowych Domyślny rozmiar
Mieszane aplikacje z panelem ustawień Zastosuj rozmiar kompaktowy tylko do panelu ustawień

Interfejs WinUI 3 zapewnia tylko dwa poziomy gęstości: domyślny i kompaktowy. Nie ma interfejsu API do ustawiania dowolnej wartości gęstości.

Otwórz aplikację WinUI 3 Gallery i zobacz, jak działa kompaktowy rozmiar

Ikona galerii WinUI 3 Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy w GitHub.
  • Last updated on