Materiały w aplikacjach systemu Windows

Materiały to efekty wizualne stosowane do powierzchni interfejsu użytkownika w celu tworzenia głębokości, hierarchii i zainteresowania wizualnego. WinUI 3 udostępnia cztery mechanizmy stosowania materiałów, z których każdy jest odpowiedni dla innego scenariusza.

Ważna

AcrylicBrush to akryl wyłącznie w aplikacji — rozmywa zawartość XAML w oknie aplikacji. Nie wyświetla pulpitu ani innych okien za aplikacją. W przypadku efektów przezroczystości pulpitu użyj Window.SystemBackdrop lub SystemBackdropElement.

Którego materiału należy używać?

Scenario Materiał API
Okno aplikacji z tłem Mica zabarwionym tapetą Mica Window.SystemBackdrop = new MicaBackdrop()
Okno aplikacji z przezroczystym matowym tłem Pulpit akrylowy Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Menu wysuwane, wyskakujące lub kontekstowe z tłami akrylowymi Tło systemowe na powierzchni Ustaw SystemBackdrop na FlyoutBase, Popup itd.
Pasek boczny, panel lub element z micą lub akrylem (nie całe okno) SystemBackdropElement kontrolka <SystemBackdropElement>
Panel nawigacyjny lub panel treści z efektem rozmycia wewnątrz aplikacji Akryl w aplikacji {ThemeResource AcrylicInAppFillColorDefaultBrush}

Brak materiału (ustawienie domyślne)

Jeśli nie zastosowano żadnego materiału, tło okna jest stałym kolorem narysowanym z aktywnego światła lub ciemnego motywu — bez rozmycia ani przezroczystości.

Zrzut ekranu przedstawiający okno aplikacji WinUI 3 bez zastosowanego materiału, pokazujące płaskie białe tło.

Materiały opierają się na efektach kompositora, które wymagają obsługi sprzętu i preferencji użytkownika. WinUI 3 powraca z wdziękiem do solidnego koloru, gdy nie można renderować materiału:

  • Remote Desktop lub maszyn wirtualnych — komponator nie może mieszać się z zawartością pulpitu za pośrednictwem protokołu RDP, więc SystemBackdrop materiały wracają automatycznie.
  • Niewystarczająca ilość sprzętu graficznego — Mica i Desktop Akryl wymagają directX 11 i odpowiedniej pamięci procesora GPU. Urządzenia, które nie osiągają wymaganego progu, przełączają się na jednolity kolor motywu.
  • Efekty przezroczystości wyłączone — jeśli użytkownik wyłączy Efekty przezroczystości w Ustawienia> Personalizacja> Kolory, wszystkie SystemBackdrop materiały i AcrylicBrush przyjmują swoje jednolite odpowiedniki.
  • Oszczędzanie baterii jest aktywne — Windows wyłącza efekt akrylowy (DesktopAcrylicBackdrop i AcrylicBrush), gdy funkcja Oszczędzanie baterii jest włączona. Nie ma to wpływu na micę.
  • Tryb wysokiego kontrastu — wszystkie materiały są wyłączane; zamiast nich system stosuje kolory motywu wysokiego kontrastu.

Aplikacja nie musi wykrywać tych warunków — interfejsy API automatycznie obsługują powrót rezerwowy. Upewnij się, że każde skonfigurowane tło motywu lub FallbackColor dobrze wygląda jako jednolity kolor.

Mica

Mica wkomponowuje kolor tapety pulpitu użytkownika w stonowane, spersonalizowane tło. Jest ona przeznaczona dla głównego tła okna aplikacji, szczególnie w obszarach paska tytułu i okienka nawigacji.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Warianty: MicaKind.Base (wartość domyślna) lub MicaKind.BaseAlt (lżejsza, dla powierzchni pomocniczych)
  • Windows wersja: tylko Windows 11. Przechodzi na jednolity kolor motywu w systemie Windows 10.

Zrzut ekranu przedstawiający aplikację WinUI 3 z zastosowaną funkcją MicaBackdrop z subtelnym niebieskim szarym tłem przyciemnionym przez tapetę pulpitu użytkownika.

Pulpit akrylowy

Efekt Acrylic na pulpicie pokazuje dynamiczny, rozmyty widok pulpitu i zawartości znajdujących się za oknem aplikacji, tworząc efekt oszronionego szkła.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Warianty: DesktopAcrylicKind.Base (bardziej nieprzezroczyste) lub DesktopAcrylicKind.Thin (bardziej przezroczyste)
  • Windows wersja: Windows 10 (kompilacja 17763) i nowsze.

Zrzut ekranu przedstawiający aplikację WinUI 3 z zastosowanym efektem DesktopAcrylicBackdrop, pokazujący rozmycie zawartości pulpitu za oknem przypominające matowe szkło.

Akryl można również stosować do powierzchni tymczasowych — ustaw SystemBackdrop dla FlyoutBase, Popup, MenuFlyoutPresenter lub CommandBarFlyoutCommandBar. Pełną listę znajdziesz w sekcji Tła systemowe.

SystemBackdropElement

SystemBackdropElement nakłada materiał Mica lub Desktop Acrylic z kompozytora systemowego na określony element XAML — a nie na całe okno. Użyj go, gdy pasek boczny, panel lub karta potrzebuje własnego tła Mica lub Akrylu niezależnie od reszty okna.

Acrylic wewnątrz aplikacji (AcrylicBrush)

AcrylicBrush rozmywa zawartość XAML w oknie aplikacji. Nie wyświetla pulpitu ani innych okien przez powierzchnię. Użyj tego do paneli nawigacyjnych, pasków bocznych lub paneli treści wszędzie tam, gdzie chcesz uzyskać półprzezroczysty efekt wewnątrz aplikacji.

  • Interfejs API: zastosuj {ThemeResource AcrylicInAppFillColorDefaultBrush} do elementu Backgroundlub zdefiniuj niestandardowy AcrylicBrush element za pomocą TintColor, TintOpacityi TintLuminosityOpacity.
  • Właściwość UWP BackgroundSource = HostBackdrop nie jest dostępna w WinUI 3.
  • Aby uzyskać szczegółowe informacje i przykłady kodu, zobacz Akryl w aplikacji.

Zrzut ekranu przedstawiający aplikację WinUI 3 z zastosowaniem AcrylicBrush, pokazujący półprzezroczysty panel, który rozmywa zawartość XAML w oknie aplikacji.

  • Last updated on