Afbeeldingen en afbeeldingsborstels

Als u een afbeelding wilt weergeven, kunt u het afbeeldingsobject of het ImageBrush-object gebruiken. Een afbeeldingsobject geeft een afbeelding weer en een ImageBrush-object schildert een ander object met een afbeelding.

Zijn dit de juiste elementen?

Gebruik een afbeeldingselement om een zelfstandige afbeelding in uw app weer te geven.

Gebruik een ImageBrush om een afbeelding toe te passen op een ander object. Toepassingen voor een ImageBrush bevatten decoratieve effecten voor tekst of achtergronden voor besturingselementen of indelingscontainers.

Een afbeelding maken

Belangrijke API's:Klasse Image, Broneigenschap, Klasse ImageBrush, eigenschap ImageSource

Open de WinUI 3 Gallery-app en zie ImageBrushes 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

Afbeelding

In dit voorbeeld ziet u hoe u een afbeelding maakt met behulp van het afbeeldingsobject.

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

Hier ziet u het weergegeven afbeeldingsobject.

Voorbeeld van een afbeeldingselement

In dit voorbeeld geeft de eigenschap Bron de locatie op van de afbeelding die u wilt weergeven. U kunt de bron instellen door een absolute URL (bijvoorbeeld http://contoso.com/myPicture.jpg) op te geven of door een URL op te geven die relatief is ten opzichte van uw app-pakketstructuur. In ons voorbeeld plaatsen we het afbeeldingsbestand 'sunset.jpg' in de hoofdmap van ons project en declareren we projectinstellingen die het afbeeldingsbestand als inhoud bevatten.

Afbeeldingspenseel

Met het object ImageBrush kunt u een afbeelding gebruiken om een gebied te schilderen dat een penseelobject gebruikt. U kunt bijvoorbeeld een ImageBrush gebruiken voor de waarde van de eigenschap Fill van een Ellips of de eigenschap Achtergrond van een Canvas.

In het volgende voorbeeld ziet u hoe u een ImageBrush gebruikt om een ellips te schilderen.

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

Hier is de ellips die door de ImageBrush is geverfd.

Een ellips geschilderd door een ImageBrush.

Een afbeelding uitrekken

Als u de waarden voor breedte of hoogte van een afbeelding niet instelt, wordt deze weergegeven met de afmetingen van de afbeelding die is opgegeven door de bron. Als u de breedte en hoogte instelt, wordt een rechthoekig gebied gemaakt waarin de afbeelding wordt weergegeven. U kunt opgeven hoe de afbeelding dit invult met behulp van de Stretch-eigenschap . De stretch-eigenschap accepteert deze waarden, die door de Stretch-opsomming worden gedefinieerd:

Geen: De afbeelding wordt niet uitgerekt om de uitvoerdimensies te vullen. Wees voorzichtig met deze Stretch-instelling: als de bronafbeelding groter is dan het inhoudsgebied, wordt uw afbeelding geknipt en is dit meestal niet wenselijk omdat u geen controle hebt over de viewport zoals u dat doet met een opzettelijke clip.
Uniform: De afbeelding wordt geschaald zodat deze past bij de uitvoerdimensies. Maar de hoogte-breedteverhouding van de inhoud blijft behouden. Dit is de standaardwaarde.
UniformToFill: De afbeelding wordt geschaald zodat het uitvoergebied volledig wordt gevuld, maar de oorspronkelijke hoogte-breedteverhouding behouden blijft.
Opvulling: De afbeelding wordt geschaald zodat deze past bij de uitvoerdimensies. Omdat de hoogte en breedte van de inhoud onafhankelijk van elkaar worden geschaald, blijft de oorspronkelijke hoogte-breedteverhouding van de afbeelding mogelijk niet behouden. Dat wil zeggen dat de afbeelding vervormd kan worden om het uitvoergebied volledig te vullen.

Een voorbeeld van stretch-instellingen.

Een afbeelding bijsnijden

U kunt de eigenschap Clip gebruiken om een gebied uit de uitvoer van de afbeelding te knippen. U stelt de eigenschap Clip in op een geometrie. Momenteel worden niet-rechthoekige knipsels niet ondersteund.

In het volgende voorbeeld ziet u hoe u een RectangleGeometry gebruikt als het clipgebied voor een afbeelding. In dit voorbeeld definiëren we een afbeeldingsobject met een hoogte van 200. Een RectangleGeometry definieert een rechthoek voor het gebied van de afbeelding dat wordt weergegeven. De eigenschap Rect is ingesteld op '25.25.100.150', waarmee een rechthoek wordt gedefinieerd die begint bij positie 25,25 met een breedte van 100 en een hoogte van 150. Alleen het deel van de afbeelding dat zich binnen het gebied van de rechthoek bevindt, wordt weergegeven.

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

Hier ziet u de geknipte afbeelding op een zwarte achtergrond.

Een afbeeldingsobject dat is bijgesneden door een RectangleGeometry.

Een dekking toepassen

U kunt een dekking toepassen op een afbeelding, zodat de afbeelding semi-translucent wordt weergegeven. De dekkingswaarden zijn van 0,0 tot 1.0, waarbij 1.0 volledig ondoorzichtig is en 0,0 volledig transparant is. In dit voorbeeld ziet u hoe u een dekking van 0,5 toepast op een afbeelding.

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

Hier ziet u de weergegeven afbeelding met een dekking van 0,5 en een zwarte achtergrond die door de gedeeltelijke dekking wordt weergegeven.

Een afbeeldingsobject met een dekking van ,5.

Bestandsindelingen voor afbeeldingen

Afbeelding en ImageBrush kunnen deze afbeeldingsbestandsindelingen weergeven:

Joint Photographic Experts Group (JPEG) (Gezamenlijke Fotografische Deskundigen Groep)
Draagbare Netwerkafbeeldingen (PNG)
Bitmap (BMP)
Grafisch uitwisselingsformaat (GIF)
Gelabelde afbeeldingsbestandsindeling (TIFF)
JPEG XR
pictogrammen (ICO)

De API's voor Image, BitmapImage en BitmapSource bevatten geen speciale methoden voor het coderen en decoderen van media-indelingen. Alle bewerkingen voor coderen en decoderen zijn ingebouwd, en in de meeste gevallen worden aspecten van coderen of decoderen als onderdeel van gebeurtenisgegevens voor belastinggebeurtenissen weergegeven. Als u speciaal wilt werken met afbeeldingscode of -decoderen, die u kunt gebruiken als uw app afbeeldingsconversies of -manipulatie uitvoert, moet u de API's gebruiken die beschikbaar zijn in de naamruimte Windows.Graphics.Imaging . Deze API's worden ook ondersteund door het Windows Imaging Component (WIC) in Windows.

Zie Afbeeldingen en assets laden die zijn afgestemd op schaal, thema, hoog contrast en andere voor meer informatie over app-resources en het verpakken van afbeeldingsbronnen in een app.

Schrijfbare Bitmap

Een WriteableBitmap biedt een BitmapSource die kan worden gewijzigd en die geen gebruik maakt van de basiscodering op basis van bestanden van de WIC. U kunt afbeeldingen dynamisch wijzigen en de bijgewerkte afbeelding opnieuw weergeven. Als u de bufferinhoud van een WriteableBitmap wilt definiëren, gebruikt u de eigenschap PixelBuffer om toegang te krijgen tot de buffer en gebruikt u een stroom- of taalspecifiek buffertype om deze in te vullen. Zie bijvoorbeeld WriteableBitmap.

RenderTargetBitmap

De klasse RenderTargetBitmap kan de XAML UI-structuur vastleggen vanuit een actieve app en vertegenwoordigt vervolgens een bitmapafbeeldingsbron. Na het vastleggen kan die afbeeldingsbron worden toegepast op andere onderdelen van de app, opgeslagen als resource- of app-gegevens door de gebruiker, of worden gebruikt voor andere scenario's. Een bijzonder nuttig scenario is het maken van een runtimeminiatuur van een XAML-pagina voor een navigatieschema. RenderTargetBitmap heeft enkele beperkingen voor de inhoud die wordt weergegeven in de vastgelegde afbeelding. Zie het API-referentieonderwerp voor RenderTargetBitmap voor meer informatie.

Afbeeldingsbronnen en schalen

U moet uw afbeeldingsbronnen op verschillende aanbevolen grootten maken om ervoor te zorgen dat uw app er geweldig uitziet wanneer Windows deze schaalt. Wanneer u een bron voor een afbeelding opgeeft, kunt u een naamconventie gebruiken die automatisch verwijst naar de juiste resource voor de huidige schaalaanpassing. Zie Quickstart: Bestands- of afbeeldingsresources gebruiken voor specifieke informatie over de naamconventie en meer details.

Voor meer informatie over hoe te ontwerpen voor schalen, zie UX-richtlijnen voor indeling en schalen.

Afbeelding en ImageBrush in code

Het is gebruikelijk om afbeeldingen en ImageBrush-elementen op te geven met behulp van XAML in plaats van code. Dit komt doordat deze elementen vaak de uitvoer zijn van ontwerphulpprogramma's als onderdeel van een XAML UI-definitie.

Als u een Afbeelding of ImageBrush definieert met behulp van code, gebruikt u de standaardconstructors en stelt u vervolgens de relevante broneigenschap (Image.Source of ImageBrush.ImageSource) in. Voor de broneigenschappen is een BitmapImage (geen URI) vereist wanneer u deze instelt 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, gebruik dan de BitmapImage constructor die een URI gebruikt. U kunt ook overwegen om de gebeurtenis ImageOpened af te handelen als er tijdsproblemen zijn met het ophalen of decoderen van de afbeeldingsbron, wanneer u mogelijk alternatieve inhoud nodig hebt om weer te geven totdat de afbeeldingsbron beschikbaar is. Zie bijvoorbeeld het WinUI Gallery-voorbeeld.

Opmerking

Als u afbeeldingen met code tot stand brengt, kunt u automatische verwerking gebruiken voor toegang tot niet-gekwalificeerde resources met huidige schaal- en cultuurkwalificaties, of u kunt ResourceManager en ResourceMap gebruiken met kwalificaties voor cultuur en schaal om de resources rechtstreeks te verkrijgen. Zie Resourcebeheersysteem voor meer informatie.

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.

API's voor dit besturingselement bestaan in de naamruimten Windows.UI.Xaml.Controls en Windows.UI.Xaml.Media .

UWP-API's:Image-klasse, Bron-eigenschap, ImageBrush-klasse, ImageSource-eigenschap
Open de WinUI 2 Gallery-app en zie ImageBrushes in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

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

Vanaf Windows 10 versie 1607 ondersteunt het element Afbeelding gif-animaties. Wanneer u een BitmapImage als afbeeldingsbron gebruikt, hebt u toegang tot BitmapImage-API's om het afspelen van de GIF-animatie te beheren. Zie de opmerkingen op de pagina BitmapImage-klasse voor meer informatie.