Bilder och bildpenslar

Om du vill visa en bild kan du använda antingen bildobjektet eller ImageBrush-objektet . Ett bildobjekt återger en bild och ett ImageBrush-objekt målar ett annat objekt med en bild.

Är det här rätt element?

Använd ett bildelement för att visa en fristående bild i din app.

Använd en ImageBrush för att tillämpa en bild på ett annat objekt. Användningsområden för en ImageBrush innehåller dekorativa effekter för text eller bakgrunder för kontroller eller layoutcontainrar.

Skapa en avbildning

WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Bild

Det här exemplet visar hur du skapar en bild med hjälp av bildobjektet .

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

Här är det renderade bildobjektet.

I det här exemplet anger egenskapen Källa platsen för den bild som du vill visa. Du kan ange källan genom att ange en absolut URL (till exempel http://contoso.com/myPicture.jpg) eller genom att ange en URL som är relativ till appens paketeringsstruktur. I vårt exempel placerar vi bildfilen "sunset.jpg" i rotmappen för vår project och deklarerar project inställningar som innehåller bildfilen som innehåll.

ImageBrush (på engelska)

Med ImageBrush-objektet kan du använda en bild för att måla ett område som tar ett penselobjekt . Du kan till exempel använda en ImageBrush för värdet för egenskapen Fill för en Ellipse eller egenskapen Background för en Canvas.

I nästa exempel visas hur du använder en ImageBrush för att måla en Ellips.

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

Här är Ellipsen målad av ImageBrush.

Sträcka ut en bild

Om du inte anger värdena För bredd eller Höjd för en bild visas den med de dimensioner av bilden som anges av källan. Om du anger bredd och höjd skapas ett rektangulärt område där bilden visas. Du kan ange hur bilden fyller det här innehållande området med hjälp av egenskapen Stretch . Egenskapen Stretch accepterar dessa värden, som Stretch-uppräkningen definierar:

• Ingen: Bilden sträcker inte ut sig för att fylla utdatadimensionerna. Var försiktig med den här Stretch-inställningen: om källbilden är större än det innehållande området klipps bilden av, och detta är vanligtvis inte önskvärt eftersom du inte har någon kontroll över visningsporten som du gör med ett avsiktligt klipp.
• Enhetlig: Bilden skalas för att passa utdatadimensionerna. Men proportionerna i innehållet bevaras. Det här är standardvärdet.
• UniformToFill: Bilden skalas så att den helt fyller utdataområdet men bevarar sitt ursprungliga proportioner.
• Fyllning: Bilden skalas för att passa utdatadimensionerna. Eftersom innehållets höjd och bredd skalas oberoende av varandra kanske det ursprungliga bildförhållandet inte bevaras. Bilden kan alltså vara förvrängd för att helt fylla utdataområdet.

Beskära en bild

Du kan använda egenskapen Clip för att klippa ut ett område från bildutdata. Du ställer in egenskapen Clip till en Geometry. För närvarande stöds inte icke-rektangulära klippningar.

I nästa exempel visas hur du använder en RektangelGeometry som klippområde för en bild. I det här exemplet definierar vi ett bildobjekt med en höjd på 200. En rektangelGeometry definierar en rektangel för det område i bilden som ska visas. Egenskapen Rect är inställd på "25 25 100 150", vilket definierar en rektangel som börjar vid position "25,25" med en bredd på 100 och en höjd på 150. Endast den del av bilden som finns inom rektangelns område visas.

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

Här är den klippta bilden på en svart bakgrund.

Tillämpa en ogenomskinlighet

Du kan använda en ogenomskinlighet på en bild så att bilden återges halvgenomskinlig. Opacitetsvärdena är från 0.0 till 1.0 där 1.0 är helt ogenomskinlig och 0.0 är helt transparent. Det här exemplet visar hur du tillämpar en opacitet på 0,5 på en bild.

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

Här är den renderade bilden med en opacitet på 0,5 och en svart bakgrund som visas genom den partiella opaciteten.

Bildfilformat

Bild och ImageBrush kan visa följande bildfilformat:

• Gemensam grupp för fotografiska experter (JPEG)
• Bärbar nätverksgrafik (PNG)
• bitmap (BMP)
• Grafikutbytesformat (GIF)
• TIFF (Taggat bildfilformat)
• JPEG XR
• ikoner (ICO)

API:erna för Image, BitmapImage och BitmapSource innehåller inga dedikerade metoder för kodning och avkodning av medieformat. Alla kodnings- och avkodningsåtgärder är inbyggda och högst kommer att visa aspekter av kodning eller avkodning som en del av händelsedata för inläsningshändelser. Om du vill göra något särskilt arbete med bildkodning eller avkodning, som du kan använda om din app utför bildkonverteringar eller manipulation, bör du använda de API:er som är tillgängliga i Windows. Graphics.Imaging namnrymd. Dessa API:er stöds också av Windows Imaging Component (WIC) i Windows.

Mer information om appens resurser och hur du paketerar bildkällor i en app finns i Läsa in bilder och tillgångar som är skräddarsydda för skalning, tema, högkontrast och andra egenskaper.

SkrivbarBitmap

En WriteableBitmap innehåller en BitmapSource som kan ändras och som inte använder den grundläggande filbaserade avkodningen från WIC. Du kan ändra bilderna dynamiskt och åter återge den uppdaterade avbildningen. Om du vill definiera buffertinnehållet i en WriteableBitmap använder du egenskapen PixelBuffer för att komma åt bufferten och använder en dataström eller språkspecifik bufferttyp för att fylla den. Exempelkod finns i WriteableBitmap.

RenderTargetBitmap

Klassen RenderTargetBitmap kan avbilda XAML-användargränssnittsträdet från en app som körs och representerar sedan en bitmappsbildkälla. Efter avbildningen kan den bildkällan tillämpas på andra delar av appen, sparas som en resurs eller appdata av användaren eller användas för andra scenarier. Ett särskilt användbart scenario är att skapa en miniatyrbild av en XAML-sida vid körning för ett navigationsschema. RenderTargetBitmap har vissa begränsningar för innehållet som visas i den insamlade bilden. Mer information finns i API-referensavsnittet för RenderTargetBitmap.

Bildkällor och skalning

Du bör skapa dina avbildningskällor i flera rekommenderade storlekar för att säkerställa att appen ser bra ut när Windows skalar den. När du anger en källa för en bild kan du använda en namngivningskonvention som automatiskt refererar till rätt resurs för den aktuella skalningen. För specifika detaljer om namngivningskonventionen och mer information, se Snabbstart: Använda fil- eller bildresurser.

Mer information om hur du utformar för skalning finns i UX-riktlinjer för layout och skalning.

Bild och ImageBrush i kod

Det är vanligt att ange bild- och ImageBrush-element med XAML i stället för kod. Det beror på att dessa element ofta är utdata från designverktyg som en del av en XAML-användargränssnittsdefinition.

Om du definierar en Bild eller ImageBrush med hjälp av kod använder du standardkonstruktorerna och anger sedan relevant källegenskap (Image.Source eller ImageBrush.ImageSource). Källegenskaperna kräver en BitmapImage (inte en URI) när du anger dem med hjälp av kod. Om källan är en ström använder du metoden SetSourceAsync för att initiera värdet. Om din källa är en URI som innehåller innehåll i appen och använder schemana ms-appx eller ms-resource, använd konstruktorn BitmapImage som tar en URI. Du kan också överväga att hantera ImageOpened-händelsen om det finns några tidsproblem med att hämta eller avkoda bildkällan, där du kan behöva alternativt innehåll som ska visas tills bildkällan är tillgänglig. Exempelkod finns i WinUI 3-galleriexemplet.

Relaterade artiklar

• Ljud, video och kamera
• Bildklass
• ImageBrush-klass