Použití štětců k malování pozadí, popředí a obrysů

K malování interiérů a obrysů obrazců XAML, textu a ovládacích prvků použijte objekty štětce tak, aby byly viditelné v uživatelském rozhraní vaší aplikace.

Důležitá rozhraní API: Třída štětce, SolidColorBrush třída, RadialGradientBrush třída, ImageBrush – třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na radialGradientBrush v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Úvod do štětců

Pokud chcete vybarvit obrazec, text nebo části ovládacího prvku, které se zobrazují na plátně aplikace, nastavte vlastnost Výplň obrazce nebo pozadí a popředí vlastnosti ovládacího prvku na hodnotu štětce.

Různé typy štětců jsou:

Štětce v plné barvě

SolidColorBrush maluje oblast jednou barvou , jako je červená nebo modrá. Toto je nejzásadnější štětec. V jazyce XAML existují tři způsoby, jak definovat SolidColorBrush a barvu, kterou určuje: předdefinované názvy barev, šestnáctkové hodnoty barev nebo syntaxe elementu vlastnosti.

Předdefinované názvy barev

Můžete použít předdefinovaný název barvy, například žlutý nebo purpurový. K dispozici je 256 pojmenovaných barev. Analyzátor XAML převede název barvy na strukturu barev se správnými barevnými kanály. 256 pojmenovaných barev je založeno na názvech barev X11 ze specifikace CSS3, takže už možná znáte tento seznam pojmenovaných barev, pokud máte dřívější zkušenosti s vývojem nebo designem webu.

Tady je příklad, který nastaví vlastnost Výplň obdélníku Rectangle na předdefinovanou barvu Červená.

<Rectangle Width="100" Height="100" Fill="Red" />

vykreslený SolidColorBrush

SolidColorBrush aplikovaný na obdélník

Pokud definujete SolidColorBrush pomocí kódu místo XAML, každá pojmenovaná barva je k dispozici jako statická hodnota vlastnosti Třídy Colors . Chcete-li například deklarovat hodnotu Barva u SolidColorBrush, aby představovala pojmenovanou barvu "Orchid", nastavte hodnotu Barva na statickou hodnotu Colors.Orchid.

Šestnáctkové hodnoty barev

Řetězec šestnáctkového formátu můžete použít k deklarování přesných 24bitových barevných hodnot s 8bitovým alfa kanálem pro SolidColorBrush. Dvě znaky v rozsahu 0 až F definují každou hodnotu komponenty a pořadí hodnot součástí šestnáctkového řetězce je: alfa kanál (neprůhlednost), červený kanál, zelený kanál a modrý kanál (ARGB). Například šestnáctková hodnota "#FFFF0000" definuje plně neprůžnou červenou (alpha="FF", red="FF", green="00" a blue="00").

Tento příklad XAML nastaví vlastnost Fill pro Rectangle na šestnáctkovou hodnotu "#FFFF0000", což je stejný výsledek jako použití pojmenované barvy Colors.Red.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Syntaxe elementu vlastnosti

Syntaxi elementu vlastnosti můžete použít k definování SolidColorBrush. Tato syntaxe je více podrobná než předchozí metody, ale u elementu, jako je neprůhlednost, můžete zadat další hodnoty vlastností. Další informace o syntaxi XAML, najdete v přehledu XAML a průvodci syntaxí XAML , včetně syntaxe elementů vlastností.

V předchozích příkladech se štětec vytváří implicitně a automaticky jako součást záměrné zkratky jazyka XAML, která pomáhá udržet definice uživatelského rozhraní jednoduché v těch nejběžnějších případech. Další příklad vytvoří Rectangle a explicitně definuje SolidColorBrush jako hodnotu prvku pro vlastnost Rectangle.Fill. Barva SolidColorBrush je nastavená na Modrá a neprůhlednost je nastavená na 0,5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Lineární přechodové štětce

LinearGradientBrush maluje oblast přechodem definovaným podél čáry. Tato čára se nazývá přechodová osa. Pomocí objektů GradientStop zadáte barvy přechodu a jejich umístění na ose přechodu. Ve výchozím nastavení vede osa přechodu z levého horního rohu do dolního pravého rohu oblasti, ve které štětec maluje, což vede k diagonálnímu šrafování.

GradientStop je základní stavební blok štětce s gradientem. Přechodová zarážka určuje, jaká barva štětce je na posunu podél přechodové osy, když je štětec použit na vykreslenou oblast.

Vlastnost Color přechodové zarážky určuje barvu přechodové zarážky. Barvu můžete nastavit pomocí předdefinovaného názvu barvy nebo zadáním šestnáctkových hodnot ARGB ve formátu .

Vlastnost PosunGradientStop určuje pozici každého GradientStop podél osy přechodu. posun je dvojitý, který se pohybuje od 0 do 1. Posun o 0 umístí GradientStop na začátek přechodové osy, jinými slovy blízko bodu StartPoint. Posun o hodnotu 1 umístí GradientStop v koncovém bodu . Minimálně užitečný LinearGradientBrush by měl mít dvě hodnoty GradientStop, kde každá GradientStop by měla specifikovat jinou barvu Color a měla by mít jiný posun mezi 0 a 1.

Tento příklad vytvoří lineární přechod se čtyřmi barvami a použije ho k vykreslení Obdélník.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Barva každého bodu mezi přechodovými zarážkami se lineárně interpoluje jako kombinace barvy určené dvěma ohraničujícími přechodovými zarážkami. Následující obrázek zvýrazní přechodové zarážky v předchozím příkladu. Kruhy označují pozici přechodových zarážek a přerušovaná čára zobrazuje osu přechodu.

Diagram znázorňující mezníky přechodu 1 až 4, které začínají v levém horním rohu a klesají dolů doprava, až dosáhnou pravého dolního rohu diagramu.

Kombinace barev určených dvěma ohraničujícími přechodovými zarážkami

Můžete změnit čáru, na které jsou umístěny gradientové zarážky, tím, že nastavíte vlastnosti StartPoint a EndPoint na jiné hodnoty, než jsou výchozí hodnoty (0,0) a (1,1). Změnou souřadnicových hodnot StartPointu a EndPointu můžete vytvořit vodorovné nebo svislé přechody, obrátit směr přechodu nebo zúžit rozsah přechodu tak, aby se aplikoval na menší část než celou vykreslenou oblast. Pro zhuštění přechodu nastavte hodnoty StartPoint a/nebo EndPoint na hodnotu mezi 0 a 1. Pokud například chcete vodorovný přechod, ve kterém zeslabení probíhá na levé polovině štětce a pravá strana je pevná až k vaší poslední gradientový bod barvu, zadáte StartPoint(0,0) a EndPoint(0.5,0).

Radiální gradientové štětce

RadialGradientBrush se vykresluje uvnitř elipsy, která je definována vlastnostmi Center, RadiusXa RadiusY. Barvy přechodu začínají ve středu elipsy a končí na poloměru.

Barvy paprskového přechodu jsou definovány barevnými přechody přidanými do kolekce vlastností GradientStops. Každá gradientová zastávka určuje barvu a posun podél gradientu.

Výchozí umístění původu přechodu je ve středu a lze jej odsadit s využitím vlastnosti GradientOrigin.

MappingMode definuje, zda Střed, RadiusX, RadiusY a GradientOrigin představují relativní nebo absolutní souřadnice.

Pokud je MappingMode nastaven na RelativeToBoundingBox, hodnoty X a Y tří vlastností jsou považovány za relativní vzhledem k hranicím prvku, kde (0,0) představuje levý horní a (1,1) představuje pravý dolní roh hranic prvku pro Center, RadiusXa RadiusY vlastnosti a (0,0) představuje střed pro vlastnost GradientOrigin.

Pokud je vlastnost MappingMode nastavena na Absolute, hodnoty X a Y ze tří vlastností jsou považovány za absolutní souřadnice v rámci hranic prvků.

Tento příklad vytvoří lineární přechod se čtyřmi barvami a použije ho k vykreslení Obdélník.

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Barva každého bodu mezi přechodovými zarážkami je radiálně interpolována z kombinace barev určených dvěma ohraničujícími přechodovými zarážkami. Následující obrázek zvýrazní přechodové zarážky v předchozím příkladu.

snímek obrazovky s paprskovým přechodem.

zarážky přechodu

Štětce obrázků

ImageBrush maluje oblast obrázkem, který pochází ze souboru obrázku. Nastavte vlastnost ImageSource s cestou image, která se má načíst. Zdroj obrázku obvykle pochází z položky obsahu , která je součástí prostředků vaší aplikace.

Ve výchozím nastavení ImageBrush roztáhne obrázek, aby zcela vyplnil malovanou oblast, což může způsobit zkreslení, pokud má malovaná oblast jiný poměr stran než obrázek. Toto chování můžete změnit tak, že změníte vlastnost Stretch z výchozí hodnoty Fill a nastavíte ji jako None, Uniform nebo UniformToFill.

Další příklad vytvoří ImageBrush a nastaví ImageSource na obrázek s názvem licorice.jpg, který musíte přidat jako prostředek v aplikaci. ImageBrush pak nakreslí oblast definovanou obrazcem elipsy.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Vykreslený ImageBrush.

vykreslený ImageBrush

ImageBrush a Image odkazují na zdrojový soubor obrázku pomocí identifikátoru URI (Uniform Resource Identifier), přičemž tento soubor využívá různé formáty obrázků. Tyto obrázkové zdrojové soubory jsou zadány jako identifikátory URI. Další informace o zadávání zdrojů obrázků, použitelných formátů obrázků a jejich balení v aplikaci najdete v tématu Image a ImageBrush.

Štětce a text

Pomocí štětců můžete také použít vlastnosti vykreslování u textových prvků. Například vlastnost popředí objektu TextBlock používá štětec. Na text můžete použít některý z štětců popsaných tady. Buďte ale opatrní se štětci použitými u textu, protože jakékoli pozadí může způsobit, že text bude nečitelný, pokud použijete štětce, které přetékají na pozadí. Pro čitelnost textových prvků ve většině případů použijte SolidColorBrush , pokud nechcete, aby byl textový prvek převážně dekorativní.

I když používáte plnou barvu, ujistěte se, že barva textu, kterou zvolíte, má dostatečný kontrast s barvou pozadí kontejneru rozložení textu. Důležitým aspektem přístupnosti je úroveň kontrastu mezi popředím textu a pozadím kontejneru textu.

XamlCompositionBrushBase

XamlCompositionBrushBase je základní třída používaná k vytvoření vlastních štětců, které používají CompositionBrush k malování prvků uživatelského rozhraní XAML.

To umožňuje "rozevírací" spolupráci mezi vrstvami Windows.UI.Xaml a Windows.UI.Composition, jak je popsáno v přehledu vizuální vrstvy.

Chcete-li vytvořit vlastní štětec, vytvořte novou třídu, která dědí z XamlCompositionBrushBase a implementuje požadované metody.

Toto lze použít například k aplikaci efektů na XAML UIElements pomocí CompositionEffectBrush, například GaussianBlurEffect nebo SceneLightingEffect, který řídí reflexní vlastnosti XAML UIElement, když je osvětlen XamlLight.

Příklady kódu najdete v tématu XamlCompositionBrushBase.

Štětce jako prostředky XAML

Jakýkoli štětec můžete deklarovat jako klíčovaný prostředek XAML ve slovníku prostředků XAML. Tím se usnadňuje replikace identických hodnot štětců na více prvků v uživatelském rozhraní. Hodnoty štětců se pak sdílejí a aplikují v každém případě, kdy odkazujete na zdroj štětce jako na {StaticResource} použití v XAML. To zahrnuje případy, kdy máte šablonu ovládacího prvku XAML, která odkazuje na sdílený štětec, a šablona ovládacího prvku je sama o sobě klíčovaný prostředek XAML.

Štětce v kódu

Je mnohem typické zadat štětce pomocí XAML, než je použití kódu k definování štětců. Důvodem je to, že štětce jsou obvykle definovány jako prostředky XAML a protože hodnoty štětců jsou často výstupem nástrojů návrhu nebo jinak jako součást definice uživatelského rozhraní XAML. Přestože příležitostně můžete chtít definovat štětec pomocí kódu, jsou všechny typy štětců k dispozici pro instanci kódu.

Chcete-li vytvořit SolidColorBrush v kódu, použijte konstruktor, který jako parametr přijímá Color. Předejte hodnotu, která je statickou vlastností třídy Colors , například takto:

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

Microsoft::UI::Xaml::Media::SolidColorBrush blueBrush{ Microsoft::UI::Colors::Blue() };

V případě ImageBrush použijte výchozí konstruktor a zavolejte další rozhraní API dříve než se pokusíte použít tento štětec pro vlastnost uživatelského rozhraní.

ImageSource vyžaduje BitmapImage (nikoli identifikátor URI) při definování ImageBrush pomocí kódu. Pokud je zdrojem datový proud, použijte metodu SetSourceAsync k inicializaci hodnoty. Pokud je zdrojem URI, který zahrnuje obsah ve vaší aplikaci využívající schémata ms-appx nebo ms-resource, použijte konstruktor BitmapImage, který přijímá URI. Můžete také zvážit zpracování události ImageOpened , pokud dojde k problémům s časováním načítání nebo dekódování zdroje obrázku, kde možná budete potřebovat alternativní obsah k zobrazení, dokud nebude zdroj obrázku k dispozici.

Příklady kódu najdete v tématu ImageBrush a XamlCompositionBrushBase.

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-02-25