Delen via

Penselen gebruiken om achtergronden, voorgronden en contouren te schilderen

Gebruik Brush objecten om de interieurs en contouren van XAML-vormen, tekst en besturingselementen te schilderen, zodat ze zichtbaar zijn in de gebruikersinterface van uw toepassing.

Open de WinUI 3 Gallery-app en bekijk de RadialGradientBrush in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Inleiding tot borstels

Als u een Vorm, tekst of delen van een Besturingselement wilt schilderen die op het app-canvas wordt weergegeven, stelt u de eigenschap Opvulling van de Vorm of de Achtergrond en Voorgrond eigenschappen van een Besturingselement in op een Kwast waarde.

De verschillende soorten borstels zijn:

Effen kleurborstels

Een SolidColorBrush verft een oppervlak met één enkele Kleur, zoals rood of blauw. Dit is de meest eenvoudige borstel. In XAML zijn er drie manieren om een SolidColorBrush- te definiëren en de kleur die hiermee wordt opgegeven: vooraf gedefinieerde kleurnamen, hexadecimale kleurwaarden of de syntaxis van het eigenschapselement.

Vooraf gedefinieerde kleurnamen

U kunt een vooraf gedefinieerde kleurnaam gebruiken, zoals Gele of Magenta. Er zijn 256 beschikbare benoemde kleuren. De XAML-parser converteert de kleurnaam naar een Kleur structuur met de juiste kleurkanalen. De 256 benoemde kleuren zijn gebaseerd op de X11 kleurnamen uit de CSS3-specificatie (Cascading Style Sheets, Level 3), zodat u mogelijk al bekend bent met deze lijst met benoemde kleuren als u eerder ervaring hebt met webontwikkeling of -ontwerp.

Hier volgt een voorbeeld waarmee de eigenschap Fill van een Rechthoek wordt ingesteld op de vooraf gedefinieerde kleur Rode.

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

Een weergegeven SolidColorBrush-

SolidColorBrush toegepast op een rechthoek

Als u een SolidColorBrush- definieert met behulp van code in plaats van XAML, is elke benoemde kleur beschikbaar als een statische eigenschapswaarde van de klasse Colors. Als u bijvoorbeeld een kleur waarde van een SolidColorBrush- wilt declareren om de benoemde kleur "Orchid" weer te geven, stelt u de waarde Kleur in op de statische waarde Colors.Orchid.

Hexadecimale kleurwaarden

U kunt een hexadecimale notatietekenreeks gebruiken om nauwkeurige 24-bits kleurwaarden met 8-bits alfakanaal te declareren voor een SolidColorBrush-. Twee tekens in het bereik 0 tot F definiëren elke componentwaarde en de volgorde van de componentwaarde van de hexadecimale tekenreeks is: alfakanaal (ondoorzichtigheid), rood kanaal, groen kanaal en blauw kanaal (ARGB-). De hexadecimale waarde '#FFFF0000' definieert bijvoorbeeld volledig ondoorzichtig rood (alfa="FF", red="FF", groen="00" en blauw="00").

In dit XAML-voorbeeld wordt de eigenschap Fill van een Rechthoek ingesteld op de hexadecimale waarde '#FFFF0000' en wordt een identiek resultaat weergegeven voor het gebruik van de benoemde kleur Colors.Red.

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

Syntaxis van eigenschapselement

U kunt de syntaxis van het eigenschapselement gebruiken om een SolidColorBrush-te definiëren. Deze syntaxis is uitgebreider dan de vorige methoden, maar u kunt extra eigenschapswaarden opgeven voor een element, zoals de Opacity. Voor meer informatie over de syntaxis van XAML, inclusief eigenschapselementsyntaxis, zie het XAML-overzicht en de XAML-syntaxisgids.

In de vorige voorbeelden wordt het penseel dat wordt gemaakt impliciet en automatisch gemaakt, als onderdeel van een opzettelijke XAML-taalkundige kortschrift waarmee UI-definities eenvoudig gehouden worden voor de meest voorkomende gevallen. In het volgende voorbeeld wordt een Rechthoek gecreëerd en de SolidColorBrush wordt expliciet gemaakt als een elementwaarde voor de eigenschap Rectangle.Fill. De Color van de SolidColorBrush is ingesteld op Blauw en de doorzichtigheid is ingesteld op 0,5.

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

Lineaire kleurverloopborstels

Een LinearGradientBrush schildert een gebied met een kleurovergang die langs een lijn is gedefinieerd. Deze lijn wordt de kleurovergangsasgenoemd. U geeft de kleuren van de kleurovergang en de bijbehorende locaties op langs de kleurovergangsas met behulp van GradientStop objecten. De kleurovergangsas loopt standaard vanuit de linkerbovenhoek naar de rechterbenedenhoek van het gebied dat de kwast verft, wat resulteert in een diagonale arcering.

De GradientStop is het basisonderdeel van een verloopborstel. Een kleurovergangsstop geeft aan wat de kleur van de penseel is bij een Verschuiving langs de kleurovergangsas, wanneer de penseel wordt toegepast op het te schilderen gebied.

De eigenschap Kleur specificeert de kleur van de kleurverloopstop. U kunt de kleur instellen met behulp van een vooraf gedefinieerde kleurnaam of door de hexadecimale ARGB waarden op te geven.

De eigenschap Offset van een GradientStop geeft de positie aan van elke GradientStop langs de gradiëntas. De Offset- is een dubbele die varieert van 0 tot 1. Een verschuiving van 0 plaatst de GradientStop aan het begin van de kleurovergangsas, oftewel bij het Beginpunt. Een verschuiving van 1 plaatst de GradientStop op het Eindpunt. Minimaal moet een nuttige LinearGradientBrush twee GradientStop waarden hebben, waarbij elke GradientStop- een andere Kleur moet opgeven en een andere Verschuiving tussen 0 en 1 moet hebben.

In dit voorbeeld wordt een lineaire kleurovergang met vier kleuren gemaakt en gebruikt om een rechthoek te schilderen.

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

De kleur van elk punt tussen kleurovergangspunten wordt lineair geïnterpoleerd als een combinatie van de kleur die is opgegeven door de twee begrenzende kleurovergangspunten. In de volgende afbeelding worden de kleurovergangsstops in het vorige voorbeeld gemarkeerd. De cirkels markeren de positie van de kleurovergangsstops en de stippellijn geeft de kleurovergangsas weer.

Diagram met verloopstops 1 tot 4, beginnend in de linkerbovenhoek van het diagram en schuin omlaag naar rechts totdat het de rechterbenedenhoek van het diagram bereikt.

Combinatie van kleuren die zijn opgegeven door de twee grensgradiëntstops

U kunt het punt veranderen waarop de verloopstops zijn geplaatst door de eigenschappen van het StartPoint en EndPoint in te stellen op andere waarden dan de standaardinstellingen (0,0) en (1,1). Als u de StartPoint en EndPoint coördinaatwaarden wijzigt, kunt u horizontale of verticale kleurovergangen maken, de richting van de kleurovergang omkeren of de kleurovergang verkorten om toe te passen op een kleiner bereik dan het volledige geschilderde gebied. Als u de gradiënt wilt condenseren, stelt u waarden in van StartPoint en/of EndPoint op een waarde die tussen 0 en 1 ligt. Als u bijvoorbeeld een horizontale kleurovergang wilt waarbij de vervaging zich allemaal op de linkerhelft van de kwast bevindt en de rechterkant effen is tot uw laatste -kleurovergangstop kleur, geeft u een StartPoint- van (0,0) en een EndPoint- van (0.5,0)op.

Radiaal kleurverloopborstels

Een RadialGradientBrush- wordt getekend binnen een ellips die is gedefinieerd door de eigenschappen Center, RadiusX-en RadiusY-. Kleuren voor de kleurovergang beginnen in het midden van de ellips en eindigen bij de straal.

De kleuren voor de radiale kleurovergang worden gedefinieerd door toegevoegde kleurstops aan de verzamelingseigenschap GradientStops. Elke kleurovergangsstop geeft een kleur en een verschuiving langs de kleurovergang aan.

De oorsprong van de kleurovergang staat standaard in het midden en kan worden verschoven met behulp van de eigenschap GradientOrigin.

nl-NL: MappingMode bepaalt of Center, RadiusX, RadiusYen GradientOrigin relatieve of absolute coördinaten vertegenwoordigen.

Wanneer MappingMode is ingesteld op RelativeToBoundingBox, worden de X- en Y-waarden van de drie eigenschappen behandeld als ten opzichte van de elementgrenzen, waarbij (0,0) de linkerbovenhoek en (1,1) de rechterbenedenhoek van de elementgrenzen vertegenwoordigt voor de Center-, RadiusX-en RadiusY- eigenschappen en (0,0) het midden vertegenwoordigt voor de GradientOrigin- eigenschap.

Wanneer MappingMode is ingesteld op Absolute, worden de X- en Y-waarden van de drie eigenschappen beschouwd als absolute coördinaten binnen de elementgrenzen.

In dit voorbeeld wordt een lineaire kleurovergang met vier kleuren gemaakt en gebruikt om een rechthoek te schilderen.

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

De kleur van elk punt tussen de gradiëntstops wordt radiaal geïnterpoleerd als een combinatie van de kleuren die zijn opgegeven door de twee begrenzende gradiëntstops. In de volgende afbeelding worden de kleurovergangsstops in het vorige voorbeeld gemarkeerd.

Schermopname van een radiale kleurovergang.

kleurovergang stopt

Afbeeldingborstels

Een ImageBrush schildert een gebied met een afbeelding uit een afbeeldingsbestandsbron. U stelt de eigenschap ImageSource in met het pad van de afbeelding dat moet worden geladen. Normaal gesproken is de afbeeldingsbron afkomstig van een Content item dat deel uitmaakt van de resources van je app.

Standaard strekt een ImageBrush de afbeelding uit om het geschilderde gebied volledig te vullen, waardoor de afbeelding mogelijk wordt vervormd als het geschilderde gebied een andere hoogte-breedteverhouding heeft dan de afbeelding. U kunt dit gedrag wijzigen door de eigenschap Stretch te wijzigen van de standaardwaarde van Fill en deze in te stellen als None, Uniformof UniformToFill-.

In het volgende voorbeeld wordt een ImageBrush- gemaakt en wordt de ImageSource- ingesteld op een afbeelding met de naam licorice.jpg, die u moet opnemen als een resource in de app. De ImageBrush schildert vervolgens de vorm van een ellips.

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

Een gerenderde ImageBrush.

Een weergegeven ImageBrush

ImageBrush en Image verwijzen beide naar een afbeeldingsbronbestand via een Uniform Resource Identifier (URI), waarbij dat bronbestand verschillende mogelijke afbeeldingsindelingen gebruikt. Deze afbeeldingsbronbestanden worden opgegeven als URI's. Zie Image en ImageBrushvoor meer informatie over het opgeven van afbeeldingsbronnen, de bruikbare afbeeldingsindelingen en het verpakken ervan in een app.

Penselen en tekst

U kunt ook penselen gebruiken om renderingkenmerken toe te passen op tekstelementen. De Foreground-eigenschap van TextBlock neemt bijvoorbeeld een Brush. U kunt een van de borstels die hier worden beschreven, toepassen op tekst. Wees echter voorzichtig met borstels die op tekst worden toegepast, aangezien elke achtergrond de tekst onleesbaar kan maken als u borstels gebruikt die in de achtergrond vervagen. Gebruik SolidColorBrush- voor de leesbaarheid van tekstelementen, tenzij u wilt dat het tekstelement meestal decoratief is.

Zelfs wanneer u een effen kleur gebruikt, moet u ervoor zorgen dat de tekstkleur die u kiest voldoende contrast heeft ten opzichte van de achtergrondkleur van de indelingscontainer van de tekst. Het contrastniveau tussen de achtergrond van tekst voorgrond en tekstcontainer is een toegankelijkheidsoverweging.

XamlCompositionBrushBase

XamlCompositionBrushBase is een basisklasse die wordt gebruikt om aangepaste borstels te maken die gebruikmaken van CompositionBrush- om XAML UI-elementen te schilderen.

Dit maakt "drop down" interoperabiliteit mogelijk tussen de lagen Windows.UI.Xaml en Windows.UI.Composition, zoals beschreven in het visuele laagoverzicht .

Als u een aangepaste kwast wilt maken, maakt u een nieuwe klasse die wordt overgenomen van XamlCompositionBrushBase en implementeert u de vereiste methoden.

Dit kan bijvoorbeeld worden gebruikt om effecten toe te passen op XAML UIElements met behulp van een CompositionEffectBrush, zoals een GaussianBlurEffect of een SceneLightingEffect waarmee de reflecterende eigenschappen van een XAML UIElement worden bepaald wanneer deze wordt verlicht door een XamlLight.

Zie XamlCompositionBrushBasevoor codevoorbeelden.

Borstels als XAML-resources

U kunt elke kwast declareren als een XAML-resource met een sleutel in een XAML-woordenlijst. Hierdoor kunt u eenvoudig dezelfde kwastwaarden repliceren als toegepast op meerdere elementen in een gebruikersinterface. De penselwaarden worden vervolgens gedeeld en toegepast op elk geval waarin u naar de penselresource verwijst als een gebruiksvorm van {StaticResource} in uw XAML. Dit geldt ook voor gevallen waarin u een XAML-besturingssjabloon hebt die verwijst naar de gedeelde penseel en de besturingssjabloon zelf een genummerde XAML-resource is.

Penselen in code

Het is veel gebruikelijker om borstels op te geven met behulp van XAML dan om code te gebruiken om borstels te definiëren. Dit komt doordat borstels meestal worden gedefinieerd als XAML-resources en omdat borstelwaarden vaak de uitvoer zijn van ontwerphulpprogramma's of anderszins als onderdeel van een XAML UI-definitie. Voor het geval waarin u misschien een kwast wilt definiëren met behulp van code, zijn alle Brush- typen beschikbaar voor code-instantiëring.

Als u een SolidColorBrush- in code wilt maken, gebruikt u de constructor die een parameter Color gebruikt. Geef een waarde door die een statische eigenschap is van de klasse Colors, zoals deze:

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

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

Gebruik voor ImageBrush de standaardconstructor en roep vervolgens andere API's aan voordat u die kwast gebruikt voor een ui-eigenschap.

ImageSource vereist een BitmapImage- (geen URI) wanneer u een ImageBrush- definieert met behulp van code. Als uw bron een stroom is, gebruikt u de methode SetSourceAsync om de waarde te initialiseren. Als uw bron een URI is, die inhoud bevat in uw app die gebruikmaakt van de ms-appx- of ms-resource schema's, gebruikt u de BitmapImage- constructor die een URI gebruikt. U kunt ook overwegen de gebeurtenis ImageOpened te verwerken als er tijdsgerelateerde problemen zijn met het ophalen of decoderen van de afbeeldingsbron, waarbij u mogelijk alternatieve inhoud moet weergeven totdat de afbeeldingsbron beschikbaar is.

Zie ImageBrush en XamlCompositionBrushBase voor codevoorbeelden.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Brush-API's bestaan in de naamruimten Windows.UI.Xaml.Controls en Windows.UI.Xaml.Controls .

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen, sjablonen en functies voor alle besturingselementen te verkrijgen.

WebViewBrush (alleen UWP)

Een WebViewBrush- is een speciaal type penseel dat toegang heeft tot de inhoud die normaal gesproken wordt bekeken in een WebView controletype. In plaats van de inhoud weer te geven in het rechthoekige WebView controlegebied, brengt WebViewBrush die inhoud aan op een ander element dat een eigenschap van het type Kwastheeft voor een renderoppervlak. WebViewBrush is niet geschikt voor elke penseelsituatie, maar is geschikt voor het maken van overgangen in een WebView. Zie WebViewBrushvoor meer informatie.

Als u een WebViewBrush in code maakt, gebruikt u de standaardconstructor en roept u andere API's aan voordat u probeert die kwast te gebruiken voor een ui-eigenschap. Mogelijk moet u Redraw aanroepen als u de eigenschap SourceName onlangs opnieuw hebt ingesteld of als de inhoud van de WebView ook wordt gewijzigd met code.

Zie WebViewBrush voor codevoorbeelden.

  • Last updated on