Udostępnij za pośrednictwem

Efekt akrylowy w aplikacji

Możesz zastosować akrylowe efekty w swojej aplikacji na powierzchniach aplikacji za pomocą XAML-owego AcrylicBrush lub wstępnie zdefiniowanych AcrylicBrush zasobów motywu.

Otwórz aplikację Galeria WinUI i zobacz Akryl w akcji

WinUI zawiera kolekcję zasobów motywu pędzla, które szanują motyw aplikacji i wracają do stałych kolorów zgodnie z potrzebami. Aby pomalować konkretną powierzchnię, zastosuj jeden z zasobów motywu do tła elementów tak samo, jak każdy inny zasób pędzla.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Uwaga / Notatka

Te zasoby można wyświetlić w pliku zasobów motywu AcrylicBrush w repozytorium GitHub microsoft-ui-xaml.

Niestandardowy pędzel akrylowy

Możesz dodać odcień koloru do tła akrylowego aplikacji, aby pokazać branding lub uzyskać równowagę wizualną z pozostałymi elementami na stronie. Aby pokazać kolor, a nie odcienie szarości, należy zdefiniować własne pędzle akrylowe przy użyciu następujących właściwości.

  • TintColor: warstwa nakładki koloru/odcienia.
  • TintOpacity: nieprzezroczystość warstwy odcienia.
  • TintLuminosityOpacity: kontroluje ilość nasycenia przepuszczanego przez akrylową powierzchnię z tła.
  • FallbackColor: jednolity kolor, który zastępuje akryl w trybie oszczędzania baterii. W przypadku tła akrylowego kolor rezerwowy zastępuje również akryl, gdy aplikacja nie znajduje się w aktywnym oknie pulpitu.

Próbki akrylowe w jasnych barwach

Ciemne próbki akrylowe

Przezroczystość luminancji w porównaniu do przezroczystości barwy

Aby dodać pędzel akrylowy, zdefiniuj trzy zasoby dla motywów ciemnych, jasnych i o wysokim kontraście. W wysokim kontraście zalecamy użycie pędzla SolidColorBrush z tym samym x:Key, co ciemny/jasny AcrylicBrush.

Uwaga / Notatka

Jeśli nie określisz wartości TintLuminosityOpacity, system automatycznie dostosuje tę wartość na podstawie TintColor i TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

W poniższym przykładzie pokazano, jak zadeklarować aplikację AcrylicBrush w kodzie.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;
  • Last updated on