Motivy v aplikacích Windows

Windows aplikace podporují světlé a tmavé motivy a můžete přizpůsobit, jak aplikace reaguje na předvolbu motivu uživatele. Tento článek popisuje, jak změnit motivy, používat štětce motivů, přizpůsobit barvy motivu a pracovat s barevným rozhraním API.

Pokyny k návrhu efektivního používání barev najdete v tématu Color v Windows.

Změna motivu

Motivy můžete změnit změnou vlastnosti RequestedTheme v App.xaml souboru.

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

Odebrání vlastnosti RequestedTheme znamená, že vaše aplikace použije systémové nastavení uživatele.

Uživatelé mohou také vybrat motiv s vysokým kontrastem, který používá malou paletu kontrastních barev, která usnadňuje zobrazení rozhraní. V takovém případě systém přepíše váš RequestedTheme.

Testování témat

Pokud o motiv aplikace nepožádáte, nezapomeňte aplikaci otestovat ve světlých i tmavých motivech, abyste měli jistotu, že vaše aplikace bude čitelná ve všech podmínkách.

Štětce motivu

Běžné ovládací prvky automaticky používají štětce motivů ke zvýšení kontrastu pro světlé a tmavé motivy.

Například zde je ilustrace toho, jak AutoSuggestBox používá styly motivu:

Použití štětců motivu

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

Další informace o používání štětců motivů v aplikaci najdete v tématu Prostředky motivu.

Barvy zvýraznění

Běžné ovládací prvky používají k vyjádření informací o stavu barvu zvýraznění. Ve výchozím nastavení je barva zvýraznění, kterou si uživatelé vyberou v nastavení, SystemAccentColor. Můžete ale také přizpůsobit barvu motivu aplikace tak, aby odrážela vaši značku.

Přepsání akcentové barvy

Pokud chcete změnit barvu zvýraznění aplikace, umístěte do pole následující kód app.xaml.

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

Výběr akcentové barvy

Pokud pro aplikaci vyberete vlastní barvu zvýraznění, ujistěte se, že text a pozadí, které používají barvu zvýraznění, mají dostatečný kontrast pro optimální čitelnost. K otestování kontrastu můžete použít nástroj pro výběr barvy v nastavení Windows nebo můžete použít tyto nástroje pro oline kontrast.

Paleta akcentních barev

Algoritmus zvýrazňující barvy v prostředí Windows generuje světlé a tmavé odstíny zvýraznění.

K těmto odstínům lze přistupovat jako k prostředkům motivu :

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

K paletě barev zvýraznění můžete také přistupovat programově pomocí metody UISettings.GetColorValue a enumerace UIColorType.

Paletu akcentních barev můžete použít pro barevné tematizování ve vaší aplikaci. Níže je příklad, jak můžete použít paletu zvýrazňujících barev na tlačítku.

Paleta barev pro akcent aplikována na tlačítko

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

Při použití barevného textu na barevném pozadí se ujistěte, že je mezi textem a pozadím dostatek kontrastu. Ve výchozím nastavení bude hypertextový odkaz nebo hypertext používat akcentovou barvu. Pokud na pozadí použijete varianty barvy zvýraznění, měli byste použít variantu původní barvy zvýraznění k optimalizaci kontrastu barevného textu na barevném pozadí.

Následující graf znázorňuje příklad různých světlejších nebo tmavších odstínů barvy akcentu a jak lze použít barevný text na barevném povrchu.

Další informace o stylování ovládacích prvků najdete v tématu styly XAML.

Barevné rozhraní API

K přidání barvy do aplikace můžete použít několik rozhraní API. Za prvé, Barvy třídy, které implementují velký seznam předdefinovaných barev. K těmto vlastnostem je možné přistupovat automaticky pomocí vlastností XAML. V následujícím příkladu vytvoříme tlačítko a nastavíme vlastnosti barvy pozadí a popředí na členy třídy Colors .

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

Pomocí struktury Color XAML můžete vytvořit vlastní barvy z RGB nebo šestnáctkových hodnot.

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

Stejnou barvu můžete vytvořit také v kódu pomocí metody FromArgb .

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

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

Písmena "Argb" je zkratka pro alfa (neprůhlednost), červená, zelená a modrá, což jsou čtyři součásti barvy. Každý argument může být v rozsahu od 0 do 255. Můžete se rozhodnout vynechat první hodnotu, což vám poskytne výchozí neprůhlednost 255, tedy plně neprůhlednou, nebo hodnotu 100%.

Nejběžnějším použitím barvy je jako argument pro SolidColorBrush, který lze použít k obarvení prvků uživatelského rozhraní jednolitou barvou. Tyto štětce jsou obecně definovány v ResourceDictionary, takže je lze znovu použít pro více prvků.

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

Další informace o použití štětců naleznete v štětce XAML.

Related

• Barvy systému Windows
• stylů XAML
• zdroje motivu XAML