Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Utilizza gli oggetti Brush per applicare la pittura sugli interni e i contorni delle forme, del testo e dei controlli XAML, per renderli visibili nell'interfaccia utente dell'applicazione.
API importanti: classe Pennello
Introduzione ai pennelli
Per disegnare una
I diversi tipi di pennelli sono:
- PennelloAcrilico
- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush
- ImageBrush
- WebViewBrush
- XamlCompositionBrushBase
Pennelli a tinta unita
Un SolidColorBrush disegna un'area con un solo Colore, ad esempio rosso o blu. Questo è il pennello più semplice. In XAML sono disponibili tre modi per definire un SolidColorBrush e il colore che specifica: nomi di colore predefiniti, valori di colore esadecimali o sintassi dell'elemento Property.
Nomi di colore predefiniti
È possibile usare un nome di colore predefinito, ad esempio Giallo o Magenta. Sono disponibili 256 colori con nome. Il parser XAML converte il nome del colore in una struttura di colore con i canali del colore corretti. I 256 colori denominati si basano sui nomi di colore X11 della specifica Cascading Style Sheets, Level 3 (CSS3), quindi potresti già avere familiarità con questo elenco di colori se hai esperienza precedente nello sviluppo web o nel design.
Di seguito è riportato un esempio che imposta la proprietà Fill
<Rectangle Width="100" Height="100" Fill="Red" />
SolidColorBrush applicato a un Rettangolo
Se definisci un oggetto SolidColorBrush usando codice anziché XAML, ogni colore denominato è disponibile come valore della proprietà statica della classe Colors . Ad esempio, per dichiarare un valore
Valori di colore esadecimali
È possibile usare una stringa di formato esadecimale per dichiarare valori di colore a 24 bit precisi con canale alfa a 8 bit per un oggetto SolidColorBrush. Due caratteri nell'intervallo da 0 a F definiscono ogni valore del componente e l'ordine dei valori del componente della stringa esadecimale è: canale alfa (opacità), canale rosso, canale verde e canale blu (ARGB). Ad esempio, il valore esadecimale "#FFFF0000" definisce il rosso completamente opaco (alpha="FF", red="FF", green="00" e blue="00").
Questo esempio XAML imposta la proprietà
<StackPanel>
<Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>
Sintassi degli elementi di proprietà
È possibile usare la sintassi degli elementi di proprietà per definire un oggetto SolidColorBrush. Questa sintassi è più dettagliata rispetto ai metodi precedenti, ma è possibile specificare valori di proprietà aggiuntivi in un elemento, ad esempio Opacity. Per ulteriori informazioni sulla sintassi XAML, inclusa la sintassi degli elementi di proprietà, consulta la panoramica XAML e guida alla sintassi XAML.
Negli esempi precedenti il pennello creato viene creato in modo implicito e automatico, come parte di una sintassi abbreviata del linguaggio XAML intenzionale che consente di mantenere semplici le definizioni dell'interfaccia utente per i casi più comuni. L'esempio seguente crea un
<Rectangle Width="200" Height="150">
<Rectangle.Fill>
<SolidColorBrush Color="Blue" Opacity="0.5" />
</Rectangle.Fill>
</Rectangle>
Pennelli gradiente lineare
Un LinearGradientBrush pittura un'area con un gradiente definito lungo una linea. Questa linea è chiamata asse della gradiente . Tu specifichi i colori della sfumatura e le loro posizioni lungo l'asse della sfumatura usando oggetti GradientStop . Per impostazione predefinita, l'asse del gradiente si estende dall'angolo superiore sinistro all'angolo inferiore destro dell'area che il pennello dipinge, creando un'ombreggiatura diagonale.
Il GradientStop è l'elemento fondamentale di un pennello a gradiente. Un punto di arresto della sfumatura specifica quale colore del pennello si trova in corrispondenza di un offset lungo l'asse delle sfumature, quando il pennello viene applicato all'area da pitturare.
La proprietà Color del punto della sfumatura specifica il colore del punto della sfumatura. È possibile impostare il colore usando un nome di colore predefinito o specificando i valori ARGB esadecimali.
La proprietà Offset di un GradientStop specifica la posizione di ogni GradientStop lungo l'asse del gradiente. Il offset
In questo esempio viene creata una sfumatura lineare con quattro colori e viene usata per disegnare un rettangolo .
<!-- 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>
Il colore di ogni punto tra le fermate del gradiente viene interpolato linearmente come combinazione del colore specificato dalle due fermate del gradiente di delimitazione. L'immagine seguente evidenzia i punti di arresto del gradiente nell'esempio precedente. I cerchi contrassegnano la posizione delle interruzioni della sfumatura e la linea tratteggiata mostra l'asse della sfumatura.
Combinazione di colori specificata dai due limiti dei gradienti
È possibile modificare la linea dove sono posizionati gli stop del gradiente impostando le proprietà StartPoint e EndPoint con valori diversi dai valori predefiniti di inizio (0,0) e (1,1). Modificando i valori delle coordinate StartPoint e EndPoint , è possibile creare sfumature orizzontali o verticali, invertire la direzione della sfumatura o condensare la diffusione della sfumatura da applicare a un intervallo inferiore rispetto all'area disegnata completa. Per condensare la sfumatura, impostare i valori di StartPoint e/o EndPoint in modo che siano compresi tra i valori 0 e 1. Se, ad esempio, si desidera una sfumatura orizzontale dove la sfumatura si verifica sulla metà sinistra del pennello e la metà destra è uniforme fino all'ultimo colore GradientStop, è necessario specificare un StartPoint di (0,0) e un EndPoint di (0.5,0).
Usare gli strumenti per creare sfumature
Ora che si conosce il funzionamento delle sfumature lineari, è possibile usare Visual Studio o Blend per semplificare la creazione di queste sfumature. Per creare una sfumatura, selezionare l'oggetto a cui applicare una sfumatura nell'area di progettazione o nella visualizzazione XAML. Espandere Pennello e selezionare la scheda sfumatura lineare.
Creazione di una sfumatura lineare in Visual Studio
Ora puoi modificare i colori dei punti di interruzione della sfumatura e spostarne le posizioni usando la barra in basso. È anche possibile aggiungere nuovi punti di interruzione della sfumatura facendo clic sulla barra e rimuovendoli trascinandoli fuori dalla barra (consultare lo screenshot successivo).
Cursore impostazione sfumatura
Pennelli per gradienti radiali
Un RadialGradientBrush viene disegnato all'interno di un'ellisse definita dalle proprietà Center, RadiusXe RadiusY. I colori per la sfumatura iniziano al centro dell'ellisse e terminano lungo il raggio.
I colori per la sfumatura radiale vengono definiti da interruzioni di colore aggiunte alla proprietà della raccolta GradientStops. Ogni punto di sfumatura specifica un colore e una posizione lungo la sfumatura.
L'origine della sfumatura viene impostata per impostazione predefinita al centro e può essere spostata usando la proprietà GradientOrigin.
MappingMode definisce se Center, RadiusX, RadiusY e GradientOrigin rappresentano coordinate relative o assolute.
Quando
Quando MappingMode è impostato su Absolute, i valori X e Y delle tre proprietà vengono considerati coordinate assolute all'interno dei limiti dell'elemento.
In questo esempio viene creata una sfumatura lineare con quattro colori e viene usata per disegnare un rettangolo .
<!-- 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>
Il colore di ogni punto tra le interruzioni del gradiente viene interpolato radialmente come combinazione del colore specificato dalle due interruzioni del gradiente che delimitano. L'immagine seguente evidenzia i punti di arresto del gradiente nell'esempio precedente.
Punti di arresto del gradiente
Pennelli per immagini
Un ImageBrush disegna un'area con un'immagine, con l'immagine da disegnare proveniente da un'origine file di immagine. Si imposta la proprietà ImageSource con il percorso dell'immagine da caricare. In genere, la sorgente dell'immagine proviene da un elemento Contenuto che appartiene alle risorse dell'app.
Per impostazione predefinita, un ImageBrush estende l'immagine per riempire completamente l'area dipinta, distorcendo l'immagine se l'area dipinta ha proporzioni diverse rispetto all'immagine. È possibile cambiare questo comportamento modificando la proprietà Stretch dal valore predefinito Fill e impostandola su None, Uniformo UniformToFill.
L'esempio seguente crea un ImageBrush e imposta il ImageSource su un'immagine chiamata licorice.jpg, che è necessario includere come risorsa nell'app. ImageBrush disegna quindi l'area definita da una forma Ellipse.
<Ellipse Height="200" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="licorice.jpg" />
</Ellipse.Fill>
</Ellipse>
Un oggetto ImageBrush renderizzato
ImageBrush e Image fanno entrambi riferimento a un file di origine dell'immagine in base all'URI (Uniform Resource Identifier), in cui tale file di origine dell'immagine usa diversi formati di immagine possibili. Questi file di origine dell'immagine vengono specificati come URI. Per altre info su come specificare le origini delle immagini, i formati di immagine utilizzabili e la creazione di pacchetti in un'app, vedi Image e ImageBrush.
Pennelli e testo
È anche possibile usare i pennelli per applicare caratteristiche di rendering agli elementi di testo. Ad esempio, la proprietà Foreground di TextBlock accetta un Brush. È possibile applicare uno dei pennelli descritti qui al testo. Tuttavia, prestare attenzione ai pennelli applicati al testo, poiché qualsiasi sfondo potrebbe rendere il testo illeggibile se si usano pennelli che si confondono con lo sfondo. Utilizzare SolidColorBrush per la leggibilità degli elementi di testo nella maggior parte dei casi, a meno che non si voglia che l'elemento di testo sia principalmente decorativo.
Anche quando si usa un colore a tinta unita, assicurarsi che il colore del testo scelto abbia un contrasto sufficiente rispetto al colore di sfondo del contenitore di layout del testo. Il livello di contrasto tra il primo piano del testo e lo sfondo del contenitore di testo è una considerazione per l'accessibilità.
WebViewBrush
Un WebViewBrush è un tipo speciale di pennello che può accedere al contenuto normalmente visualizzato in un controllo WebView. Anziché eseguire il rendering del contenuto nell'area di controllo rettangolare WebView, WebViewBrush dipinge tale contenuto su un altro elemento che dispone di una proprietà di tipo Brushper una superficie di rendering. WebViewBrush non è appropriato per ogni scenario di pennello, ma è utile per le transizioni di un WebView. Per altre info, vedi WebViewBrush.
XamlCompositionBrushBase
XamlCompositionBrushBase è una classe di base usata per creare pennelli personalizzati che usano CompositionBrush per disegnare elementi dell'interfaccia utente XAML.
Ciò consente l'interoperabilità "a discesa" tra i livelli Windows.UI.Xaml e Windows.UI.Composition, come descritto nella panoramica del livello visivo .
Per creare un pennello personalizzato, creare una nuova classe che eredita da XamlCompositionBrushBase e implementa i metodi necessari.
Ad esempio, questo può essere usato per applicare effetti a XAML UIElements, utilizzando un CompositionEffectBrush, come un GaussianBlurEffect o un SceneLightingEffect che controlla le proprietà riflettenti di un UIElement XAML quando viene illuminato da un XamlLight.
Per esempi di codice, vedi XamlCompositionBrushBase.
Pennelli come risorse XAML
In un dizionario delle risorse XAML, puoi dichiarare qualsiasi pennello come risorsa XAML con chiave. In questo modo è facile replicare gli stessi valori del pennello applicati a più elementi in un'interfaccia utente. I valori del pennello vengono quindi condivisi e applicati a qualsiasi caso in cui si fa riferimento alla risorsa pennello mediante un utilizzo di {StaticResource} nel codice XAML. Sono inclusi i casi in cui si dispone di un modello di controllo XAML che fa riferimento al pennello condiviso e il modello di controllo è una risorsa XAML con chiave.
Pennelli nel codice
È molto più tipico specificare i pennelli usando XAML che usare il codice per definire i pennelli. Questo perché i pennelli sono generalmente definiti come risorse XAML e poiché i valori dei pennelli sono spesso il risultato degli strumenti di progettazione o parte di una definizione dell'interfaccia utente XAML. Tuttavia, per il caso occasionale in cui si potrebbe voler definire un pennello usando il codice, tutti i tipi di pennello sono disponibili per l'istanza del codice.
Per creare un SolidColorBrush nel codice, usare il costruttore che accetta un parametro Color. Passare un valore che è una proprietà statica della classe Colors , come illustrato di seguito:
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);
Per WebViewBrush e ImageBrush, utilizzare il costruttore predefinito e poi chiamare altre API prima di tentare di usare quel brush per una proprietà UI.
- ImageSource richiede un oggetto BitmapImage (non un URI) quando si definisce un oggetto ImageBrush usando codice. Se l'origine è un flusso, usare il metodo SetSourceAsync per inizializzare il valore. Se l'origine è un URI, che include contenuti nell'app che utilizza gli schemi ms-appx o ms-resource, usa il costruttore BitmapImage che accetta un URI. È anche possibile prendere in considerazione la gestione dell'evento ImageOpened se ci sono problemi di tempistica nel recupero o nella decodifica dell'origine immagine, dove potrebbe essere necessario visualizzare contenuti alternativi fino a quando l'origine dell'immagine diventa disponibile.
- Per WebViewBrush potrebbe essere necessario chiamare Redraw se di recente è stata reimpostata la proprietà SourceName o se il contenuto del WebView viene modificato anche con il codice.
Per esempi di codice, vedi WebViewBrush, ImageBrush e XamlCompositionBrushBase.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
