Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Windows apps ondersteunen lichte en donkere thema's en u kunt aanpassen hoe uw app reageert op de themavoorkeur van de gebruiker. In dit artikel wordt beschreven hoe u thema's kunt wijzigen, themaborstels kunt gebruiken, accentkleuren kunt aanpassen en kunt werken met de kleuren-API.
Zie Color in Windows voor ontwerprichtlijnen voor het effectief gebruiken van kleur.
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
Wanneer u sjablonen voor aangepaste besturingselementen maakt, gebruikt u themaborstels in plaats van codekleurwaarden. Op deze manier kan uw app zich eenvoudig aanpassen aan elk thema.
Bijvoorbeeld, deze itemsjablonen voor ListView laten zien hoe u thema brushes gebruikt in een aangepaste sjabloon.
<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 hulpmiddel kleurkiezer gebruiken in Windows Instellingen of kunt u deze hulpprogramma's voor online-contrast gebruiken.
Accentkleurpalet
Een accentkleur-algoritme in de Windows shell genereert lichte en donkere tinten van de accentkleur.
Deze tinten zijn toegankelijk als thema-bronnen:
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
U kunt het accentkleurenpalet ook programmatisch benaderen via de methode UISettings.GetColorValue en de UIColorType enum.
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 kan worden toegepast op een gekleurde surface.
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.
Opmerking
Als u C++gebruikt, moet u kleuren maken met behulp van de klasse ColorHelper .
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.
Related
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer