Verwenden von Pinseln zum Malen von Hintergründen, Vordergründen und Konturen

Verwenden Sie -Brush---Objekte, um das Innere und die Umrisse von XAML-Formen, Text und Steuerelementen zu färben, damit sie in der Benutzeroberfläche der Anwendung sichtbar sind.

Wichtige APIs: Brush-Klasse

Einführung in Pinsel

Wenn Sie ein -Shape, Text oder Teile eines -Steuerelements zeichnen möchten, das auf der App-Leinwand angezeigt wird, legen Sie die Eigenschaft Fill des -Shape oder die -Hintergrund- und -Vordergrund- Eigenschaften eines -Steuerelements auf einen -Brush-Wert fest.

Die verschiedenen Pinseltypen sind:

• Acrylpinsel
• SolidColorBrush
• LinearGradientBrush-
• Radialgradientpinsel
• Bildpinsel-
• WebViewBrush
• XamlCompositionBrushBase

Volltonfarbpinsel

Ein SolidColorBrush malt einen Bereich mit einer einzelnen Farbe, z. B. rot oder blau. Dies ist der einfachste Pinsel. In XAML gibt es drei Möglichkeiten, einen SolidColorBrush und die spezifizierte Farbe zu definieren: vordefinierte Farbnamen, Hexadezimalfarbwerte oder die Syntax des Eigenschaftselements.

Vordefinierte Farbnamen

Sie können einen vordefinierten Farbnamen wie Yellow oder Magentaverwenden. Es stehen 256 benannte Farben zur Verfügung. Der XAML-Parser konvertiert den Farbnamen in eine Color Struktur mit den richtigen Farbkanälen. Die 256 benannten Farben basieren auf den X11 Farbnamen aus der Cascading Style Sheets, Level 3 (CSS3)-Spezifikation, sodass Sie möglicherweise bereits mit dieser Liste der benannten Farben vertraut sind, wenn Sie bereits Erfahrung mit der Webentwicklung oder dem Entwurf haben.

Hier ist ein Beispiel, das die Eigenschaft Fill eines Rechteck- auf die vordefinierte Farbe Rotfestlegt.

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

SolidColorBrush auf ein Rechteck angewendet

Wenn Sie eine SolidColorBrush- mithilfe von Code anstelle von XAML definieren, steht jede benannte Farbe als statischer Eigenschaftswert der Colors Klasse zur Verfügung. Wenn Sie beispielsweise einen Color Wert eines SolidColorBrush deklarieren möchten, um die benannte Farbe "Orchid" darzustellen, setzen Sie den Color Wert auf den statischen Wert Colors.Orchid.

Hexadezimale Farbwerte

Sie können eine Hexadezimalformatzeichenfolge verwenden, um präzise 24-Bit-Farbwerte mit 8-Bit-Alphakanal für einen *SolidColorBrush*zu deklarieren. Zwei Zeichen im Bereich 0 bis F definieren jeden Komponentenwert, und die Reihenfolge des Komponentenwerts der hexadezimalen Zeichenfolge lautet: Alphakanal (Deckkraft), roter Kanal, grüner Kanal und blauer Kanal (ARGB). Der Hexadezimalwert "#FFFF0000" definiert beispielsweise das vollständig undurchsichtige Rot (alpha="FF", red="FF", green="00" und blue="00").

In diesem XAML-Beispiel wird die Fill Eigenschaft eines Rechtecks auf den Hexadezimalwert "#FFFF0000" festgelegt. Dies ergibt ein identisches Ergebnis wie die Verwendung der benannten Farbe Colors.Red.

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

Syntax des Eigenschaftenelements

Mit der Syntax für Eigenschaftselemente können Sie eine SolidColorBrushdefinieren. Diese Syntax ist ausführlicher als die vorherigen Methoden, Sie können jedoch zusätzliche Eigenschaftswerte für ein Element angeben, z. B. die Opacity-. Weitere Informationen zur XAML-Syntax, einschließlich Eigenschaftenelementsyntax, finden Sie in der XAML-Übersicht und im XAML-Syntaxleitfaden.

In den vorherigen Beispielen wird der zu erstellende Pinsel implizit und automatisch erstellt, als Teil einer absichtlichen XAML-Sprachkürde, mit der UI-Definitionen für die am häufigsten verwendeten Fälle einfach gehalten werden können. Im nächsten Beispiel wird ein Rechteck- definiert und der SolidColorBrush- wird explizit als Elementwert für die Rectangle.Fill--Eigenschaft verwendet. Die Color des SolidColorBrush ist auf Blau festgelegt, und die Deckkraft ist auf 0,5 festgelegt.

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

Lineare Farbverlaufpinsel

Ein LinearGradientBrush malt einen Bereich mit einem Farbverlauf, der entlang einer Linie definiert ist. Diese Linie wird als Gradientachsebezeichnet. Sie geben die Farben des Farbverlaufs und deren Positionen entlang der Farbverlaufsachse mithilfe GradientStop--Objekte an. Standardmäßig verläuft die Farbverlaufsachse von der oberen linken Ecke zur unteren rechten Ecke des Bereichs, den der Pinsel bemalt, was zu einer diagonalen Schattierung führt.

Der GradientStop- ist der grundlegende Baustein eines Farbverlaufpinsels. Ein Farbverlaufsstopp gibt an, was die Color- des Pinsels an einem Offset- entlang der Farbverlaufsachse liegt, wenn der Pinsel auf den gezeichneten Bereich angewendet wird.

Die Color-Eigenschaft des Farbverlaufsstopps gibt die Farbe des Farbverlaufsstopps an. Sie können die Farbe mithilfe eines vordefinierten Farbnamens oder durch Angeben der hexadezimalen ARGB--Werte festlegen.

Die Offset--Eigenschaft eines GradientStop- gibt die Position der einzelnen GradientStop- entlang der Farbverlaufsachse an. Der Offset ist ein Double, der zwischen 0 und 1 liegt. Ein Offset- von 0 platziert den GradientStop- am Anfang der Farbverlaufsachse, das heißt in der Nähe des StartPoint-. Ein Offset von 1 platziert den GradientStop am EndPoint. Ein nützlicher LinearGradientBrush- soll mindestens zwei GradientStop- Werte aufweisen, wobei jedes GradientStop- eine andere Farbe angibt und einen unterschiedlichen Offset zwischen 0 und 1 hat.

In diesem Beispiel wird ein linearer Farbverlauf mit vier Farben erstellt und verwendet, um ein Rechteckzu malen.

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

Die Farbe jedes Punkts zwischen den Farbverlaufsstopps wird linear als Kombination der Farben interpoliert, die von den beiden begrenzenden Farbverlaufstopps angegeben werden. In der folgenden Abbildung werden die Farbverlaufsstopps im vorherigen Beispiel hervorgehoben. Die Kreise markieren die Position der Farbverlaufsstopps, und die gestrichelte Linie zeigt die Farbverlaufsachse.

Kombination von Farben, die durch die beiden begrenzenden Farbverlaufs-Stopps angegeben werden

Sie können die Linie ändern, an der die Farbverlaufsstopps positioniert werden, indem Sie die StartPoint- und EndPoint- Eigenschaften auf andere Werte festlegen als die (0,0) und (1,1) Startstandardwerte. Indem Sie die StartPoint- und EndPoint- Koordinatenwerte ändern, können Sie horizontale oder vertikale Farbverläufe erstellen, die Farbverlaufsrichtung umkehren oder den Farbverlaufsbereich verkleinern, sodass er auf einen kleineren Bereich als den gesamten bemalten Bereich angewendet wird. Um den Farbverlauf zu verdichten, legen Sie Werte von StartPoint und/oder EndPoint so fest, dass sie zwischen den Werten 0 und 1 liegen. Wenn Sie beispielsweise einen horizontalen Farbverlauf wünschen, bei dem das gesamte Ausblenden auf der linken Hälfte des Pinsels erfolgt und die rechte Seite bis zu Ihrer letzten GradientStop Farbe einfarbig ist, geben Sie einen StartPoint- von (0,0) und einen EndPoint- von (0.5,0)an.

Verwenden Sie Tools, um Farbverläufe zu erstellen

Nachdem Sie nun wissen, wie lineare Farbverläufe funktionieren, können Sie Visual Studio oder Blend verwenden, um die Erstellung dieser Farbverläufe zu vereinfachen. Um einen Farbverlauf zu erstellen, wählen Sie das Objekt aus, auf das Sie einen Farbverlauf auf die Entwurfsoberfläche oder in der XAML-Ansicht anwenden möchten. Erweitern Sie Pinsel-; und wählen Sie die Registerkarte Linearen Farbverlauf aus.

Erstellen eines linearen Farbverlaufs in Visual Studio

Jetzt können Sie die Farben der Farbverlaufssteuerungspunkte ändern und ihre Positionen mithilfe der Leiste am unteren Rand verschieben. Sie können auch neue Verlaufsstopps hinzufügen, indem Sie auf die Leiste klicken und sie entfernen, indem Sie die Stopps aus der Leiste herausziehen (siehe nächster Screenshot).

Schieberegler zur Einstellung des Farbverlaufs

Pinsel für radiale Farbverläufe

Ein RadialGradientBrush wird in einer Ellipse gezeichnet, die durch die Eigenschaften Center, RadiusXund RadiusY definiert wird. Farben für den Farbverlauf beginnen im Zentrum der Ellipse und enden am Radius.

Die Farben für den radialen Farbverlauf werden durch Farbstopps definiert, die der GradientStops-Auflistungseigenschaft hinzugefügt werden. Jeder Farbverlaufsstopp gibt eine Farbe und einen Offset entlang des Farbverlaufs an.

Der Farbverlaufsursprung wird standardmäßig zentriert und kann mithilfe der eigenschaft GradientOrigin versetzt werden.

MappingMode definiert, ob Center, RadiusX, RadiusYund GradientOrigin relative oder absolute Koordinaten darstellen.

Wenn MappingMode- auf RelativeToBoundingBoxfestgelegt ist, werden die X- und Y-Werte der drei Eigenschaften als relativ zu den Elementgrenzen behandelt, wobei (0,0) die obere linke und (1,1) die untere rechte Ecke des Elements für die Eigenschaften Center-, RadiusX-und RadiusY- darstellt, und (0,0) die Mitte für die Eigenschaft GradientOrigin- repräsentiert.

Wenn MappingMode auf Absolutefestgelegt ist, werden die X- und Y-Werte dieser drei Eigenschaften als absolute Koordinaten innerhalb der Elementgrenzen behandelt.

In diesem Beispiel wird ein linearer Farbverlauf mit vier Farben erstellt und verwendet, um ein Rechteckzu malen.

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

Die Farbe jedes Punkts zwischen Farbverlaufspunkten wird radial interpoliert als Kombination der Farben, die von den beiden begrenzenden Farbverlaufspunkten angegeben werden. In der folgenden Abbildung werden die Farbverlaufsstopps im vorherigen Beispiel hervorgehoben.

Farbverlauf stoppt

Bildpinsel

Ein ImageBrush malt einen Bereich mit einem Bild, wobei das Bild aus einer Bilddateiquelle stammt. Sie legen die ImageSource-Eigenschaft mit dem Pfad des zu ladenden Bilds fest. In der Regel stammt die Bildquelle aus einem Inhalts- Element, das Teil der Ressourcen Ihrer App ist.

Standardmäßig streckt ein ImageBrush sein Bild, um den bemalten Bereich komplett auszufüllen, was das Bild möglicherweise verzerrt, wenn der bemalte Bereich ein anderes Seitenverhältnis als das Bild hat. Sie können dieses Verhalten ändern, indem Sie die Eigenschaft Stretch von ihrem Standardwert Fill auf None, Uniformoder UniformToFillfestlegen.

Im nächsten Beispiel wird eine ImageBrush- erstellt und die ImageSource- auf ein Bild mit dem Namen licorice.jpgfestgelegt, das Sie als Ressource in die App einschließen müssen. Der ImageBrush malt dann den Bereich, der durch eine Ellipse-Form definiert ist.

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

Ein gerenderter ImageBrush

ImageBrush- und Image- verweisen beide auf eine Bildquelldatei mittels eines Uniform Resource Identifier (URI), wobei diese Bildquelldatei mehrere mögliche Bildformate verwendet. Diese Bildquelldateien werden als URIs angegeben. Weitere Informationen zum Angeben von Bildquellen, die verwendbaren Bildformate und wie man sie in einer App packt, finden Sie unter Image und ImageBrush.

Pinsel und Text

Sie können auch Pinsel verwenden, um Renderingmerkmale auf Textelemente anzuwenden. Beispielsweise übernimmt die Foreground--Eigenschaft von TextBlock- eine Brush-. Sie können alle hier beschriebenen Pinsel auf Text anwenden. Achten Sie jedoch darauf, Pinsel auf Text anzuwenden, da der Hintergrund den Text unleserlich machen kann, wenn Sie Pinsel verwenden, die in den Hintergrund verlaufen. Verwenden Sie SolidColorBrush- für die Lesbarkeit von Textelementen in den meisten Fällen, es sei denn, Sie möchten, dass das Textelement hauptsächlich dekorativ ist.

Auch wenn Sie eine Volltonfarbe verwenden, stellen Sie sicher, dass die von Ihnen ausgewählte Textfarbe ausreichend Kontrast zur Hintergrundfarbe des Layoutcontainers des Texts aufweist. Die Kontrastebene zwischen Text-Vordergrund- und Textcontainerhintergrund ist eine Barrierefreiheitsüberlegung.

WebViewBrush

Ein WebViewBrush- ist ein spezieller Pinsel, der auf den Inhalt zugreifen kann, der normalerweise in einem WebView--Steuerelement dargestellt wird. Anstatt den Inhalt im rechteckigen WebView--Steuerelementbereich zu rendern, überträgt WebViewBrush diesen Inhalt auf ein anderes Element, das eine Brush-Type-Eigenschaft als Renderoberfläche besitzt. WebViewBrush- ist nicht für jedes Pinselszenario geeignet, ist aber für Übergänge einer WebView-nützlich. Weitere Informationen finden Sie unter WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase ist eine Basisklasse zur Erstellung benutzerdefinierter Bürsten, die CompositionBrush verwenden, um XAML-UI-Elemente darzustellen.

Dies ermöglicht die "Dropdown"-Interoperabilität zwischen den Ebenen "Windows.UI.Xaml" und "Windows.UI.Composition", wie in der Visual Layer-Übersichtbeschrieben.

Um einen benutzerdefinierten Pinsel zu erstellen, erstellen Sie eine neue Klasse, die von XamlCompositionBrushBase erbt, und implementiert die erforderlichen Methoden.

Dies kann beispielsweise verwendet werden, um Effekte auf XAML-UIElemente mithilfe eines CompositionEffectBrush-anzuwenden, wie zum Beispiel einen GaussianBlurEffect- oder einen SceneLightingEffect-. Diese Effekte steuern die reflektierenden Eigenschaften eines XAML-UIElements, wenn es von einem XamlLight-beleuchtet wird.

Codebeispiele finden Sie unter XamlCompositionBrushBase.

Pinsel als XAML-Ressourcen

Sie können jeden Pinsel als eine XAML-Ressource mit einem Schlüssel in einem XAML-Ressourcenwörterbuch deklarieren. Dies erleichtert das Replizieren der gleichen Pinselwerte, wie sie auf mehrere Elemente in einer Benutzeroberfläche angewendet werden. Die Pinselwerte werden dann freigegeben und in jedem Fall angewendet, in dem Sie auf die Pinselressource als {StaticResource}-Verwendung in Ihrem XAML verweisen. Dies umfasst Fälle, in denen Sie über eine XAML-Steuerelementvorlage verfügen, die auf den gemeinsamen Pinsel verweist, und die Steuerelementvorlage selbst eine XAML-Ressource mit einem Schlüssel ist.

Pinsel im Code

Es ist viel typischer, Pinsel mit XAML anzugeben, als Code zum Definieren von Pinsel zu verwenden. Dies liegt daran, dass Pinsel in der Regel als XAML-Ressourcen definiert werden und Pinselwerte häufig die Ausgabe von Entwurfstools darstellen oder anderweitig Teil einer XAML-UI-Definition sind. Dennoch sind für gelegentliche Fälle, in denen Sie einen Pinsel mithilfe von Code definieren möchten, alle Brush- Typen für die Codeinstanziierung verfügbar.

Um im Code eine SolidColorBrush zu erstellen, verwenden Sie den Konstruktor, der einen Color-Parameter akzeptiert. Übergeben Sie einen Wert, der eine statische Eigenschaft der Colors Klasse ist, wie folgt:

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

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

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

Verwenden Sie für WebViewBrush und ImageBrushden Standardkonstruktor und rufen Sie dann andere APIs auf, bevor Sie versuchen, diesen Brush für eine UI-Eigenschaft zu verwenden.

• ImageSource- erfordert eine BitmapImage- (keine URI), wenn Sie einen ImageBrush- mithilfe von Code definieren. Wenn die Quelle ein Datenstrom ist, verwenden Sie die SetSourceAsync- Methode, um den Wert zu initialisieren. Wenn Ihre Quelle eine URI ist, die Inhalte in Ihrer App enthält, die die Schemas ms-appx oder ms-resource verwenden, verwenden Sie den BitmapImage-Konstruktor, der eine URI verwendet. Es könnte sinnvoll sein, das ImageOpened-Ereignis zu behandeln, falls es zeitliche Probleme beim Abrufen oder Decodieren der Bildquelle gibt und Sie möglicherweise alternative Inhalte anzeigen müssen, bis die Bildquelle verfügbar ist.
• Für WebViewBrush- müssen Sie möglicherweise Redraw- aufrufen, wenn Sie die eigenschaft SourceName kürzlich zurückgesetzt haben oder wenn der Inhalt der WebView- ebenfalls mit Code geändert wird.

Codebeispiele finden Sie unter WebViewBrush-, ImageBrush-und XamlCompositionBrushBase-.