Acrylmateriaal

Acryl is een soort borstel die een doorschijnende textuur creëert. U kunt acryl toepassen op app-oppervlakken om diepte toe te voegen en een visuele hiërarchie tot stand te brengen.

Belangrijke API's: AcrylBrush-klasse, achtergrondeigenschap, eigenschap Window.SystemBackdrop, DesktopAcrylicBackdrop-klasse

Acryl en het Fluent Design System

Het Fluent Design System helpt u moderne, vetgedrukte gebruikersinterface te maken die licht, diepte, beweging, materiaal en schaal bevat. Acryl is een Fluent Design System-onderdeel dat fysieke textuur (materiaal) en diepte toevoegt aan uw app. Zie Fluent Design - Materiaal voor meer informatie.

Acrylmengingstypen

Acryl's meest merkbare kenmerk is zijn transparantie. Er zijn twee acrylmixtypen die veranderen wat zichtbaar is door het materiaal:

• Achtergrond acryl onthult de bureaubladachtergrond en andere vensters die zich achter de huidige actieve app bevinden, waardoor diepte tussen toepassingsvensters wordt toegevoegd terwijl de persoonlijke voorkeuren van de gebruiker worden gevierd.
• In-app acryl voegt een gevoel van diepte toe binnen het app-frame, wat zowel focus als hiërarchie biedt.

Vermijd lagen meerdere acryloppervlakken: meerdere lagen van achtergrond acryl kunnen leiden tot afleidende optische illusies.

Wanneer acryl te gebruiken

Bekijk de volgende gebruikspatronen om te bepalen hoe u acryl het beste in uw app kunt opnemen.

Tijdelijke oppervlakken

• Gebruik achtergrond acryl voor tijdelijke UI-elementen.

Voor apps met contextmenu's, flyouts, niet-modale pop-ups of deelvensters met licht sluiten raden we u aan om acryl op de achtergrond te gebruiken, met name als deze oppervlakken buiten het frame van het hoofdvenster van de app tekenen. Het gebruik van acryl in tijdelijke scenario's helpt bij het onderhouden van een visuele relatie met de inhoud die de tijdelijke gebruikersinterface heeft geactiveerd.

Veel XAML-besturingselementen tekenen standaard acryl. MenuFlyout, AutoSuggestBox, ComboBox en vergelijkbare besturingselementen met light-dismiss pop-ups gebruiken allemaal acryl terwijl ze geopend zijn.

Ondersteunende gebruikersinterface en verticale deelvensters

• Gebruik acryl in de app voor het ondersteunen van de gebruikersinterface, zoals op oppervlakken die inhoud kunnen overlappen wanneer er wordt gescrold of ermee wordt gecommuniceerd.

Als u acryl in de app op navigatieoppervlakken gebruikt, kunt u overwegen om inhoud onder het acryldeelvenster uit te breiden om de stroom in uw app te verbeteren. Als u NavigationView gebruikt, wordt dit automatisch voor u uitgevoerd. Als u echter wilt voorkomen dat u een striping-effect maakt, probeert u niet meerdere stukken acrylrand-naar-rand te plaatsen - dit kan een ongewenste naad tussen de twee wazige oppervlakken creëren. Acryl is een hulpmiddel om visuele harmonie aan uw ontwerpen te brengen, maar wanneer deze onjuist wordt gebruikt, kan dit leiden tot visuele ruis.

Voor verticale deelvensters of oppervlakken die u helpen om inhoud van uw app te verwijderen, raden we u aan een ondoorzichtige achtergrond te gebruiken in plaats van acryl. Als uw verticale deelvensters boven op de inhoud worden geopend, zoals in de compacte of minimale modi van NavigationView, raden we u aan om acryl in de app te gebruiken om de context van de pagina te behouden wanneer de gebruiker dit deelvenster open heeft.

Bruikbaarheid en aanpassingsvermogen

Acryl past zijn uiterlijk automatisch aan voor een groot aantal apparaten en contexten.

In de modus Hoog contrast blijven gebruikers de vertrouwde achtergrondkleur van hun keuze zien in plaats van acryl. Bovendien verschijnen zowel achtergrond acryl als in-app acryl als een effen kleur:

• Wanneer de gebruiker Doorzichtigheidseffecten uitschakelt in > Instellingen persoonlijke instellingen > .
• Wanneer de batterijbesparingsmodus is geactiveerd.
• Wanneer de app wordt uitgevoerd op low-end hardware.

Bovendien zal alleen achtergrond acryl de doorzichtigheid en textuur vervangen door een effen kleur:

• Wanneer een app-venster op het bureaublad wordt gedeactiveerd.
• Wanneer de app wordt uitgevoerd op Xbox, HoloLens of in de tabletmodus.

Leesbaarheidsoverwegingen

Het is belangrijk om ervoor te zorgen dat alle tekst die uw app aan gebruikers presenteert, voldoet aan contrastverhoudingen (zie vereisten voor toegankelijke tekst). We hebben de acrylbronnen geoptimaliseerd zodat tekst voldoet aan contrastverhoudingen bovenop acryl. We raden u niet aan om accentkleurige tekst op uw acryloppervlakken te plaatsen, omdat deze combinaties waarschijnlijk niet voldoen aan minimale contrastverhoudingvereisten bij de standaard tekengrootte van 14 pixels. Vermijd het plaatsen van hyperlinks boven acrylelementen. Als u ervoor kiest om de acryltintkleur of dekkingsniveau aan te passen, moet u rekening houden met de invloed op de leesbaarheid.

Acryl toepassen in uw app

Achtergrond acryl

Als u achtergrond acryl wilt toepassen in een WinUI 3-app, stelt u de eigenschap van SystemBackdrop het element in op een exemplaar van DesktopAcrylicBackdrop. Zie Mica- of Acrylmaterialen toepassen in desktop-apps voor Windows 11 voor meer informatie.

Deze elementen hebben een SystemBackdrop eigenschap:

• CommandBarFlyoutCommandBar.SystemBackdrop
• ContentIsland.SystemBackdrop
• DesktopWindowXamlSource.SystemBackdrop
• FlyoutBase.SystemBackdrop
• MenuFlyoutPresenter.SystemBackdrop
• Popup.SystemBackdrop
• Window.SystemBackdrop

In-app acryl

U kunt acryl in de app toepassen op de oppervlakken van uw app met behulp van een XAML AcrylBrush of vooraf gedefinieerde AcrylicBrush themabronnen.

WinUI bevat een verzameling resources voor penseelthema's die het thema van de app respecteren en waar nodig terugvallen op effen kleuren. Als u een specifiek oppervlak wilt schilderen, past u een van de themaresources toe op elementachtergronden, net zoals u een andere kwastresource zou toepassen.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Aangepast acrylborstel

U kunt ervoor kiezen om een kleurtint toe te voegen aan het acryl van uw app om de huisstijl weer te geven of visuele balans te bieden met andere elementen op de pagina. Als u kleur wilt weergeven in plaats van grijswaarden, moet u uw eigen acrylborstels definiëren met behulp van de volgende eigenschappen.

• TintColor: de laag kleur/tint-overlay.
• TintOpacity: de dekking van de tintlaag.
• TintLuminosityOpacity: bepaalt de hoeveelheid verzadiging die vanaf de achtergrond door het acryloppervlak is toegestaan.
• BackgroundSource: (alleen WinUI 2/UWP) de vlag om op te geven of u achtergrond of acryl in de app wilt.
• FallbackColor: de effen kleur die acryl vervangt in Batterijbesparing. Voor achtergrond acryl vervangt terugvalkleur ook acryl wanneer uw app zich niet in het actieve bureaubladvenster bevindt.

Als u een acrylborstel wilt toevoegen, definieert u de drie bronnen voor donkere, lichte en hoog contrastthema's. In hoog contrast raden we u aan om een SolidColorBrush te gebruiken met hetzelfde x:Key als de donkere/lichte AcrylBrush.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            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"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

In het volgende voorbeeld ziet u hoe u een AcrylBrush declareert in code.

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;

Do's en don'ts

• Gebruik acryl op tijdelijke oppervlakken.
• Breid acryl uit tot ten minste één rand van uw app om een naadloze ervaring te bieden door subtiel te mengen met de omgeving van de app.
• Plaats desktop acryl niet op grote achtergrondoppervlakken van uw app.
• Plaats niet meerdere acryl deelvensters naast elkaar omdat dit resulteert in een ongewenste zichtbare naad.
• Plaats geen accentgekleurde tekst op acryloppervlakken.

Hoe we acryl hebben ontworpen

We hebben de belangrijkste onderdelen van acryl verfijnd om bij zijn unieke uiterlijk en eigenschappen aan te komen. We zijn begonnen met translucency, blur en ruis om visuele diepte en dimensie toe te voegen aan vlakke oppervlakken. We hebben een uitsluitingsmixmoduslaag toegevoegd om het contrast en de leesbaarheid van de gebruikersinterface op een acrylachtergrond te garanderen. Ten slotte hebben we kleurtint toegevoegd voor personalisatiemogelijkheden. Samen voegen deze lagen toe aan een vers, bruikbaar materiaal.

Het acryl recept: achtergrond, vervagen, uitsluitingsmix, kleur/tint overlay, ruis

Voorbeelden

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Verwante artikelen

Overzicht van Fluent Design