Görsel

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), Image yerel bir dosyadan, URI'den veya akıştan yüklenebilen bir görüntü görüntüler. Animasyonlu GIF'ler de dahil olmak üzere standart platform görüntü biçimleri desteklenir ve yerel Ölçeklenebilir Vektör Grafikleri (SVG) dosyaları da desteklenir. .NET MAUI uygulama projesine görüntü ekleme hakkında daha fazla bilgi için bkz . .NET MAUI uygulama projesine görüntü ekleme.

Image aşağıdaki özellikleri tanımlar:

• Aspect, türündeki Aspectgörüntünün ölçeklendirme modunu tanımlar.
• IsAnimationPlayingtüründe bool, animasyonlu GIF'in oynatılıp oynatılmadığını veya durdurulduğunu belirler. Bu özelliğin varsayılan değeridir false.
• IsLoadingtüründe bool, görüntünün yükleme durumunu gösterir. Bu özelliğin varsayılan değeridir false.
• IsOpaquetüründe bool, işleme altyapısının görüntü işlenirken opak olarak davranıp davranamayacağını gösterir. Bu özelliğin varsayılan değeridir false.
• Source, türündeki ImageSourcegörüntünün kaynağını belirtir.

Bu özellikler nesneler tarafından BindableProperty desteklenir; başka bir deyişle bunlar stillendirilebilir ve veri bağlamalarının hedefi olur.

sınıfı, ImageSource farklı kaynaklardan görüntü yüklemek için kullanılabilecek aşağıdaki yöntemleri tanımlar:

• FromFile , yerel bir FileImageSource dosyadan görüntü okuyan bir döndürür.
• FromUri , belirtilen bir UriImageSource URI'den görüntü indiren ve okuyan bir döndürür.
• FromStreamStreamImageSource, görüntü verilerini sağlayan bir akıştan görüntü okuyan bir döndürür.

XAML'de, dosya adı veya URI özelliği için Source dize değeri olarak belirtilerek dosyalardan ve URI'lerden görüntüler yüklenebilir. Görüntüler, özel işaretleme uzantıları aracılığıyla XAML'deki akışlardan da yüklenebilir.

Uygulama simgeleri ve uygulamanıza giriş ekranı ekleme hakkında bilgi için bkz . Uygulama simgeleri ve Giriş ekranı.

Yerel görüntü yükleme

Resimler, derleme eyleminin otomatik olarak MauiImage olarak ayarlanacağı projenizin Resources\Images klasörüne sürükleyerek uygulama projenize eklenebilir. Derleme zamanında vektör görüntüleri hedef platform ve cihaz için doğru çözünürlüklerde yeniden boyutlandırılır ve uygulama paketinize eklenir. Farklı platformlar farklı görüntü çözünürlüklerini desteklediğinden ve işletim sistemi cihazın özelliklerine göre çalışma zamanında uygun görüntü çözünürlüğünü seçtiğinden bu gereklidir.

Android kaynak adlandırma kurallarına uymak için tüm yerel görüntü dosya adları küçük harfli olmalı, harf karakteriyle başlayıp bitmelidir ve yalnızca alfasayısal karakterler veya alt çizgi içermelidir. Daha fazla bilgi için bkz . developer.android.com uygulama kaynaklarına genel bakış .

Dosya adlandırma ve yerleştirme için bu kurallara uymak, aşağıdaki XAML'nin bir görüntüyü yüklemesine ve görüntülemesine olanak tanır:

<Image Source="dotnet_bot.png" />

Eşdeğer C# kodu:

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

ImageSource.FromFile yöntemi bir string bağımsız değişken gerektirir ve dosyadan görüntüyü okuyan yeni FileImageSource bir nesne döndürür. Dosya adının özelliğine bağımsız değişken Image.Source olarak belirtilmesine olanak tanıyan örtük bir string dönüştürme işleci de vardır:

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

Uzak görüntü yükleme

Uzak görüntüler, özelliğin değeri Source olarak bir URI belirtilerek indirilebilir ve görüntülenebilir:

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

Eşdeğer C# kodu:

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

ImageSource.FromUri yöntemi bir Uri bağımsız değişken gerektirir ve görüntüsünden Uriokuyan yeni UriImageSource bir nesne döndürür. Dize tabanlı URI'ler için örtük dönüştürme de vardır:

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

Görüntü önbelleğe alma

İndirilen görüntülerin Önbelleğe Alma varsayılan olarak etkindir ve önbelleğe alınmış görüntüler 1 gün boyunca depolanır. Bu davranış, sınıfın UriImageSource özellikleri ayarlanarak değiştirilebilir.

UriImageSource sınıfı aşağıdaki özellikleri tanımlar:

• Uritüründe Uri, görüntü için indirilecek görüntünün URI'sini temsil eder.
• CacheValiditytüründe TimeSpan, görüntünün ne kadar süreyle yerel olarak depolanacağını belirtir. Bu özelliğin varsayılan değeri 1 gündür.
• CachingEnabledtüründe bool, görüntü önbelleğe almanın etkinleştirilip etkinleştirilmediğini tanımlar. Bu özelliğin varsayılan değeridir true.

Bu özellikler nesneler tarafından BindableProperty desteklenir; başka bir deyişle bunlar stillendirilebilir ve veri bağlamalarının hedefi olur.

Belirli bir önbellek süresini ayarlamak için özelliğini özelliğini ayarlayan CacheValidity bir UriImageSource nesne olarak ayarlayınSource:

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

Eşdeğer C# kodu:

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

Bu örnekte önbelleğe alma süresi 10 gün olarak ayarlanmıştır.

Akıştan görüntü yükleme

Akışlardan aşağıdaki yöntemle ImageSource.FromStream görüntüler yüklenebilir:

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

Yazı tipi yükle simgesi

İşaretlemeyi FontImage genişletme, bir yazı tipi simgesini görüntüleyebilen herhangi bir ImageSourcegörünümde görüntülemenizi sağlar. Sınıfıyla aynı işlevselliği FontImageSource sağlar, ancak daha kısa bir gösterim sağlar.

biçimlendirme FontImage uzantısı, aşağıdaki özellikleri tanımlayan sınıfı tarafından FontImageExtension desteklenir:

• FontFamily türünde string, yazı tipi simgesinin ait olduğu yazı tipi ailesi.
• Glyph yazın string, yazı tipi simgesinin unicode karakter değeri.
• Color türünde Color, yazı tipi simgesi görüntülenirken kullanılacak renk.
• Size türünde double, işlenen yazı tipi simgesinin cihazdan bağımsız birimlerdeki boyutu. Varsayılan değer 30’dur. Ayrıca, bu özellik adlandırılmış yazı tipi boyutuna ayarlanabilir.

Glyph özelliği, içerik özelliğidirFontImageExtension. Bu nedenle, küme ayraçlarıyla ifade edilen XAML işaretleme ifadeleri için, ilk bağımsız değişken olması koşuluyla ifadenin bölümünü ortadan kaldırabilirsiniz Glyph= .

Aşağıdaki XAML örneği, işaretleme uzantısının FontImage nasıl kullanılacağını gösterir:

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

Bu örnekte, sınıf adının kısaltılmış sürümü FontImageExtension , Ionicons yazı tipi ailesinden bir XBox simgesini bir Imageiçinde görüntülemek için kullanılır:

Simgenin unicode karakteri olsa \uf30cda, XAML'de kaçış karakteri olması gerekir ve bu nedenle olur .

Bir FontImageSource nesnede yazı tipi simgesi verilerini belirterek yazı tipi simgelerini görüntüleme hakkında bilgi için bkz . Yazı tipi simgelerini görüntüleme.

Animasyonlu GIF'leri yükleme

.NET MAUI, küçük, animasyonlu GIF'leri görüntüleme desteği içerir. Bu, özelliği animasyonlu gif dosyası olarak ayarlanarak Source gerçekleştirilir:

<Image Source="demo.gif" />

Varsayılan olarak, animasyonlu GIF yüklendiğinde oynatılmaz. Bunun nedeni, animasyonlu GIF'in IsAnimationPlaying yürütüldüğünü veya durdurulduğunu denetleen özelliğinin varsayılan değerine sahip olmasıdır false. Bu nedenle, animasyonlu GIF yüklendiğinde özelliği olarak ayarlanana IsAnimationPlaying truekadar oynatılmaz. özelliği falseolarak sıfırlanarak IsAnimationPlaying kayıttan yürütme durdurulabilir. BU özelliğin GIF olmayan bir görüntü kaynağı görüntülerken hiçbir etkisi olmadığını unutmayın.

Görüntü ölçeklendirmeyi denetleme

Aspect özelliği, görüntünün görüntü alanına sığacak şekilde nasıl ölçeklendirileceğini belirler ve numaralandırmanın Aspect üyelerinden birine ayarlanmalıdır:

• AspectFit - Resmin tamamının görüntü alanına sığması için resmi (gerekirse) letterbox'lar; resmin geniş mi yoksa uzun mu olduğuna bağlı olarak üst/alt veya yanlara boş alan eklenir.
• AspectFill - görüntüyü en boy oranını korurken görüntü alanını dolduracak şekilde klipsler.
• Fill - Görüntüyü tamamen genişletir ve ekran alanını tam olarak doldurur. Bu, görüntünün bozulmasına neden olabilir.
• Center - görüntüyü görüntü alanına ortalar ve en boy oranını korur.