Styly XAML

Vzhled aplikací můžete přizpůsobit mnoha způsoby pomocí architektury XAML. Styly umožňují nastavit vlastnosti ovládacího prvku a znovu použít tato nastavení pro konzistentní vzhled napříč více ovládacími prvky.

WinUI a styly

Počínaje WinUI 2.2 jsme pomocí WinUI doručovali nové aktualizace vizuálního stylu napříč komponentami uživatelského rozhraní. Pokud si všimnete, že se vaše uživatelské rozhraní neaktualizuje na nejnovější styly, nezapomeňte aktualizovat na nejnovější balíček NuGet WinUI.

Počínaje verzí WinUI 2.6 poskytujeme nové styly pro většinu ovládacích prvků a nový systém správy verzí, který se v případě potřeby vrátí k předchozím stylům ovládacích prvků. Doporučujeme používat nové styly, protože lépe odpovídají směru návrhu Windows. Pokud ale váš scénář nemůže podporovat nové styly, jsou předchozí verze stále dostupné.

Ve WinUI verzi 2 můžete změnit verzi stylu nastavením vlastnosti ControlsResourcesVersion na XamlControlsResources, kterou zahrnete do vašeho Application.Resources. ControlsResourcesVersion se nastavuje na výchozí hodnotu výčtu Version2.

Pokud tuto hodnotu nastavíte na Version1, způsobí to, že XamlControlsResources načte předchozí verze stylů místo nových stylů používaných nejnovější verzí WinUI. Změna této vlastnosti za běhu není podporována a funkce opětovného načítání za provozu sady VisualStudio nebude fungovat; Po opětovném sestavení aplikace se však zobrazí změna stylů ovládacích prvků.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" 
                           ControlsResourcesVersion="Version1"/>
</Application.Resources>

Základy stylu

Pomocí stylů extrahujte nastavení vizuálních vlastností do opakovaně použitelných prostředků. Tady je příklad, který zobrazuje 3 tlačítka se stylem, který nastavuje vlastnosti BorderBrush, BorderThickness a Foreground . Použitím stylu můžete nastavit, aby se ovládací prvky zobrazovaly stejně, aniž byste museli tyto vlastnosti nastavovat na každém ovládacím prvku samostatně.

Styl můžete definovat v xaml pro ovládací prvek nebo jako opakovaně použitelný prostředek. Definujte prostředky v souboru XAML jednotlivých stránek, v souboru App.xaml nebo v samostatném souboru XAML slovníku prostředků. Soubor XAML slovníku prostředků je možné sdílet napříč aplikacemi a v jedné aplikaci je možné sloučit více než jeden slovník prostředků. Kde je prostředek definovaný, určuje obor, ve kterém se dá použít. Prostředky na úrovni stránky jsou k dispozici pouze na stránce, kde jsou definovány. Pokud jsou prostředky se stejným klíčem definované v souboru App.xaml i na stránce, prostředek na stránce přepíše prostředek v App.xaml. Pokud je prostředek definován v samostatném souboru slovníku prostředků, jeho obor je určen místem, kde se na slovník prostředků odkazuje.

V definici stylu potřebujete atribut TargetType a kolekci jednoho nebo více prvků Setter . Atribut TargetType je řetězec, který určuje typ FrameworkElement, na který se má použít styl. Hodnota TargetType musí určovat odvozený typ FrameworkElement, který je definován prostředím Windows Runtime nebo vlastním typem dostupným v odkazovaném sestavení. Pokud se pokusíte použít styl na ovládací prvek a typ ovládacího prvku neodpovídá atributu TargetType stylu, který se pokoušíte použít, dojde k výjimce.

Každý prvek setter vyžaduje vlastnosti a hodnotu. Tato nastavení vlastnosti označují, na jakou vlastnost ovládacího prvku se nastavení vztahuje, a hodnotu, která se má pro tuto vlastnost nastavit. Setter.Value můžete nastavit buď pomocí atributu, nebo syntaxe elementu vlastnosti. Xaml zde zobrazuje styl použitý u tlačítek zobrazených dříve. V tomto XAML první dva elementy Setter používají syntaxi atributu, ale poslední Setter, pro BorderBrush vlastnost, používá syntaxi elementu property. V příkladu se nepoužívá atribut atribut x:Key , takže styl se implicitně použije na tlačítka. Použití stylů implicitně nebo explicitně je vysvětleno v další části.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

Použití implicitního nebo explicitního stylu

Pokud definujete styl jako prostředek, můžete ho použít na ovládací prvky dvěma způsoby:

• Implicitně pouhým zadáním typu TargetType pro Style.
• Explicitně zadáním TargetType a atributu x:Key atributu Style a nastavením vlastnosti Style cílového ovládacího prvku pomocí rozšíření značek {StaticResource} odkazu, který používá explicitní klíč.

Pokud styl obsahuje atribut x:Key, můžete jej použít pouze u ovládacího prvku nastavením vlastnosti Styl ovládacího prvku na styl s klíči. Naproti tomu styl bez atributu x:Key se automaticky použije u každého ovládacího prvku svého cílového typu, který jinak nemá explicitní nastavení stylu.

Tady jsou dvě tlačítka, která demonstrují implicitní a explicitní styly.

V tomto příkladu má první styl atribut x:Key a jeho cílový typ je Button. Vlastnost Style prvního tlačítka je nastavena na tento klíč, takže tento styl se použije explicitně. Druhý styl se použije implicitně na druhé tlačítko, protože jeho cílový typ je Button a styl nemá atribut x:Key.

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button"/>
</Grid>

Použijte styly založené na předlohách.

Pokud chcete usnadnit údržbu stylů a optimalizovat opakované použití stylu, můžete vytvořit styly, které dědí z jiných stylů. Vlastnost BasedOn slouží k vytvoření zděděných stylů. Styly, které dědí z jiných stylů, musí cílit na stejný typ ovládacího prvku nebo na ovládací prvek odvozený od typu, na který cílí základní styl. Pokud například základní styl cílí Na ContentControl, styly založené na tomto stylu mohou cílit Na ContentControl nebo typy odvozené z ContentControl , například Button a ScrollViewer. Pokud hodnota není nastavena ve stylu odvozeném od základního, převezme se ze základního stylu. Pokud chcete změnit hodnotu ze základního stylu, styl založený na něm tuto hodnotu přepíše. Následující příklad ukazuje Tlačítko a CheckBox se styly, které dědí ze stejného základního stylu.

Základní styl cílí na ContentControl a nastaví Height a Width. Styly založené na tomto stylu se zaměřují na CheckBox a Button, které jsou odvozeny z ContentControl. Styly založené na základech nastavily různé barvy vlastností BorderBrush a Foreground . (Kolem zaškrtávacího políčka obvykle nezadáte ohraničení. Děláme to tady, abychom ukázali efekty stylu.)

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <Setter Property="Height" Value="30" />
    </Style>

    <Style x:Key="ButtonStyle" TargetType="Button"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>

Použití nástrojů pro snadnou práci se styly

Rychlý způsob, jak použít styly u ovládacích prvků, je kliknout pravým tlačítkem myši na ovládací prvek na návrhové ploše microsoft Visual Studio XAML a vybrat Upravit styl nebo upravit šablonu (v závislosti na ovládacím prvku, na který kliknete pravým tlačítkem myši). Existující styl pak můžete použít tak, že vyberete Použít zdroj nebo definujete nový styl výběrem Vytvořit prázdný. Pokud vytvoříte prázdný styl, máte možnost ji definovat na stránce, v souboru App.xaml nebo v samostatném slovníku prostředků.

Lehký styl

Přepsání systémových štětců je obecně prováděno na úrovni aplikace nebo stránky a v každém případě přepsání barvy ovlivní všechny ovládací prvky, které používají tento štětec – v XAML může mnoho ovládacích prvků používat stejný systémový štětec.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

U stavů, jako je PointerOver (kurzor myši je nad tlačítkem), PointerPressed (tlačítko bylo stisknuto) nebo Zakázáno (tlačítko není použitelné). Původním lehkým názvům stylů se přidávají tyto přípony: ButtonBackgroundPointerOver, ButtonForegroundPressed, ButtonBorderBrushDisabled atd. Úpravou těchto štětců zajistíte, že vaše ovládací prvky budou barevně odpovídat motivu vaší aplikace.

Umístění těchto úprav štětců na úrovni App.Resources změní všechna tlačítka v celé aplikaci, místo aby ovlivnila pouze jednu stránku.

Styly pro jednotlivé ovládací prvky

V jiných případech je změna jednoho ovládacího prvku na jedné stránce pouze tak, aby vypadala určitým způsobem, aniž by se změnily jiné verze tohoto ovládacího prvku, je žádoucí:

<CheckBox Content="Normal CheckBox" Margin="5"/>
<CheckBox Content="Special CheckBox" Margin="5">
    <CheckBox.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                        Color="White"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                        Color="Purple"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </CheckBox.Resources>
</CheckBox>
<CheckBox Content="Normal CheckBox" Margin="5"/>

To by mělo ovlivnit pouze to jedno speciální zaškrtávací políčko na stránce, kde tento ovládací prvek existuje.

Vlastní ovládací prvky

Při vytváření vlastních ovládacích prvků, které můžou být vizuálně nebo funkčně sladěné s našimi integrovanými ovládacími prvky, zvažte použití implicitního stylu a prostředků zjednodušeného stylu k definování vlastního obsahu. Prostředky můžete použít buď přímo, nebo můžete pro prostředek vytvořit nový alias.

Přímé použití řídicích prostředků

Například, pokud píšete ovládací prvek, který má vzhled tlačítka, můžete nechat svůj ovládací prvek přímo odkazovat na zdroje tlačítka, například takto:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
</Style>

Přiřazení kontrolních prostředků pod novými názvy

Případně, pokud dáváte přednost vytváření vlastních prostředků, měli byste tyto vlastní názvy propojit s našimi výchozími prostředky pro odlehčené stylování.

Například styl vlastního ovládacího prvku může mít speciální definice prostředků:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource MyCustomControlBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource MyCustomControlBorderBrush}"/>
</Style>

Ve slovníku prostředků nebo hlavní definici byste připojili zdroje stylů Lightweight k vašim vlastním.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>        
    <ResourceDictionary x:Key="Light">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Vyžaduje se, abyste použili ThemeDictionary duplikovaný třikrát, aby bylo možné správně zpracovat tři různé změny motivu (Default, Light, HighContrast).

Upozornění

Pokud přiřadíte prostředek zjednodušeného stylu k novému aliasu a také předefinujete prostředek zjednodušeného stylu, nemusí se vlastní nastavení použít, pokud vyhledávání prostředků není ve správném pořadí. Příklad: Pokud byste přepsali ButtonBackground na místě, které se vyhledá dříve než se nalezne MyCustomControlBackground, přepsání by bylo přehlédnuto.

Vyhněte se restylování ovládacích prvků

WinUI 2.2 nebo novější obsahuje nové styly a šablony pro ovládací prvky WinUI i systému.

Nejlepší způsob, jak zůstat aktuální s našimi nejnovějšími vizuálními styly, je použít nejnovější balíček WinUI 2 a vyhnout se vlastním stylům a šablonám (označovaným také jako opětovné šablonování). Styly jsou stále pohodlným způsobem, jak v aplikaci konzistentně použít sadu hodnot. Při tom nezapomeňte vycházet z našich nejnovějších stylů.

U systémových ovládacích prvků, které používají styly WinUI (Windows.UI.Xaml.Controls obor názvů), nastavte BasedOn="{StaticResource Default<ControlName>Style}", kde <ControlName> je název ovládacího prvku. Například:

<Style TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}">
    <Setter Property="Foreground" Value="Blue"/>
</Style>

Pro ovládací prvky WinUI 2 (Microsoft.UI.Xaml.Controls obor názvů) je výchozí styl definován v metadatech, takže vynecháte BasedOn.

Odvozené ovládací prvky

Pokud odvozujete vlastní ovládací prvek z existujícího ovládacího prvku XAML, ve výchozím nastavení nezískají styly WinUI 2. Použití stylů WinUI 2:

• Vytvořte nový styl s vlastností TargetType nastavenou na váš vlastní ovládací prvek.
• Založte styl na výchozím stylu ovládacího prvku, který jste odvozli.

Jedním z běžných scénářů je odvození nového ovládacího prvku z ContentDialogu. Tento příklad ukazuje, jak vytvořit nový styl, který aplikuje DefaultContentDialogStyle pro vaše vlastní dialogové okno.

<ContentDialog
    x:Class="ExampleApp.SignInContentDialog"
    ... >

    <ContentDialog.Resources>
        <Style TargetType="local:SignInContentDialog" BasedOn="{StaticResource DefaultContentDialogStyle}"/>
        ...
    </ContentDialog.Resources> 
    <!-- CONTENT -->
</ContentDialog>        

Vlastnost šablony

Pro vlastnost Templateovládacího prvku lze použít setter stylu a ve skutečnosti tvoří většinu typického stylu XAML a prostředků XAML aplikace. Podrobněji se o tom dozvíte v tématu Šablony ovládacích prvků.