Megosztás a következőn keresztül:

Képek és képkefék

A képek megjelenítéséhez használhatja a Kép objektumot vagy az ImageBrush objektumot. A képobjektumok egy képet renderelnek, az ImageBrush objektum pedig egy másik objektumot fest egy képpel.

Ezek a megfelelő elemek?

Egy Kép elem használatával megjeleníthet egy különálló képet az alkalmazásban.

Egy ImageBrush használatával egy képet alkalmazhat egy másik objektumra. Az ImageBrush-hoz használt elemek közé tartoznak a szöveg díszítő effektusai, illetve a vezérlők vagy elrendezéstárolók hátterei.

Kép létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg az ImageBrushes működés közben

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Image

Ez a példa bemutatja, hogyan hozhat létre képet a Kép objektum használatával.

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

Itt látható a renderelt képobjektum.

Példa képelemre

Ebben a példában a Forrás tulajdonság határozza meg a megjeleníteni kívánt kép helyét. A Forrás beállításához adjon meg egy abszolút URL-címet (például http://contoso.com/myPicture.jpg), vagy adjon meg egy, az alkalmazás csomagolási struktúrájához viszonyított URL-címet. Példánkban a "sunset.jpg" képfájlt a project gyökérmappájába helyeztük, és deklaráljuk project beállításokat, amelyek a képfájlt tartalomként tartalmazzák.

ImageBrush

Az ImageBrush objektummal egy képet használhat egy olyan terület festésére, amely Ecset objektumot használ. Használhat például ImageBrush-ot egy EllipszisKitöltés tulajdonságának vagy egy VászonHáttér tulajdonságának értékéhez.

A következő példa bemutatja, hogyan festhet ellipsziseket az ImageBrush használatával.

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

Itt van az ellipszis, amelyet az ImageBrush festett.

Egy ImageBrush által festett ellipszis.

Kép kinyújtása

Ha nem állítja be egy képSzélesség vagy Magasság értékeit, az a Forrásáltal megadott méretekkel jelenik meg. A Szélesség és magasság beállításával egy téglalap alakú terület jön létre, amelyben a kép megjelenik. A Stretch tulajdonság használatával megadhatja, hogy a kép hogyan tölti ki ezt a területet. A Stretch tulajdonság elfogadja ezeket az értékeket, amelyeket a Stretch enumerálás definiál:

  • Nincs: A kép nem nyúlik a kimeneti méretekhez. Legyen óvatos ezzel a Stretch beállítással: ha a forráskép nagyobb, mint a tárolóterület, a kép levágásra kerül, és ez általában nem kívánatos, mert nem rendelkezik vezérlési lehetőséggel a nézetport felett, mint amikor szándékosan alkalmazza a Clip-et.
  • Egységes: A rendszer a kimeneti dimenzióknak megfelelően skálázza a képet. A tartalom méretaránya azonban megmarad. Ez az alapértelmezett érték.
  • UniformToFill: A rendszer úgy skálázza a képet, hogy teljesen kitöltse a kimeneti területet, de megtartsa eredeti méretarányát.
  • Kitöltés: A kép a kimeneti dimenziókhoz van skálázva. Mivel a tartalom magassága és szélessége egymástól függetlenül skálázva van, előfordulhat, hogy a kép eredeti méretaránya nem marad meg. Ez azt jelentheti, hogy a kép eltorzulhat, hogy teljesen kitöltse a kimeneti területet.

Egy példa a stretch beállításokra.

Kép körülvágása

A Clip tulajdonság használatával kivághat egy területet a képkimenetből. A Clip tulajdonságot a Geometriaértékre állította be. Jelenleg a nem téglalap alakú kivágások nem támogatottak.

A következő példa bemutatja, hogyan használható egy RectangleGeometry a kép kivágási régiójaként. Ebben a példában egy 200 magasságú Kép objektumot határozunk meg. A RectangleGeometry a megjelenítendő képterület téglalapját határozza meg. A Rect tulajdonság értéke "25 25 100 150", amely egy téglalapot határoz meg a "25,25" pozíciótól kezdve, 100 szélességű és 150 magasságú. Csak a kép téglalapon belüli része jelenik meg.

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

Itt látható a levágott kép fekete háttéren.

Egy Téglalapgeometria által körülvágott képobjektum.

Alkalmazzon átlátszatlanságot

Alkalmazhat átlátszóságot egy képre, hogy a kép félig áttetszőn jelenjen meg. Az átlátszatlansági értékek 0,0 és 1,0 között vannak, ahol az 1,0 teljesen átlátszatlan, a 0,0 pedig teljesen átlátszó. Ez a példa bemutatja, hogyan alkalmazhat 0,5 átlátszatlanságot egy képre.

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

Itt látható a renderelt kép 0,5 átlátszatlansággal és fekete háttérrel, amely a részleges átlátszatlanságon keresztül jelenik meg.

Egy 0.5 átlátszóságú képobjektum.

Képfájlformátumok

Kép és ImageBrush a következő képfájlformátumokat jelenítheti meg:

  • Közös fotószakértői csoport (JPEG)
  • Hordozható hálózati grafika (PNG)
  • bitkép (BMP)
  • Grafikus információcsere formátum (GIF)
  • Címkézett képfájl formátuma (TIFF)
  • JPEG XR
  • ikonok (ICO)

A Image, BitmapImage és BitmapSource API-k nem tartalmaznak dedikált módszereket a médiaformátumok kódolására és dekódolására. A kódolási és dekódolási műveletek mind beépítettek, és legfeljebb a kódolás vagy dekódolás szempontjait emelik ki az eseményadatok körében a betöltési események kapcsán. Ha bármilyen speciális munkát szeretne végezni a képkódolással vagy -dekódolással, amelyet akkor használhat, ha az alkalmazás képkonvertálást vagy -kezelést végez, használja a Windows-ben elérhető API-kat. Graphics.Imaging névtér. Ezeket az API-kat a Windows Windows Képalkotó összetevő (WIC) is támogatja.

Az alkalmazáserőforrásokról és az alkalmazások képforrásainak csomagolásáról további információt a Méretre, témára, kontrasztra és másszabott képek és objektumok betöltése című témakörben talál.

írható bitmap

Egy WriteableBitmap olyan BitmapSource-ot biztosít, amely módosítható, és nem használja a WIC által biztosított alapszintű fájlalapú dekódolást. Dinamikusan módosíthatja a képeket, és újra renderelheti a frissített képet. A WriteableBitmap puffertartalmának meghatározásához használja a PixelBuffer tulajdonságot a puffer eléréséhez, és a kitöltéséhez használjon folyamot vagy nyelvspecifikus puffertípust. Példakódért lásd: WriteableBitmap.

RenderelésiCélBitmap

A RenderTargetBitmap osztály rögzítheti az XAML felhasználói felület fáját egy futó alkalmazásból, majd bitképforrást jelölhet. A rögzítés után ez a képforrás alkalmazható az alkalmazás más részeire, erőforrásként vagy alkalmazásadatokként menthető a felhasználó által, vagy más forgatókönyvekhez használható. Az egyik különösen hasznos forgatókönyv egy XAML-oldal futtatókörnyezeti miniatűrjének létrehozása egy navigációs sémához. RenderTargetBitmap bizonyos korlátozások vonatkoznak a rögzített képen megjelenő tartalomra. További információ: RenderTargetBitmapAPI-referenciatémaköre.

Képforrások és skálázás

Több ajánlott méretben kell létrehoznia a képforrásokat, hogy az alkalmazás jól nézzen ki, amikor a Windows skálázza. Ha egy képforrását adja meg, használhat egy olyan elnevezési konvenciót, amely automatikusan hivatkozik a megfelelő erőforrásra a jelenlegi skálázási szinthez. Az elnevezési konvencióval kapcsolatos részletekért és további információkért lásd rövid útmutatót: Fájl- vagy képerőforrások használata.

További információkért arról, hogyan tervezzünk a méretezéshez, tekintse meg az elrendezéssel és méretezéssel kapcsolatos UX-irányelveket.

Kép és KépEcset kódban

Jellemző, hogy a Kép és az ImageBrush elemeket XAML használatával adja meg kód helyett. Ennek az az oka, hogy ezek az elemek gyakran egy XAML felhasználói felület definíciójának részeként a tervezőeszközök kimenetei.

Ha kóddal definiál egy Képet vagy ImageBrush-ot, használja az alapértelmezett konstruktorokat, majd állítsa be a megfelelő forrástulajdonságot (Image.Source vagy ImageBrush.ImageSource). A forrástulajdonságokhoz BitmapImage (nem URI) szükséges, amikor kóddal állítja be őket. Ha a forrás stream, használja a SetSourceAsync metódust az érték inicializálásához. Ha a forrás egy URI, amely tartalmazza az alkalmazás olyan tartalmát, amely az ms-appx vagy ms-resource sémákat használja, használja a BitmapImage konstruktort, amely URI-t használ. Érdemes lehet kezelni a ImageOpened eseményt is, ha a képforrás beolvasásával vagy dekódolásával kapcsolatos időzítési problémák merülnek fel, ahol alternatív tartalomra lehet szükség a kép forrásának rendelkezésre állásáig. Példakód: WinUI 3 Katalógus minta.

Megjegyzés:

Ha kóddal hoz létre képeket, automatikus kezeléssel hozzáférhet a nem minősített erőforrásokhoz az aktuális méretezési és kulturális minősítőkkel, vagy használhatja ResourceManager és ResourceMap a kultúra és a skálázás minősítőivel az erőforrások közvetlen beszerzéséhez. További információ: Erőforrás-kezelési rendszer.

  • Last updated on