Kleur in Windows

Windows gebruikt kleur om gebruikers te helpen zich te concentreren op hun taken door een visuele hiërarchie en structuur tussen elementen van de gebruikersinterface aan te geven. Kleur is geschikt voor de context en wordt gebruikt om een kalmerende basis te bieden, het subtiel verbeteren van gebruikersinteracties en belangrijke items alleen te benadrukken wanneer dat nodig is.

Kleurmodi

Windows ondersteunt twee kleurenmodi of thema's: licht en donker. Elke modus bestaat uit een set neutrale kleurwaarden die automatisch worden aangepast om een optimaal contrast te garanderen.

In zowel lichte als donkere kleurmodi geven donkerdere kleuren de achtergrondoppervlakken van minder belang aan. Belangrijke oppervlakken zijn gemarkeerd met lichtere en helderdere kleuren. Zie lagen en hoogte voor meer informatie.

Accentkleur

Accentkleur wordt gebruikt om belangrijke elementen in de gebruikersinterface te benadrukken en om de status van een interactief object of besturingselement aan te geven. Accentkleurwaarden worden automatisch gegenereerd en geoptimaliseerd voor contrast in zowel lichte als donkere modi. Accentkleuren worden spaarzaam gebruikt om belangrijke elementen te markeren en informatie over de status van een interactief element over te brengen.

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

Kleur in Windows-apps

Kleur biedt een intuïtieve manier om informatie te communiceren aan gebruikers in uw app: deze kan worden gebruikt om interactiviteit aan te geven, feedback te geven aan gebruikersacties en uw interface een idee te geven van visuele continuïteit.

In Windows-apps worden kleuren voornamelijk bepaald door accentkleur en thema. In dit artikel bespreken we hoe u kleur in uw app kunt gebruiken en hoe u accentkleur en themaresources gebruikt om uw Windows-app bruikbaar te maken in elke themacontext.

Kleurprincipes

Thema's

Windows-apps kunnen een licht of donker toepassingsthema gebruiken. Het thema is van invloed op de kleuren van de achtergrond, tekst, pictogrammen en algemene bedieningselementen.

Licht thema

Donker thema

Standaard is het thema van uw Windows-app de voorkeur voor het thema van de gebruiker in Windows-instellingen of het standaardthema van het apparaat. U kunt het thema echter specifiek instellen voor uw Windows-app.

Het thema wijzigen

U kunt thema's wijzigen door de eigenschap RequestedTheme in uw App.xaml bestand te wijzigen.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

Als u de eigenschap RequestedTheme verwijdert, betekent dit dat uw toepassing gebruikmaakt van de systeeminstellingen van de gebruiker.

Gebruikers kunnen ook het thema hoog contrast selecteren, dat gebruikmaakt van een klein palet met contrasterende kleuren waarmee de interface gemakkelijker te zien is. In dat geval overschrijft het systeem uw RequestedTheme.

Thema's testen

Als u geen thema voor uw app aanvraagt, moet u uw app testen in zowel lichte als donkere thema's om ervoor te zorgen dat uw app leesbaar is in alle omstandigheden.

Themaborstels

Common controls gebruiken automatisch theme brushes om contrast voor lichte en donkere thema's aan te passen.

Hier volgt bijvoorbeeld een afbeelding van hoe de AutoSuggestBox themaborstels gebruikt:

voorbeeld van

Themaborstels gebruiken

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Zie thema-hulpbronnenvoor meer informatie over het gebruik van thema-penselen in uw app.

Accentkleuren

Algemene besturingselementen gebruiken een accentkleur om statusinformatie over te brengen. Standaard is de accentkleur de SystemAccentColor kleur die gebruikers selecteren in hun instellingen. U kunt echter ook de accentkleur van uw app aanpassen aan uw merk.

De accentkleur overschrijven

Als u de accentkleur van uw app wilt wijzigen, plaatst u de volgende code in app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Een accentkleur kiezen

Als u een aangepaste accentkleur voor uw app selecteert, moet u ervoor zorgen dat tekst en achtergronden die gebruikmaken van de accentkleur voldoende contrast hebben voor een optimale leesbaarheid. Als u het contrast wilt testen, kunt u het hulpprogramma kleurkiezer gebruiken in Windows-instellingen of u kunt deze online contrasthulpprogramma's gebruiken.

Accentkleurpalet

Een accentkleuralgoritmen in de Windows-shell genereren lichte en donkere tinten van de accentkleur.

Deze tinten zijn toegankelijk als thema-bronnen:

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

U kunt het accentkleurpalet ook programmatisch openen met de methode UISettings.GetColorValue en UIColorType opsomming.

U kunt het accentkleurenpalet gebruiken voor kleurthema's in uw app. Hieronder ziet u een voorbeeld van hoe u het accentkleurpalet op een knop kunt gebruiken.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

Wanneer u gekleurde tekst op een gekleurde achtergrond gebruikt, moet u ervoor zorgen dat er voldoende contrast is tussen tekst en achtergrond. Hyperlink of hypertext gebruikt standaard de accentkleur. Als u variaties van de accentkleur op de achtergrond toepast, moet u een variatie van de oorspronkelijke accentkleur gebruiken om het contrast van gekleurde tekst op een gekleurde achtergrond te optimaliseren.

In de onderstaande grafiek ziet u een voorbeeld van de verschillende licht-/donkere tinten van accentkleur en hoe het gekleurde type op een gekleurd oppervlak kan worden toegepast.

Zie XAML-stijlen voor meer informatie over stijlbesturingselementen.

Kleuren-API

Er zijn verschillende API's die kunnen worden gebruikt om kleur toe te voegen aan uw toepassing. Ten eerste, de klasse Kleuren , waarmee een grote lijst met vooraf gedefinieerde kleuren wordt geïmplementeerd. Deze kunnen automatisch worden geopend met XAML-eigenschappen. In het onderstaande voorbeeld maken we een knop en stellen we de eigenschappen van de achtergrond- en voorgrondkleur in op leden van de klasse Kleuren .

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

U kunt uw eigen kleuren maken op basis van RGB- of hexwaarden met behulp van de kleurstruct in XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

U kunt ook dezelfde kleur in code maken met behulp van de Methode FromArgb .

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

De letters "Argb" staat voor Alpha (ondoorzichtigheid), Rood, Groen en Blauw, die de vier onderdelen van een kleur zijn. Elk argument kan variëren van 0 tot 255. U kunt ervoor kiezen om de eerste waarde weg te laten, waardoor u een standaardaciteit van 255 of 100% ondoorzichtig krijgt.

Het meest voorkomende gebruik voor een Color is als argument voor een SolidColorBrush-, die kan worden gebruikt om UI-elementen in één effen kleur te schilderen. Deze borstels worden over het algemeen gedefinieerd in een ResourceDictionary, zodat ze voor meerdere elementen opnieuw kunnen worden gebruikt.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Bekijk XAML-borstelsvoor meer informatie over het gebruik van borstels.

Bruikbaarheid

Aanverwant

• XAML-stijlen
• XAML-themabronnen
• WinUI 3 Gallery - Kleuren