Gambar

UI Aplikasi Multi-platform .NET (.NET MAUI) Image menampilkan gambar yang dapat dimuat dari file lokal, URI, atau aliran. Format gambar platform standar didukung, termasuk GIF animasi, dan file Scalable Vector Graphics (SVG) lokal juga didukung. Untuk informasi selengkapnya tentang menambahkan gambar ke proyek aplikasi .NET MAUI, lihat Menambahkan gambar ke proyek aplikasi .NET MAUI.

Image menentukan properti berikut:

• Aspect, dari jenis Aspect, mendefinisikan mode penskalaan gambar.
• IsAnimationPlaying, dari jenis bool, menentukan apakah GIF animasi diputar atau dihentikan. Nilai default properti ini adalah false.
• IsLoading, dari jenis bool, menunjukkan status pemuatan gambar. Nilai default properti ini adalah false.
• IsOpaque, dari jenis bool, menunjukkan apakah mesin penyajian dapat memperlakukan gambar sebagai buram saat merendernya. Nilai default properti ini adalah false.
• Source, dari jenis ImageSource, menentukan sumber gambar.

Properti ini didukung oleh BindableProperty objek, yang berarti dapat ditata, dan menjadi target pengikatan data.

Catatan

Ikon font dapat ditampilkan oleh dengan Image menentukan data ikon font sebagai FontImageSource objek. Untuk informasi selengkapnya, lihat Menampilkan ikon font.

Kelas ImageSource menentukan metode berikut yang dapat digunakan untuk memuat gambar dari sumber yang berbeda:

• FromFile mengembalikan yang FileImageSource membaca gambar dari file lokal.
• FromUriUriImageSource mengembalikan yang mengunduh dan membaca gambar dari URI tertentu.
• FromStream mengembalikan yang StreamImageSource membaca gambar dari aliran yang memasok data gambar.

Di XAML, gambar dapat dimuat dari file dan URI dengan menentukan nama file atau URI sebagai nilai string untuk Source properti . Gambar juga dapat dimuat dari aliran di XAML melalui ekstensi markup kustom.

Penting

Gambar akan ditampilkan pada resolusi penuhnya kecuali ukuran Image dibatasi oleh tata letaknya, atau HeightRequest properti Image atau WidthRequest ditentukan.

Untuk informasi tentang menambahkan ikon aplikasi dan layar percikan ke aplikasi Anda, lihat Ikon aplikasi dan layar Splash.

Memuat gambar lokal

Gambar dapat ditambahkan ke proyek aplikasi Anda dengan menyeretnya ke folder Resources\Images proyek Anda, di mana tindakan build-nya akan secara otomatis diatur ke MauiImage. Pada waktu build, gambar vektor diubah ukurannya menjadi resolusi yang benar untuk platform dan perangkat target, dan ditambahkan ke paket aplikasi Anda. Ini diperlukan karena platform yang berbeda mendukung resolusi gambar yang berbeda, dan sistem operasi memilih resolusi gambar yang sesuai saat runtime berdasarkan kemampuan perangkat.

Untuk mematuhi aturan penamaan sumber daya Android, semua nama file gambar lokal harus huruf kecil, dimulai dan diakhapi dengan karakter huruf, dan hanya berisi karakter alfanumerik atau garis bawah. Untuk informasi selengkapnya, lihat Gambaran umum sumber daya aplikasi di developer.android.com.

Penting

.NET MAUI mengonversi file SVG ke file PNG. Oleh karena itu, saat menambahkan file SVG ke proyek aplikasi .NET MAUI Anda, file tersebut harus dirujuk dari XAML atau C# dengan ekstensi .png.

Mematuhi aturan ini untuk penamaan dan penempatan file memungkinkan XAML berikut memuat dan menampilkan gambar:

<Image Source="dotnet_bot.png" />

Kode C# yang setara adalah:

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

Metode ImageSource.FromFile ini memerlukan string argumen, dan mengembalikan objek baru FileImageSource yang membaca gambar dari file. Ada juga operator konversi implisit yang memungkinkan nama file ditentukan sebagai string argumen ke Image.Source properti:

Image image = new Image { Source = "dotnet_bot.png" };

Memuat gambar jarak jauh

Gambar jarak jauh dapat diunduh dan ditampilkan dengan menentukan URI sebagai nilai Source properti:

<Image Source="https://aka.ms/campus.jpg" />

Kode C# yang setara adalah:

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

Metode ImageSource.FromUri ini memerlukan Uri argumen, dan mengembalikan objek baru UriImageSource yang membaca gambar dari Uri. Ada juga konversi implisit untuk URI berbasis string:

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Penembolokan gambar

Penembolokan gambar yang diunduh diaktifkan secara default, dengan gambar yang di-cache disimpan selama 1 hari. Perilaku ini dapat diubah dengan mengatur properti UriImageSource kelas.

Kelas UriImageSource menentukan properti berikut:

• Uri, dari jenis Uri, mewakili URI gambar yang akan diunduh untuk ditampilkan.
• CacheValidity, dari jenis TimeSpan, menentukan berapa lama gambar akan disimpan secara lokal. Nilai default properti ini adalah 1 hari.
• CachingEnabled, dari jenis bool, menentukan apakah penembolokan gambar diaktifkan. Nilai default properti ini adalah true.

Properti ini didukung oleh BindableProperty objek, yang berarti dapat ditata, dan menjadi target pengikatan data.

Untuk mengatur periode cache tertentu, atur Source properti ke UriImageSource objek yang mengatur propertinya CacheValidity :

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

Kode C# yang setara adalah:

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

Dalam contoh ini, periode penembolokan diatur ke 10 hari.

Memuat gambar dari aliran

Gambar dapat dimuat dari aliran dengan ImageSource.FromStream metode :

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Penting

Penembolokan gambar dinonaktifkan di Android saat memuat gambar dari streaming dengan ImageSource.FromStream metode . Hal ini disebabkan oleh kurangnya data untuk membuat kunci cache yang wajar.

Muat ikon font

Ekstensi FontImage markup memungkinkan Anda menampilkan ikon font dalam tampilan apa pun yang dapat menampilkan ImageSource. Ini menyediakan fungsionalitas FontImageSource yang sama dengan kelas, tetapi dengan representasi yang lebih ringkas.

Ekstensi FontImage markup didukung oleh FontImageExtension kelas , yang menentukan properti berikut:

• FontFamily jenis string, keluarga font tempat ikon font berada.
• Glyph jenis string, nilai karakter unicode ikon font.
• Color jenis Color, warna yang akan digunakan saat menampilkan ikon font.
• Size jenis double, ukuran, dalam unit independen perangkat, dari ikon font yang dirender. Nilai default adalah 30. Selain itu, properti ini dapat diatur ke ukuran font bernama.

Catatan

Parser XAML memungkinkan FontImageExtension kelas disingkat sebagai FontImage.

Properti Glyph adalah properti konten dari FontImageExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Glyph= bagian ekspresi asalkan itu adalah argumen pertama.

Contoh XAML berikut menunjukkan cara menggunakan FontImage ekstensi markup:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

Dalam contoh ini, versi singkat dari FontImageExtension nama kelas digunakan untuk menampilkan ikon XBox, dari keluarga font Ionicons, dalam Image:

Sementara karakter unicode untuk ikon adalah \uf30c, itu harus lolos di XAML dan menjadi .

Untuk informasi tentang menampilkan ikon font dengan menentukan data ikon font dalam FontImageSource objek, lihat Menampilkan ikon font.

Memuat GIF animasi

.NET MAUI mencakup dukungan untuk menampilkan GIF kecil animasi. Ini dicapai dengan mengatur Source properti ke file GIF animasi:

<Image Source="demo.gif" />

Penting

Meskipun dukungan GIF animasi di .NET MAUI mencakup kemampuan untuk mengunduh file, gif animasi tidak mendukung penembolokan atau streaming.

Secara default, ketika GIF animasi dimuat, GIF tidak akan diputar. Ini karena IsAnimationPlaying properti , yang mengontrol apakah GIF animasi diputar atau dihentikan, memiliki nilai falsedefault . Oleh karena itu, ketika GIF animasi dimuat, GIF tidak akan diputar sampai IsAnimationPlaying properti diatur ke true. Pemutaran dapat dihentikan dengan mengatur ulang properti ke IsAnimationPlayingfalse. Perhatikan bahwa properti ini tidak berpengaruh saat menampilkan sumber gambar non-GIF.

Mengontrol penskalakan gambar

Properti Aspect menentukan bagaimana gambar akan diskalakan agar sesuai dengan area tampilan, dan harus diatur ke salah satu anggota Aspect enumerasi:

• AspectFit - kotak surat gambar (jika diperlukan) sehingga seluruh gambar cocok dengan area tampilan, dengan ruang kosong ditambahkan ke atas/bawah atau samping tergantung pada apakah gambar lebar atau tinggi.
• AspectFill - mengklip gambar sehingga mengisi area tampilan sambil mempertahankan rasio aspek.
• Fill - membentangkan gambar untuk sepenuhnya dan mengisi area tampilan. Ini dapat mengakibatkan gambar terdistorsi.
• Center - mempusatkan gambar di area tampilan sambil mempertahankan rasio aspek.