Gambar dan kuas gambar

Untuk menampilkan gambar, Anda dapat menggunakan objek Gambar atau objek ImageBrush . Objek Gambar merender gambar, dan objek ImageBrush melukis objek lain dengan gambar.

Apakah ini elemen yang tepat?

Gunakan elemen Gambar untuk menampilkan gambar yang berdiri sendiri di aplikasi Anda.

Gunakan ImageBrush untuk menerapkan gambar ke objek lain. Penggunaan ImageBrush mencakup efek dekoratif untuk teks atau sebagai latar belakang untuk kontrol atau wadah tata letak.

Buat sebuah citra

• API Penting:Kelas gambar, Properti sumber, kelas ImageBrush, properti ImageSource

Buka aplikasi Galeri WinUI 3 dan lihat ImageBrushes beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Gambar

Contoh ini menunjukkan cara membuat gambar dengan menggunakan objek Gambar .

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

Berikut adalah objek Gambar yang dirender.

Dalam contoh ini, properti Sumber menentukan lokasi gambar yang ingin Anda tampilkan. Anda dapat mengatur Sumber dengan menentukan URL absolut (misalnya, http://contoso.com/myPicture.jpg) atau dengan menentukan URL yang relatif terhadap struktur kemasan aplikasi Anda. Misalnya, kami menempatkan file gambar "sunset.jpg" di folder akar project kami dan mendeklarasikan pengaturan project yang menyertakan file gambar sebagai konten.

GambarBrush

Dengan objek ImageBrush, Anda dapat menggunakan gambar untuk mengisi area yang menggunakan objek Brush. Misalnya, Anda dapat menggunakan ImageBrush untuk nilai dari properti Fill sebuah Ellipse atau properti Background sebuah Canvas.

Contoh berikutnya menunjukkan cara menggunakan ImageBrush untuk melukis Elips.

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

Inilah Elips yang dilukis oleh ImageBrush.

Meregangkan gambar

Jika Anda tidak mengatur nilai Lebar atau Tinggi Gambar, nilai tersebut ditampilkan dengan dimensi gambar yang ditentukan oleh Sumber. Mengatur Lebar dan Tinggi membuat area persegi panjang yang berisi tempat gambar ditampilkan. Anda dapat menentukan bagaimana gambar mengisi area yang berisi ini dengan menggunakan properti Stretch . Properti Stretch menerima nilai-nilai ini, yang ditentukan enumerasi Stretch :

• Tidak Ada: Gambar tidak diperluas untuk memenuhi dimensi keluaran. Berhati-hatilah dengan pengaturan Stretch ini: jika gambar sumber lebih besar dari area yang berisi, gambar Anda akan terpangkas, dan ini biasanya tidak diinginkan karena Anda tidak memiliki kontrol apa pun atas viewport seperti yang Anda lakukan dengan Clip.
• Seragam: Gambar diskalakan agar sesuai dengan dimensi output. Tetapi rasio aspek konten dipertahankan. Ini adalah nilai default.
• UniformToFill: Gambar diskalakan sehingga sepenuhnya mengisi area output tetapi mempertahankan rasio aspek aslinya.
• Isi: Gambar diskalakan agar sesuai dengan dimensi output. Karena tinggi dan lebar konten diskalakan secara independen, rasio aspek asli gambar mungkin tidak dipertahankan. Artinya, gambar mungkin terdistorsi untuk mengisi area output sepenuhnya.

Memangkas gambar

Anda dapat menggunakan properti Klip untuk memotong area dari output gambar. Anda mengatur properti Clip ke Geometri. Saat ini, kliping non-persegi panjang tidak didukung.

Contoh berikut menunjukkan cara menggunakan RectangleGeometry sebagai wilayah klip untuk sebuah gambar. Dalam contoh ini, kita menentukan objek Gambar dengan tinggi 200. RectangleGeometry mendefinisikan persegi panjang untuk area gambar yang akan ditampilkan. Properti Rect diatur ke "25,25,100,150", yang mendefinisikan persegi panjang yang dimulai pada posisi "25,25" dengan lebar 100 dan tinggi 150. Hanya bagian gambar yang berada di dalam area persegi panjang yang ditampilkan.

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

Berikut adalah gambar yang diklip pada latar belakang hitam.

Menerapkan transparansi

Anda dapat menerapkan Opacity ke gambar sehingga gambar tersebut tampil semi-transparan. Nilai opasitas adalah dari 0,0 hingga 1,0 di mana 1,0 sepenuhnya buram dan 0,0 sepenuhnya transparan. Contoh ini menunjukkan cara menerapkan opasitas 0,5 ke Gambar.

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

Berikut adalah gambar yang dirender dengan opasitas 0,5 dan latar belakang hitam yang tampak melalui opasitas parsial.

Format file gambar

Gambar dan ImageBrush dapat menampilkan format file gambar ini:

• Kelompok Ahli Fotografi Bersama (JPEG)
• Grafis Jaringan Portabel (PNG)
• bitmap (BMP)
• Graphics Interchange Format (Format Pertukaran Grafik - GIF)
• Format Berkas Gambar Berlabel (TIFF)
• format gambar JPEG XR
• ikon (ICO)

API untuk Gambar, BitmapImage , dan BitmapSource tidak menyertakan metode khusus untuk pengodean dan decoding format media. Semua operasi pengodean dan dekode adalah built-in, dan paling banyak akan menampilkan aspek pengodean atau dekode sebagai bagian dari data peristiwa untuk peristiwa pemuat. Jika Anda ingin melakukan pekerjaan khusus dengan pengodean atau dekode gambar, yang mungkin Anda gunakan jika aplikasi Anda melakukan konversi atau manipulasi gambar, Anda harus menggunakan API yang tersedia di Windows. Graphics.Imaging namespace. API ini juga didukung oleh Windows Imaging Component (WIC) di Windows.

Untuk informasi selengkapnya tentang sumber daya aplikasi dan cara mengemas sumber gambar dalam aplikasi, lihat Memuat gambar dan aset yang disesuaikan untuk skala, tema, kontras tinggi, dan lainnya.

Bitmap Dapat Ditulis

WriteableBitmap menyediakan BitmapSource yang dapat dimodifikasi dan tidak menggunakan decoding berbasis file dasar dari WIC. Anda dapat mengubah gambar secara dinamis dan merender ulang gambar yang diperbarui. Untuk menentukan konten buffer WriteableBitmap, gunakan properti PixelBuffer untuk mengakses buffer dan gunakan aliran atau jenis buffer khusus bahasa untuk mengisinya. Misalnya kode, lihatlah WriteableBitmap.

RenderTargetBitmap

Kelas RenderTargetBitmap dapat mengambil pohon UI XAML dari aplikasi yang sedang berjalan, lalu mewakili sumber gambar bitmap. Setelah diambil, sumber gambar tersebut dapat diterapkan ke bagian lain aplikasi, disimpan sebagai sumber daya atau data aplikasi oleh pengguna, atau digunakan untuk skenario lain. Salah satu skenario yang sangat berguna adalah membuat gambar mini runtime halaman XAML untuk skema navigasi. RenderTargetBitmap memang memiliki beberapa batasan pada konten yang akan muncul dalam gambar yang diambil. Untuk informasi selengkapnya, lihat topik referensi API untuk RenderTargetBitmap.

Sumber dan penskalakan gambar

Anda harus membuat sumber gambar pada beberapa ukuran yang direkomendasikan, untuk memastikan bahwa aplikasi Anda terlihat hebat saat Windows menskalakannya. Saat menentukan Sumber untuk Gambar, Anda dapat menggunakan konvensi penamaan yang akan secara otomatis mereferensikan sumber daya yang benar untuk penskalaan saat ini. Untuk detail konvensi penamaan dan info selengkapnya, lihat Quickstart: Menggunakan sumber daya file atau gambar.

Untuk informasi selengkapnya tentang cara mendesain penskalaan, lihat Panduan UX untuk tata letak dan penskalaan.

Gambar dan ImageBrush dalam kode

Biasanya elemen Image dan ImageBrush ditentukan menggunakan XAML daripada kode. Ini karena elemen-elemen ini sering kali merupakan output alat desain sebagai bagian dari definisi UI XAML.

Jika Anda menentukan Gambar atau ImageBrush menggunakan kode, gunakan konstruktor default, lalu atur properti sumber yang relevan (Image.Source atau ImageBrush.ImageSource). Properti sumber memerlukan BitmapImage (bukan URI) saat Anda mengaturnya menggunakan kode. Jika sumber Anda adalah aliran, gunakan metode SetSourceAsync untuk menginisialisasi nilai. Jika sumber Anda adalah URI, yang menyertakan konten di aplikasi Anda yang menggunakan skema ms-appx atau ms-resource , gunakan konstruktor BitmapImage yang mengambil URI. Anda mungkin juga mempertimbangkan untuk menangani peristiwa ImageOpened jika ada masalah waktu dengan mengambil atau mendekode sumber gambar, di mana Anda mungkin memerlukan konten alternatif untuk ditampilkan hingga sumber gambar tersedia. Sebagai contoh kode, lihat sampel Galeri WinUI 3.

Nota

Jika Anda membuat gambar menggunakan kode, Anda dapat menggunakan penanganan otomatis untuk mengakses sumber daya yang tidak memenuhi syarat dengan kualifikasi skala dan budaya saat ini, atau Anda dapat menggunakan ResourceManager dan ResourceMap dengan kualifikasi untuk budaya dan skala untuk mendapatkan sumber daya secara langsung. Untuk informasi selengkapnya, lihat Sistem manajemen sumber daya.

Artikel terkait

• Audio, video, kamera
• Kelas gambar
• Kelas ImageBrush