Immagini e pennelli per immagini

Per visualizzare un'immagine, è possibile utilizzare l'oggetto Image o l'oggetto ImageBrush . Un oggetto Image esegue il rendering di un'immagine e un oggetto ImageBrush disegna un altro oggetto con un'immagine.

Questi sono gli elementi giusti?

Usa un elemento Image per visualizzare un'immagine autonoma nella tua app.

Usare un ImageBrush per applicare un'immagine a un altro oggetto. Gli utilizzi di ImageBrush includono effetti decorativi per il testo e gli sfondi di controlli o contenitori di layout.

Creare un'immagine

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Immagine

In questo esempio di codice viene illustrato come creare un'immagine XML Schema tramite l'oggetto Image.

<Image Width="200" Source="sunset.jpg" />

Ecco l'oggetto Image di cui è stato eseguito il rendering.

In questo esempio, la proprietà Source specifica la posizione dell'immagine che si desidera visualizzare. Per impostare la proprietà Source, puoi specificare un URL assoluto (ad esempio, http://contoso.com/myPicture.jpg) oppure un URL relativo rispetto alla struttura di creazione di pacchetti di app. Per questo esempio, inserire il file di immagine "sunset.jpg" nella cartella radice del project e dichiarare le impostazioni project che includono il file di immagine come contenuto.

ImageBrush

Con l'oggetto ImageBrush , è possibile utilizzare un'immagine per disegnare un'area che accetta un oggetto Brush . Ad esempio, è possibile utilizzare un oggetto ImageBrush per il valore della proprietà Fill di un oggetto Ellipse o della proprietà Background di un oggetto Canvas.

Nell'esempio seguente viene mostrato come usare un ImageBrush per dipingere un'ellisse.

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

Ecco l'ellisse dipinta da ImageBrush.

Estendere un'immagine

Se non imposti i valori Width o Height di un oggetto Image, questo viene visualizzato con le dimensioni dell'immagine specificate da Source. L'impostazione di Width e Height crea un'area rettangolare contenente in cui viene visualizzata l'immagine. È possibile specificare il modo in cui l'immagine riempie l'area contenitore usando la proprietà Stretch . La proprietà Stretch accetta questi valori, che l'enumerazione Stretch definisce:

• None: l'immagine non si estende fino a riempire le dimensioni dell'output. Prestare attenzione a questa impostazione di allungamento: se l'immagine di origine è più grande dell'area contenitrice, l'immagine verrà ritagliata, e questo di solito non è auspicabile perché non si ha alcun controllo sul riquadro di visualizzazione come si ha con un *Clip* intenzionale.
• Uniform: l'immagine viene ridimensionata per adattarsi alle dimensioni dell'output. Ma le proporzioni del contenuto sono mantenute. Questo è il valore predefinito.
• UniformToFill: l'immagine viene ridimensionata in modo da riempire completamente l'area di output mantenendo le proporzioni originali.
• Fill: l'immagine viene ridimensionata per adattarsi alle dimensioni dell'output. Poiché l'altezza e la larghezza del contenuto vengono ridimensionate in modo indipendente, è possibile che non vengano mantenute le proporzioni originali dell'immagine. Ovvero, l'immagine potrebbe essere distorta per riempire completamente l'area di output.

Ritagliare un'immagine

È possibile utilizzare la proprietà Clip per ritagliare un'area dall'output dell'immagine. Imposti la proprietà Clip su Geometry. Attualmente, il ritaglio non rettangolare non è supportato.

Nell'esempio seguente viene illustrato come usare RectangleGeometry come area di ritaglio per un'immagine. In questo esempio viene definito un oggetto Image con un'altezza pari a 200. RectangleGeometry definisce un rettangolo per l'area dell'immagine che verrà visualizzata. La proprietà Rect è impostata su "25.25.100.150", che definisce un rettangolo a partire dalla posizione "25,25" con una larghezza pari a 100 e un'altezza pari a 150. Verrà visualizzata solo la parte dell'immagine che è all'interno dell'area del rettangolo.

<Image Source="sunset.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Ecco l'immagine ritagliata su uno sfondo nero.

Applicare un livello di opacità

È possibile applicare un'Opacità a un'immagine in modo che l'immagine risulti semitrasparente. I valori di opacità sono compresi tra 0,0 e 1,0, dove 1.0 è completamente opaco e 0,0 è completamente trasparente. Questo esempio mostra come applicare un'opacità di 0,5 a un'immagine.

<Image Height="200" Source="sunset.jpg" Opacity="0.5" />

Ecco l'immagine renderizzata con un'opacità di 0,5 e uno sfondo nero che traspare attraverso l'opacità parziale.

Formati di file di immagine

Image e ImageBrush possono visualizzare questi formati di file di immagine:

• Gruppo di esperti di fotografia congiunta (JPEG)
• Grafica di rete portabile (PNG)
• bitmap (mappe di bit) (BMP)
• Formato di InterScambio di Immagini (GIF)
• Formato di file immagine con tag (TIFF)
• JPEG XR
• Icone (ICO)

Le API per Image, BitmapImage e BitmapSource non includono metodi dedicati per la codifica e la decodifica dei formati multimediali. Tutte le operazioni di codifica e decodifica sono predefinite e al massimo emergeranno aspetti di codifica o decodifica come parte dei dati dell'evento per gli eventi di caricamento. Se vuoi eseguire operazioni speciali con codifica o decodifica dell'immagine, che potresti usare se la tua app esegue conversioni o manipolazioni di immagini, devi usare le API disponibili nel Windows. Spazio dei nomi Graphics.Imaging. Queste API sono supportate anche dal Windows Imaging Component (WIC) in Windows.

Per ulteriori informazioni sulle risorse dell'applicazione e su come creare un pacchetto di fonti di immagini in un'applicazione, consultare Caricare immagini e asset personalizzati per la scalabilità, il tema, il contrasto elevato e altro.

Bitmap Scrivibile

WriteableBitmap fornisce un oggetto BitmapSource che può essere modificato e che non utilizza la decodifica di base basata sui file fornita da WIC. È possibile modificare le immagini in modo dinamico ed eseguire nuovamente il rendering dell'immagine aggiornata. Per definire il contenuto del buffer di un WriteableBitmap, utilizzare la proprietà PixelBuffer per accedere al buffer e usare un tipo di flusso o di buffer specifico del linguaggio per riempirlo. Per un esempio di codice, vedere WriteableBitmap.

RenderTargetBitmap

La classe RenderTargetBitmap può acquisire l'albero dell'interfaccia utente XAML da un'app in esecuzione e quindi rappresenta un'origine immagine bitmap. Dopo l'acquisizione, l'origine dell'immagine può essere applicata ad altre parti dell'app, salvate come dati di risorsa o app dall'utente o usate per altri scenari. Uno scenario particolarmente utile è la creazione di un'anteprima di runtime di una pagina XAML per uno schema di spostamento. RenderTargetBitmap presenta alcune limitazioni sul contenuto che verrà visualizzato nell'immagine acquisita. Per altre info, vedi l'argomento di riferimento sulle API per RenderTargetBitmap.

Origini e ridimensionamento delle immagini

È consigliabile creare le origini delle immagini in diverse dimensioni raccomandate, per assicurare che l'app abbia un aspetto ottimale quando Windows le ridimensiona. Quando si specifica un oggetto Source per un'immagine, è possibile usare una convenzione di denominazione che farà riferimento automaticamente alla risorsa corretta per il ridimensionamento corrente. Per informazioni specifiche sulla convenzione di denominazione e ulteriori informazioni, vedi Guida introduttiva: Utilizzo di risorse file o immagine.

Per altre info su come progettare per il ridimensionamento, vedi Linee guida per l'esperienza utente per il layout e il ridimensionamento.

Image e ImageBrush nel codice

In genere è necessario specificare gli elementi Image e ImageBrush usando XAML anziché il codice. Questo perché questi elementi sono spesso l'output degli strumenti di progettazione come parte di una definizione dell'interfaccia utente XAML.

Se si definisce un oggetto Image o ImageBrush usando il codice, usare i costruttori predefiniti, quindi impostare la proprietà di origine pertinente (Image.Source o ImageBrush.ImageSource). Le proprietà di origine richiedono bitmapImage (non un URI) quando le si impostano usando il codice. Se l'origine è un flusso, usare il metodo SetSourceAsync per inizializzare il valore. Se l'origine è un URI, che include il contenuto dell'app che usa gli schemi ms-appx o ms-resource, usa il costruttore BitmapImage che accetta un URI. Puoi anche valutare se gestire l'evento ImageOpened in caso di problemi di tempo con il recupero o la decodifica dell'origine dell'immagine, per cui potresti avere la necessità di visualizzare contenuto alternativo finché l'origine dell'immagine non diventa disponibile. Per un esempio di codice, vedere l'esempio WinUI 3 Gallery.

Articoli correlati

• Audio, video e fotocamera
• Classe Image
• Classe ImageBrush