Obrázky a štětce obrázků

K zobrazení obrázku můžete použít objekt Image nebo objekt ImageBrush. Objekt Obrázek vykreslí obrázek a objekt ImageBrush nakreslí jiný objekt obrázkem.

K zobrazení samostatného obrázku v aplikaci použijte prvek Image.

Použijte ImageBrush k použití obrázku na jiný objekt. Možnosti využití ImageBrush zahrnují dekorativní efekty pro text nebo pozadí pro ovládací prvky či kontejnery rozvržení.

Galerie WinUI 3 obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionalit WinUI 3. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

Tento příklad ukazuje, jak vytvořit image pomocí Image objektu.

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

Tady je vykreslený objekt Image.

V tomto příkladu vlastnost Zdroj určuje umístění obrázku, který chcete zobrazit. Zdroj můžete nastavit zadáním absolutní adresy URL (například http://contoso.com/myPicture.jpg) nebo zadáním adresy URL, která je relativní vzhledem ke struktuře balení aplikace. V našem příkladu jsme soubor obrázku "sunset.jpg" umístili do kořenové složky projektu a deklarovali nastavení projektu, která obsahují soubor obrázku jako obsah.

Pomocí objektu ImageBrush můžete pomocí obrázku nakreslit oblast, která přebírá objekt brush. Například můžete použít ImageBrush pro hodnotu vlastnosti Fill objektu Ellipse nebo vlastnosti Background objektu Canvas.

Další příklad ukazuje, jak použít ImageBrush k malování elipsy.

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

Tady je tato elipsa namalovaná ImageBrushem.

Pokud nenastavíte hodnoty šířka nebo výška pro Obrázek, zobrazí se s rozměry obrázku určenými podle Zdroj. Nastavení šířka a Výška vytvoří obdélníkovou oblast, ve které se obrázek zobrazí. Způsob vyplnění této oblasti obrázkem můžete určit pomocí vlastnosti Stretch. Vlastnost Stretch přijímá tyto hodnoty, které jsou definovány výčtem Stretch:

• Žádné: Obrázek se neroztáhne, aby vyplnil výstupní rozměry. Při tomto nastavení roztažení buďte opatrní: pokud je zdrojový obrázek větší než oblast obsahující, váš obrázek se ořízne a obvykle to není žádoucí, protože nemáte žádnou kontrolu nad výřezem pro zobrazení, jako když záměrně použijete Klip.
• Uniform: Obrázek se škáluje tak, aby odpovídal výstupním rozměrům. Ale poměr stran obsahu se zachová. Toto je výchozí hodnota.
• UniformToFill: Obrázek se škáluje tak, aby zcela vyplnil výstupní oblast, ale zachoval původní poměr stran.
• výplň: Obrázek se škáluje tak, aby odpovídal výstupním rozměrům. Vzhledem k tomu, že výška a šířka obsahu se škálují nezávisle, původní poměr stran obrázku nemusí být zachován. To znamená, že obrázek může být zkreslený tak, aby zcela vyplnil výstupní oblast.

Pomocí vlastnosti Clip můžete vystřižovat oblast z výstupu obrázku. Vlastnost Clip nastavíte na geometrie. V současné době se nepodporují neobdélníkové výřezy.

Další příklad ukazuje, jak použít RectangleGeometry jako ořezovou oblast pro obrázek. V tomto příkladu definujeme objekt Obrázek výškou 200. RectangleGeometry definuje obdélník pro oblast obrázku, která se zobrazí. Vlastnost Rect je nastavená na hodnotu 25 25 100 150, která definuje obdélník začínající na pozici 25 25 25 s šířkou 100 a výškou 150. Zobrazí se pouze část obrázku, která je v oblasti obdélníku.

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

Tady je oříznutý obrázek na černém pozadí.

Průhlednost můžete aplikovat na obrázek, aby působil poloprůhledně. Hodnoty neprůhlednosti jsou od 0,0 do 1.0, kde 1,0 je zcela neprůhledný a 0,0 je plně transparentní. Tento příklad ukazuje, jak u obrázku použít neprůhlednost 0,5.

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

Tady je vykreslený obrázek s neprůhledností 0,5 a černým pozadím, které znázorňuje částečnou neprůhlednost.

Image a ImageBrush mohou zobrazit tyto formáty souborů obrázků:

• Společná skupina odborníků na fotografii (Joint Photographic Experts Group, JPEG)
• Přenosná síťová grafika (PNG)
• bitmap (BMP)
• Formát GIF (Graphics Interchange Format)
• Označený formát souboru obrázku (TIFF)
• JPEG XR
• ikony (ICO)

Rozhraní API pro Image, BitmapImage a BitmapSource neobsahují žádné vyhrazené metody pro kódování a dekódování formátů médií. Všechny operace kódování a dekódování jsou integrované a nanejvýše se mohou objevit aspekty kódování nebo dekódování jako součást dat události pro události související s načítáním. Pokud chcete provádět jakoukoli speciální práci s kódováním nebo dekódováním obrázků, které můžete použít, pokud vaše aplikace provádí převody nebo manipulaci s obrázky, měli byste použít rozhraní API dostupná v oboru názvů Windows.Graphics. Imaging. Tato rozhraní API jsou podporována také komponentou WIC (Windows Imaging Component) ve Windows.

Další informace o prostředcích aplikací a o tom, jak zabalit obrázkové zdroje v aplikaci, najdete v tématu Načtení obrázků a prostředků přizpůsobených pro škálování, motiv, vysoký kontrast a další.

WriteableBitmap poskytuje BitmapSource, který lze upravit a který nepoužívá základní dekódování založené na souborech z WIC. Obrázky můžete dynamicky měnit a znovu vykreslovat aktualizovaný obrázek. Chcete-li definovat obsah vyrovnávací paměti pro WriteableBitmap, použijte vlastnost PixelBuffer pro přístup k této paměti a použijte datový proud nebo jazykově specifický typ vyrovnávací paměti k jejímu vyplnění. Příklad kódu, viz WriteableBitmap.

Třída RenderTargetBitmap může zachytit strom uživatelského rozhraní XAML ze spuštěné aplikace a pak představuje zdroj rastrového obrázku. Po zachycení se tento zdroj image dá použít na jiné části aplikace, uložit jako prostředek nebo data aplikace uživatelem nebo použít pro jiné scénáře. Zvlášť užitečným scénářem je vytvoření miniatury stránky XAML za běhu pro navigační schéma. RenderTargetBitmap má určitá omezení na obsah, který se objeví v zachyceném obrázku. Další informace najdete v referenčním tématu rozhraní API pro RenderTargetBitmap.

Zdroje imagí byste měli vytvořit v několika doporučených velikostech, abyste měli jistotu, že vaše aplikace bude vypadat skvěle, když ji Windows škáluje. Při zadávání zdroje pro obrázekmůžete použít názvovou konvenci, která automaticky odkáže na správný prostředek pro aktuální škálování. Podrobnosti o konvenci vytváření názvů a další informace najdete v tématu Rychlý start: Použití prostředků souborů nebo obrázků.

Další informace o tom, jak navrhovat pro škálování, podívejte se na pokyny pro rozložení a škálování.

Obvykle se k zadávání elementů Image a ImageBrush používá XAML místo kódu. Důvodem je to, že tyto prvky jsou často výstupem nástrojů návrhu jako součást definice uživatelského rozhraní XAML.

Pokud definujete Image nebo ImageBrush pomocí kódu, použijte výchozí konstruktory a pak nastavte relevantní zdrojovou vlastnost (Image.Source nebo ImageBrush.ImageSource). Vlastnosti zdroje vyžadují BitmapImage (nikoli identifikátor URI), pokud je nastavujete pomocí kódu. Pokud je zdrojem datový proud, použijte k inicializaci hodnoty metodu SetSourceAsync. Pokud je zdrojem identifikátor URI, který zahrnuje obsah ve vaší aplikaci používající schémata ms-appx nebo ms-resource, použijte konstruktor BitmapImage, který přijímá identifikátor URI. Můžete také zvážit zpracování události ImageOpened, pokud dojde k problémům s časováním načítání nebo dekódování zdroje obrázku, kde může být potřeba zobrazit alternativní obsah, dokud nebude zdroj obrázku dostupný. Například kód najdete v ukázce galerie WinUI.

Rozhraní API pro tento ovládací prvek existují v windows.UI.Xaml.Controls a obory názvů Windows.UI.Xaml.Media.

Doporučujeme použít nejnovější WinUI 2 k získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky.

Počínaje Windows 10 verze 1607 podporuje prvek Obrázek animované obrázky VE FORMÁTU GIF. Když použijete BitmapImage jako obrázek Source, můžete získat přístup k API rozhraním BitmapImage pro ovládání přehrávání animovaného obrázku ve formátu GIF. Další informace naleznete v poznámkách na stránce třídy BitmapImage.

• zvuku, videa a kamery
• třída obrázku
• třída ImageBrush