Teman i Windows-appar

Windows appar stöder ljusa och mörka teman, och du kan anpassa hur appen svarar på användarens temainställningar. Den här artikeln beskriver hur du ändrar teman, använder temaborstar, anpassar accentfärger och arbetar med färg-API:et.

Designvägledning om hur du använder färg effektivt finns i Color i Windows.

Öppna WinUI-galleriappen och se Färger i praktiken

Ändra tema

Du kan ändra teman genom att ändra egenskapen RequestedTheme i App.xaml filen.

<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>

Om du tar bort egenskapen RequestedTheme innebär det att programmet använder användarens systeminställningar.

Användarna kan också välja temat högkontrast, som använder en liten palett med kontrasterande färger som gör gränssnittet enklare att se. I så fall åsidosätter systemet din RequestedTheme.

Testa teman

Om du inte begär ett tema för din app ska du testa appen i både ljusa och mörka teman för att säkerställa att appen är läsbar under alla förhållanden.

Temapenslar

Vanliga kontroller använder automatiskt temapenslar för att justera kontrasten för ljusa och mörka teman.

Här är till exempel en bild av hur AutoSuggestBox använder temaborstar:

Använda temapenslar

När du skapar mallar för anpassade kontroller använder du temapenslar i stället för hårdkodsfärgvärden. På så sätt kan din app enkelt anpassa sig till valfritt tema.

Till exempel visar dessa objektmallar för ListView hur du använder temapenslar i en anpassad mall.

<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>

Mer information om hur du använder temaborstar i din app finns i Temaresurser.

Accentfärger

Vanliga kontroller använder en dekorfärg för att förmedla tillståndsinformation. Som standard är dekorfärgen SystemAccentColor den som användarna väljer i sina inställningar. Du kan dock också anpassa appens dekorfärg så att den återspeglar ditt varumärke.

Åsidosätta accentfärgen

Om du vill ändra appens accentfärg placerar du följande kod i app.xaml.

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

Välja en dekorfärg

Om du väljer en anpassad dekorfärg för din app kontrollerar du att text och bakgrunder som använder accentfärgen har tillräcklig kontrast för optimal läsbarhet. Om du vill testa kontrasten kan du använda verktyget för färgväljare i Windows Inställningar, eller så kan du använda dessa onlinekontrastverktyg.

Accentfärgspalett

En accentfärgsalgoritm i Windows-gränssnittet genererar ljusa och mörka nyanser av accentfärgen.

Dessa nyanser kan nås som temaresurser :

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

Du kan också programmässigt komma åt accentfärg-paletten med metoden UISettings.GetColorValue och UIColorType.

Du kan använda accentfärgpaletten för färgtema i din app. Nedan visas ett exempel på hur du kan använda accentfärgpaletten på en knapp.

<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>

När du använder färgad text på en färgad bakgrund kontrollerar du att det finns tillräckligt med kontrast mellan text och bakgrund. Hyperlänken eller hypertexten använder som standard accentfärgen. Om du använder varianter av accentfärgen i bakgrunden bör du använda en variant av den ursprungliga accentfärgen för att optimera kontrasten av färgad text på en färgad bakgrund.

Diagrammet nedan illustrerar ett exempel på de olika ljusa/mörka nyanserna av accentfärg och hur färgad text kan tillämpas på en färgad yta.

Mer information om formateringskontroller finns i XAML-format.

Färg-API

Det finns flera API:er som kan användas för att lägga till färg i ditt program. Först klass Colors, som implementerar en stor lista med fördefinierade färger. Dessa kan nås automatiskt med XAML-egenskaper. I exemplet nedan skapar vi en knapp och anger egenskaperna för bakgrunds- och förgrundsfärg till medlemmar i klassen Färger .

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

Du kan skapa egna färger från RGB- eller hexvärden med hjälp av Färg-struct i XAML.

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

Du kan också skapa samma färg i kod med hjälp av metoden FromArgb .

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

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

Bokstäverna "Argb" står för Alpha (opacitet), Röd, Grön och Blå, som är de fyra komponenterna i en färg. Varje argument kan vara mellan 0 och 255. Du kan välja att utelämna det första värdet, vilket ger dig en standardopacitet på 255 eller 100% ogenomskinlig.

Anmärkning

Om du använder C++, måste du skapa färger med hjälp av klassen ColorHelper .

Den vanligaste användningen för en Color är som argument för en SolidColorBrush, som kan användas för att måla UI-element i en enda enfärgad färg. Dessa penslar definieras vanligtvis i en ResourceDictionary, så de kan återanvändas för flera element.

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

Mer information om hur du använder penslar finns i XAML-penslar.

Related

• Färg i Windows
• XAML-formatmallar
• XAML-temaresurser