Háttér, előtér és körvonal festése ecsetekkel

Az Ecset objektumokkal xAML-alakzatok, szövegek és vezérlők belső tereit és körvonalait festheti, így azok láthatók lesznek az alkalmazás felhasználói felületén.

• Fontos API-k: Ecsetosztály, SolidColorBrush osztály, RadialGradientBrush osztály, ImageBrush osztály

Nyissa meg a WinUI 3 Gallery alkalmazást, és tekintse meg működés közben a RadialGradientBrush alkalmazást

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Az ecsetek bemutatása

Ha ki akarja színezni a Alakzat, szöveget vagy az alkalmazásvásznon megjelenített Vezérlőelem részeit, állítsa be a Kitöltés tulajdonságot a Alakzat esetében, illetve a Háttér és Előtér tulajdonságokat a Vezérlő esetében Ecset értékre.

A különböző kefék a következők:

• AkrilBrush
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• XamlCompositionBrushBase

Egyszínű ecsetek

A SolidColorBrush egyetlen színfest, például piros vagy kék színben. Ez a legalapvetőbb ecset. Az XAML-ben háromféleképpen definiálhat egy SolidColorBrush és az általa megadott színt: előre definiált színneveket, hexadecimális színértékeket vagy a tulajdonságelem szintaxisát.

Előre definiált színnevek

Használhat előre definiált színnevet, például Sárga vagy Magenta. 256 elnevezett szín érhető el. Az XAML-elemző a színnevet Szín struktúrává alakítja a megfelelő színcsatornákkal. A 256 elnevezett szín a X11 színneveken alapul a 3. szint (CSS3) kaszkádolt stíluslapjaiból, így már ismerős lehet a névvel ellátott színek listája, ha már jártas a webfejlesztésben vagy a tervezésben.

Íme egy példa, amely egy TéglalapKitöltés tulajdonságát az előre definiált színre Pirosállítja be.

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

SolidColorBrush alkalmazva egy téglalapra

Ha XAML helyett kóddal definiál egy SolidColorBrush, az egyes elnevezett színek a Színek osztály statikus tulajdonságértékeként érhetők el. Ha például egy SolidColorBrushSzín értékét szeretné deklarálni az "Orchid" nevű szín megjelenítéséhez, állítsa a Szín értéket a Colors.Orchidstatikus értékre.

Hexadecimális színértékek

Hexadecimális formátumú sztring használatával pontos 24 bites színértékeket deklarálhat 8 bites alfa csatornával egy SolidColorBrush-hoz ,,. A 0–F tartomány két karaktere határozza meg az egyes összetevők értékét, és a hexadecimális sztring összetevőérték-sorrendje a következő: alfa csatorna (átlátszatlanság), vörös csatorna, zöld csatorna és kék csatorna (ARGB). A "#FFFF0000" hexadecimális érték például teljesen átlátszatlan vöröset (alpha="FF", red="FF", green="00" és blue="00") határoz meg.

Ez az XAML-példa a RectangleFill tulajdonságát a "#FFFF0000" hexadecimális értékre állítja, és azonos eredményt ad, mint a névvel ellátott Colors.Red szín használata.

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

Tulajdonságelem szintaxisa

A tulajdonságelem-szintaxis használatával meghatározhat egy SolidColorBrush. Ez a szintaxis részletesebb, mint az előző metódusok, de további tulajdonságértékeket is megadhat egy elemen, például az Opacitás. Az XAML szintaxisáról, beleértve a tulajdonságelem-szintaxist is, további információért olvassa el a XAML áttekintés és a XAML szintaxis útmutatócímű részt.

Az előző példákban a létrehozott ecset implicit módon és automatikusan jön létre egy szándékos XAML-nyelv rövidítés részeként, amely segít a felhasználói felület definícióinak egyszerűségében a leggyakoribb esetekben. A következő példa létrehoz egy téglalapot, és kifejezetten létrehozza a SolidColorBrush-t elemértékként a Rectangle.Fill tulajdonsághoz. A SolidColorBrushszíne kékre van állítva, az áttetszősége pedig 0,5 értékre van állítva.

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

Lineáris átmenetes ecsetek

Egy LinearGradientBrush egy vonal mentén definiált színátmenettel fest egy területet. Ezt a vonalat színátmeneti tengelyneknevezik. A színátmenet színeit és azok helyét a színátmeneti tengely mentén GradientStop objektumokkal adhatja meg. Alapértelmezés szerint a színátmeneti tengely a bal felső saroktól a ecset által festett terület jobb alsó sarkáig fut, ami átlós árnyékolást eredményez.

A GradientStop a színátmenet-ecset alapvető építőeleme. A színátmeneti pont meghatározza, hogy az ecset színe milyen eltolással található a színátmenet tengelyén, amikor az ecsetet a festett területre alkalmazzák.

A színátmeneti leállítás Szín tulajdonsága határozza meg a színátmeneti leállítás színét. A színt előre definiált színnévvel vagy hexadecimális ARGB értékekkel állíthatja be.

Egy GradientStopEltolás tulajdonsága határozza meg az egyes GradientStop helyét a színátmenet tengelye mentén. A Eltolás egy 0 és 1 közötti dupla. A 0 eltolás a GradientStop a színátmeneti tengely elejére helyezi, más szóval a StartPointközelében. Az 1-es eltolás a GradientStop-t az EndPoint-hez helyezi. Legalább egy hasznos LinearGradientBrush-nak két GradientStop értékkel kell rendelkeznie, ahol minden egyes GradientStop más Színt ad meg, és 0 és 1 közötti eltéréssel rendelkezik.

Ez a példa négy színnel hoz létre lineáris színátmenetet, és azt egy Téglalap megfestésére használja.

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

A színátmeneti végpontok közötti pontok színe lineárisan interpolálva van a két határoló színátmeneti végpont által megadott szín kombinációjaként. Az alábbi képen az előző példában szereplő színátmeneti végpontok jelennek meg. A körök jelölik a színátmeneti végpontok pozícióját, a szaggatott vonal pedig a színátmeneti tengelyt.

A két határoló színátmenet által meghatározott színek kombinációja

A színátmeneti végpontok elhelyezésének vonalát úgy módosíthatja, hogy a StartPoint és EndPoint tulajdonságai eltérnek a (0,0) és (1,1) kezdő alapértelmezett értékétől. A StartPoint és EndPoint- koordinátaértékek módosításával vízszintes vagy függőleges színátmeneteket hozhat létre, megfordíthatja a színátmenet irányát, vagy a színátmenetes szórást a teljes festett területnél kisebb tartományra alkalmazhatja. A színátmenet kondenzálásához StartPoint- és/vagy EndPoint- értékeit 0 és 1 közötti értékre kell állítania. Ha például vízszintes színátmenetet szeretne, ahol az elhalványulás az ecset bal oldalán történik, és a jobb oldalon az utolsó GradientStop színe szilárd, akkor meg kell adnia egy és egy (0,0).

Radiális gradiens ecsetek

A RadialGradientBrush egy olyan ellipszisen belül van megrajzolva, amelyet a Center, a RadiusXés a RadiusY tulajdonságok határoznak meg. A színátmenet színei az ellipszis középpontjában kezdődnek, és a sugár irányában végződnek.

A radiális színátmenet színeit a GradientStops gyűjteménytulajdonsághoz hozzáadott színmegállók határozzák meg. Minden színátmeneti leállítás színt és eltolást határoz meg a színátmenet mentén.

A színátmenet eredete alapértelmezés szerint középre van kapcsolva, és a GradientOrigin tulajdonság használatával eltolható.

MappingMode meghatározza, hogy Center, RadiusX, RadiusYés GradientOrigin relatív vagy abszolút koordinátákat jelölnek-e.

Ha MappingModeRelativeToBoundingBoxértékre van állítva, a három tulajdonság X és Y értékei az elemhatárokhoz viszonyítva lesznek kezelve, ahol (0,0) a bal felső, a (1,1) pedig a Centerelemhatárainak jobb alsó sarkát, RadiusX, RadiusY tulajdonságokat, (0,0) pedig a GradientOrigin tulajdonság középértékét jelöli.

Ha MappingModeAbsoluteértékre van állítva, a három tulajdonság X és Y értékei az elemhatárokon belüli abszolút koordinátákként lesznek kezelve.

Ez a példa négy színnel hoz létre lineáris színátmenetet, és azt egy Téglalap megfestésére használja.

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

A színátmeneti végpontok közötti pontok színét a két határoló színátmeneti végpont által megadott szín kombinációjaként radiálisan interpolálja. Az alábbi képen az előző példában szereplő színátmeneti végpontok jelennek meg.

Színátmenet leáll

Kép ecsetek

Az ImageBrush egy képet tartalmazó területet fest, és a kép egy képfájl forrásából származik. Beállíthatja a ImageSource tulajdonságot a betöltendő kép elérési útjával. A kép forrása általában egy Tartalom elemből származik, amely az alkalmazás erőforrásainak része.

Alapértelmezés szerint egy ImageBrush kinyújtja a képet, hogy teljesen kitöltse a festett területet, ami torzíthatja a képet, ha a festett terület méretaránya eltér a képétől. Ezt a viselkedést úgy módosíthatja, hogy a Stretch tulajdonságot a Kitöltés alapértelmezett értékéről módosítja, és Nincs, Egységesvagy UniformToFillértékre állítja.

A következő példa egy ImageBrush-t hoz létre, és forrásként beállítja a ImageSource-t egy licorice.jpgnevű képre, amelyet erőforrásként az alkalmazáshoz mellékelnie kell. A ImageBrush ezután egy Ellipszis alakzat által meghatározott területet fest.

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

Megjelenített ImageBrush

ImageBrush és Kép egyaránt hivatkoznak egy képforrásfájlra egységes erőforrás-azonosító (URI) alapján, ahol a képforrásfájl több lehetséges képformátumot is használ. Ezek a képforrásfájlok URI-kként vannak megadva. A képforrások, a használható képformátumok megadásáról és az alkalmazásokba való csomagolásukról további információt a Kép és ImageBrushcímű témakörben talál.

Ecsetek és szöveg

Az ecsetekkel renderelési jellemzőket is alkalmazhat a szövegelemekre. Például a TextBlockElőtér tulajdonsága egy Ecsetértéket vesz fel. Az itt leírt ecsetek bármelyikét alkalmazhatja a szövegre. Ügyeljen azonban a szövegre alkalmazott kefékre, mert bármely háttér olvashatatlanná teheti a szöveget, ha olyan keféket használ, amelyek a háttérbe véreznek. A legtöbb esetben SolidColorBrush használható a szövegelemek olvashatóságához, kivéve, ha azt szeretné, hogy a szövegelem többnyire dekoratív legyen.

Még akkor is, ha egyszínű színt használ, győződjön meg arról, hogy a szöveg színének megfelelő kontrasztja van a szöveg elrendezéstárolójának háttérszínével. A szöveg előterének és a szövegtároló hátterének kontrasztja akadálymentességi szempont.

XamlCompositionBrushBase

XamlCompositionBrushBase olyan egyéni kefék létrehozásához használt alaposztály, amelyek az XAML felhasználói felület elemeinek festéséhez CompositionBrush használnak.

Ez lehetővé teszi a "legördülő" interoperációt a Windows.UI.Xaml és a Windows.UI.Composition rétegek között a Visual Layer áttekintési.

Egyéni ecset létrehozásához hozzon létre egy új osztályt, amely az XamlCompositionBrushBase-től örököl, és implementálja a szükséges metódusokat.

Például ez használható effektusok alkalmazására XAML UIElements objektumokra egy CompositionEffectBrushsegítségével, mint például egy GaussianBlurEffect vagy egy SceneLightingEffect, amely szabályozza az XAML UIElement visszaverő tulajdonságait, amikor egy XamlLightmegvilágítja.

A kód példákért lásd XamlCompositionBrushBase.

Ecsetek XAML-erőforrásokként

Az XAML-erőforrásszótárban bármely ecsetet kulcsolt XAML-erőforrásként deklarálhat. Ezáltal könnyedén lehet másolni a felhasználói felület több elemére alkalmazott ecsetértékeket. A rendszer ezután megosztja és alkalmazza az ecsetértékeket minden olyan esetre, ahol hivatkozik az ecseterőforrásra {StaticResource} használva van az XAML-ben. Ez magában foglalja azokat az eseteket, amikor egy XAML-vezérlősablon hivatkozik a megosztott ecsetre, és a vezérlősablon maga egy kulcsos XAML-erőforrás.

Ecsetek a kódban

Sokkal jellemzőbb az ecsetek XAML használatával történő megadása, mint a kód használata az ecsetek definiálásához. Ennek az az oka, hogy az ecsetek általában XAML-erőforrásokként vannak definiálva, és mivel az kefeértékek gyakran a tervezőeszközök kimenetei, vagy más módon egy XAML felhasználói felület definíciójának részeként. Az olyan eseteknél, amikor esetleg kóddal szeretne definiálni egy kefét, az összes Ecset típus elérhető a kód példányosításához.

Ha SolidColorBrush szeretne létrehozni a kódban, használja a Color paramétert használó konstruktort. Adjon át egy értéket, amely a Színek osztály statikus tulajdonsága, például:

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

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

Az ImageBrush esetében használja az alapértelmezett konstruktort, majd hívja meg a többi API-t, mielőtt megkísérli használni az ecsetet egy felhasználói felületi tulajdonsághoz.

Amikor kód segítségével egy ImageBrush-t definiál, szükség van egy BitmapImage-re (nem URI-ként), amely az ImageSource-höz szükséges. Ha a forrás stream, használja a SetSourceAsync metódust az érték inicializálásához. Ha a forrás egy URI, amely olyan tartalmat tartalmaz az alkalmazásban, amely az ms-appx vagy ms-resource sémákat használja, használja aBitmapImage konstruktort, amely URI-t fogad. Érdemes lehet kezelni a ImageOpened eseményt is, ha a képforrás beolvasásával vagy dekódolásával kapcsolatos időzítési problémák merülnek fel, ahol alternatív tartalomra lehet szükség a kép forrásának rendelkezésre állásáig.

Példakódokért lásd: ImageBrush és XamlCompositionBrushBase.