Bagikan melalui

Gambar dan kuas gambar

  • Artikel

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 untuk ImageBrush menyertakan efek dekoratif untuk teks, atau latar belakang untuk kontrol atau kontainer tata letak.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Windows.UI.Xaml.Media .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol.

Mulai dari Windows 10, versi 1607, elemen Gambar mendukung gambar GIF animasi. Saat Anda menggunakan BitmapImage sebagai Sumber gambar, Anda dapat mengakses API BitmapImage untuk mengontrol pemutaran gambar GIF animasi. Untuk informasi selengkapnya, lihat Komentar di halaman kelas BitmapImage .

Catatan

Dukungan GIF animasi tersedia saat aplikasi Anda dikompilasi untuk Windows 10, versi 1607 dan berjalan pada versi 1607 (atau yang lebih baru). Saat aplikasi Anda dikompilasi atau dijalankan pada versi sebelumnya, bingkai pertama GIF ditampilkan, tetapi tidak dianimasikan.

Buat sebuah citra

Buka aplikasi Galeri WinUI 3 dan lihat ImageBrushes beraksi.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Gambar

Contoh ini menunjukkan cara membuat gambar dengan menggunakan objek Gambar .

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

Berikut adalah objek Gambar yang dirender.

Contoh elemen gambar

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 proyek kami dan mendeklarasikan pengaturan proyek yang menyertakan file gambar sebagai konten.

GambarBrush

Dengan objek ImageBrush, Anda dapat menggunakan gambar untuk melukis area yang mengambil objek Brush. Misalnya, Anda dapat menggunakan ImageBrush untuk nilai properti Isian Elips atau properti Latar Belakang Kanvas.

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.

Elips yang dicat 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 membentang untuk mengisi dimensi output. Berhati-hatilah dengan pengaturan Stretch ini: jika gambar sumber lebih besar dari area yang berisi, gambar Anda akan diklip, dan ini biasanya tidak diinginkan karena Anda tidak memiliki kontrol apa pun atas viewport seperti yang Anda lakukan dengan Klip yang disukai.
  • 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.

Contoh pengaturan peregangan.

Memangkas gambar

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

Contoh berikutnya memperlihatkan cara menggunakan RectangleGeometry sebagai wilayah klip untuk 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.

Objek Gambar dipotong oleh RectangleGeometry.

Menerapkan opasitas

Anda dapat menerapkan Opacity ke gambar sehingga gambar dirender semi-tembus. 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 keburaman 0,5 dan latar belakang hitam yang menunjukkan melalui keburaman parsial.

Objek Gambar dengan keburaman .5.

Format file gambar

Gambar dan ImageBrush dapat menampilkan format file gambar ini:

  • Joint Photographic Experts Group (JPEG)
  • Grafis Jaringan Portabel (PNG)
  • bitmap (BMP)
  • Format Pertukaran Grafik (GIF)
  • Format File Gambar Bertag (TIFF)
  • 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 bawaan, dan paling banyak akan menampilkan aspek pengodean atau dekode sebagai bagian dari data peristiwa untuk peristiwa beban. 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 namespace Windows.Graphics.Imaging . API ini juga didukung oleh Komponen Pencitraan Windows (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.

WriteableBitmap

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 menggunakan jenis buffer khusus aliran atau bahasa untuk mengisinya. Misalnya kode, lihat 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 Mulai Cepat: 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 untuk menentukan elemen Image dan ImageBrush 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. Misalnya kode, lihat sampel Galeri WinUI.

Catatan

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.

Mendapatkan kode sampel

  • Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.