İçindeki görüntüler Xamarin.Forms

Örneği indirin

Görüntüler, ile platformlar arasında paylaşılabilir , her platform için özel olarak yüklenebilir ya da görüntülenmek üzere indirilebilirler.

Görüntüler, uygulama gezintisi, kullanışlılık ve marka açısından önemli bir parçasıdır. Xamarin.Forms uygulamaların tüm platformlarda görüntü paylaşabilmeleri gerekir, ancak büyük olasılıkla her platformda farklı görüntüler de görüntülenebilir.

Simgeler ve giriş ekranları için platforma özgü görüntüler de gereklidir; Bunların platforma göre yapılandırılması gerekir.

Görüntü görüntüleri

Xamarin.FormsImagebir sayfadaki görüntüleri görüntülemek için görünümü kullanır. Birçok önemli özelliğe sahiptir:

• Xamarin_Forms _Image_Source "Data-LinkType =" Absolute-path ">Source -bir ImageSource örnek, dosya, URI veya kaynak, görüntüyü görüntülenecek şekilde ayarlar.
• Xamarin_Forms _Image_Aspect "Data-LinkType =" Absolute-path ">Aspect -görüntünün görüntülendiği sınırlar dahilinde (Esnetme, kırpma veya letterbox) nasıl boyutlandırılacağını belirtir.

ImageSource örnekler, her bir görüntü kaynağı türü için statik yöntemler kullanılarak alınabilir:

• Xamarin_Forms _ImageSource_FromFile_System_String_ "Data-LinkType =" Absolute-path ">FromFile -her platformda çözümlenecede bir dosya adı veya FilePath gerektirir.
• Xamarin_Forms _ImageSource_FromUri_System_Uri_ "Data-LinkType =" Absolute-path ">FromUri -URI nesnesi gerektirir, örn. new Uri("http://server.com/image.jpg") .
• FromResource -Uygulama veya .NET Standard kitaplığı projesine gömülü bir görüntü dosyası için bir FromResourceöğesine bir kaynak tanımlayıcısı gerektirir.
• Xamarin_Forms _ImageSource_FromStream_System_Func_System_IO_Stream__ "Data-LinkType =" Absolute-path ">FromStream -görüntü verisi sağlayan bir akış gerektirir.

Xamarin_Forms _Image_Aspect "Data-LinkType =" Absolute-path ">Aspect özelliği görüntünün görüntüleme alanına sığacak şekilde nasıl ölçeklendirileceğini belirler:

• Xamarin_Forms _Aspect_Fill "Data-LinkType =" Absolute-path ">Fill -görüntüyü, görüntü alanını tamamen ve tam olarak dolduracak şekilde uzatır. Bu, görüntünün bozuk oluşmasına neden olabilir.
• Xamarin_Forms _Aspect_AspectFill "Data-LinkType =" Absolute-path ">AspectFill -görüntüyü, en boy (bozulma olmadan) korurken görüntüleme alanını dolduracak şekilde kırpar.
• Xamarin_Forms _Aspect_AspectFit "Data-LinkType =" Absolute-path ">AspectFit -Letter, görüntünün geniş veya uzun olmasına bağlı olarak üst/alt tarafa veya kenarlara eklenen boş alana sahip olacak şekilde görüntüyü (gerekliyse) görüntüler.

Görüntüler yerel bir dosyadan, katıştırılmış bir kaynaktanyüklenebilir veyabir akıştan yüklenebilir. Ayrıca, yazı tipi simgeleri Image bir nesne içindeki yazı tipi simgesi verileri belirtilerek görünüm tarafından görüntülenebilir FontImageSource . Daha fazla bilgi için bkz . yazıtipi kılavuzunda yazı tipi simgelerini görüntüleme .

Yerel görüntüler

Görüntü dosyaları her uygulama projesine eklenebilir ve Xamarin.Forms paylaşılan koddan başvurulmalıdır. Farklı platformlarda farklı çözünürlüklerin veya aralarında küçük farklar bulunan tasarımların kullanılması gibi platforma özgü görüntüler söz konusu olduğunda bu görüntü dağıtma yönteminin kullanılması gerekir.

Tüm uygulamalarda tek bir görüntü kullanmak için, aynı dosya adı her platformda kullanılmalıdırve geçerli bir Android kaynak adı olmalıdır (yani yalnızca küçük harf, sayı, alt çizgi ve döneme izin verilir).

• iOS -iOS 9 ' danbu yana görüntüleri yönetmek ve desteklemek için tercih edilen yöntem, çeşitli cihazları desteklemek için gereken bir görüntünün tüm sürümlerini içermesi ve bir uygulama için ölçek faktörleri içermesi gerekir. Daha fazla bilgi için bkz. varlık kataloğu görüntü kümesine görüntü ekleme.
• Kaynak/drawable dizinindeki resimleri derleme eylemiyle, Android 'e yerleştir : AndroidResource. Bir görüntünün yüksek ve düşük DPı sürümleri de sağlanabilir (örneğin, drawable-ldpı, drawable-hdpive drawable-xhbagibi uygun kaynak alt dizinlerinde bulunabilir).
• Evrensel Windows Platformu (UWP) -varsayılan olarak, görüntülerin derleme eylemi: içerikile uygulamanın kök dizinine yerleştirilmesi gerekir. Alternatif olarak, görüntüler, daha sonra platforma özel olarak belirtilen farklı bir dizine yerleştirilebilir. Daha fazla bilgi için Windows varsayılan görüntü dizini' ne bakın.

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

<Image Source="waterfront.jpg" />

Eşdeğer C# kodu aşağıdaki gibidir:

var image = new Image { Source = "waterfront.jpg" };

Aşağıdaki ekran görüntüleri, her platformda yerel görüntü görüntülemenin sonucunu göstermektedir:

Daha fazla esneklik için, Device.RuntimePlatform Bu kod örneğinde gösterildiği gibi, bazı veya tüm platformlar için farklı bir görüntü dosyası veya yolu seçmek üzere özelliği kullanılabilir:

image.Source = Device.RuntimePlatform == Device.Android
                ? ImageSource.FromFile("waterfront.jpg")
                : ImageSource.FromFile("Images/waterfront.jpg");

Yerel çözünürlükler (Retina ve yüksek DPı)

iOS, Android ve UWP, işletim sisteminin cihaz özelliklerine göre çalışma zamanında uygun görüntüyü seçtiği farklı görüntü çözünürlükleri için destek içerir. Xamarin.Forms Yerel görüntüleri yüklemek için yerel platformlar API 'Lerini kullanır, bu nedenle dosyalar doğru şekilde adlandırılmışsa ve projede bulunuyorsa alternatif çözünürlükleri otomatik olarak destekler.

İOS 9 ' dan sonra görüntüleri yönetmenin tercih edilen yolu, gereken her çözümlemenin görüntülerini uygun varlık kataloğu görüntü kümesine sürüklemektir. Daha fazla bilgi için bkz. varlık kataloğu görüntü kümesine görüntü ekleme.

İOS 9 ' dan önce, görüntünün Retina sürümleri, kaynak klasörüne (örneğin, dosya uzantısından önce dosya adı üzerinde bir @2x veya @3x sonekleri ile üç kez) yerleştirilecektir (ör. myimage@2x.png). Ancak, bir iOS uygulamasındaki görüntülerle çalışma yöntemi Apple tarafından kullanımdan kaldırılmıştır. Daha fazla bilgi için bkz. görüntü boyutları ve dosya adları.

Android alternatif çözüm görüntüleri, aşağıdaki ekran görüntüsünde gösterildiği gibi, Android projesindeki özel olarak adlandırılmış dizinlere yerleştirilmelidir:

UWP görüntü dosyası adları, dosya uzantısından önce ile, xxx Örneğin, varlığa uygulanan ölçekleme yüzdesi olan xxx. Daha sonra resimler, ölçek değiştirici olmadan kod veya XAML 'de, örneğin, yalnızca myimage.pngolabilir. Platform, ekran 'ın geçerli DPı 'sini temel alarak en yakın uygun varlık ölçeğini seçer.

Görüntüleri görüntüleyen ek denetimler

Bazı denetimlerin, şöyle bir resim görüntüleyen özellikleri vardır:

• ButtonButtonImageSource üzerinde görüntülenecek bir bit eşlem resmine ayarlanabilir bir Xamarin_Forms _Button_ImageSource "Data-LinkType =" absolute-path ">özelliği vardır Button . Daha fazla bilgi için bkz. bit eşlemler düğme Ile kullanma.

• ImageButtonImageButtonSource içinde görüntülenecek görüntüye ayarlanabilir bir Xamarin_Forms _ImageButton_Source "Data-LinkType =" absolute-path ">özelliği vardır ImageButton . Daha fazla bilgi için bkz. görüntü kaynağını ayarlama.

• ToolbarItemToolbarItemIconImageSource bir dosya, katıştırılmış kaynak, URI veya akıştan yüklenen bir görüntüye ayarlanılabilen bir Xamarin_Forms _MenuItem_IconImageSource "Data-LinkType =" absolute-path ">özelliği vardır.

• ImageCellImageCellImageSource bir dosya, katıştırılmış kaynak, URI veya akıştan alınan bir görüntüye ayarlanılabilen bir Xamarin_Forms _ImageCell_ImageSource "Data-LinkType =" absolute-path ">özelliği vardır.

• Page. Öğesinden türetilen herhangi bir sayfa türü, PagePage bir dosya, KATıŞTıRıLMıŞ kaynak, URI veya akış atanabilen Xamarin_Forms _Page_IconImageSource "Data-LinkType =" Absolute-path ">IconImageSource ve Xamarin_Forms _Page_BackgroundImageSource" Data-linktype = "Absolute-path" >BackgroundImageSource özelliklerine sahiptir. Bazı durumlarda, örneğin bir, görüntülendiğinde NavigationPageContentPage , platform tarafından destekleniyorsa simge görüntülenir.

  Önemli

  İOS 'ta, Xamarin_Forms _Page_IconImageSource "Data-LinkType =" Absolute-path ">Page.IconImageSource özelliği bir varlık kataloğu görüntü kümesindeki görüntüden doldurulamaz. Bunun yerine, özelliğin simge görüntülerini Page.IconImageSource bir dosya, katıştırılmış kaynak, URI veya akıştan yükleyin.

Gömülü görüntüler

Katıştırılmış görüntüler aynı zamanda bir uygulamayla (yerel görüntüler gibi) birlikte gönderilir, ancak her uygulamanın dosya yapısında görüntünün bir kopyasına sahip olmak yerine, görüntü dosyası derlemeye kaynak olarak katıştırılır. Bu görüntüleri dağıtmanın bu yöntemi, her platformda aynı görüntüler kullanıldığında ve özellikle, görüntü kodla paketlenmiş şekilde bileşen oluşturmaya uygun olduğunda önerilir.

Bir projeyi bir projeye eklemek için sağ tıklayarak yeni öğeler ekleyin ve eklemek istediğiniz görüntüyü/s 'yi seçin. Varsayılan olarak görüntüde derleme eylemi olur: yok; Bunun, derleme eylemi: EmbeddedResourceolarak ayarlanması gerekir.

Katıştırılmış görüntüleri projenizde klasörlere yerleştirirseniz, klasör adları da noktalarla (.) ayrılır. Kaynak KIMLIĞINDE. beach.jpg görüntüsünü myImages adlı bir klasöre taşımak, kaynak kimliği WorkingWithImages.MyImages.beach.jpg neden olabilir

Katıştırılmış bir görüntüyü yükleme kodu, kaynak kimliğini aşağıda gösterildiği gibi yöntemine geçirir:

Image embeddedImage = new Image
{
    Source = ImageSource.FromResource("WorkingWithImages.beach.jpg", typeof(MyClass).GetTypeInfo().Assembly)
};

Şu anda kaynak tanımlayıcıları için örtülü dönüştürme yoktur. Bunun yerine, ekli görüntüleri ImageSource.FromResource yüklemek için veya kullan new ResourceImageSource() gerekir.

Aşağıdaki ekran görüntüleri, her platformda ekli bir görüntü görüntülemenin sonucu gösterir:

XAML

'den 'a yerleşik tür dönüştürücüsü olduğundan, bu görüntü türleri XAML tarafından yerel stringResourceImageSource olarak yüklenemiyor. Bunun yerine, XAML'de belirtilen bir Kaynak Kimliği kullanılarak görüntüleri yüklemek için basit bir özel XAML işaretleme uzantısı yazabilirsiniz:

[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}

Bu uzantıyı kullanmak için proje için doğru ad alanı ve derleme değerlerini kullanarak xmlns XAML'ye bir özel ekleyin. Görüntü kaynağı daha sonra şu söz dizimi kullanılarak ayarlanır: {local:ImageResource WorkingWithImages.beach.jpg} . Tam bir XAML örneği aşağıda gösterilmiştir:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
   x:Class="WorkingWithImages.EmbeddedImagesXaml">
 <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
   <!-- use a custom Markup Extension -->
   <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
 </StackLayout>
</ContentPage>

Ekli görüntülerle ilgili sorunları giderme

Kod hatalarını ayıklama

Belirli bir görüntü kaynağının neden yüklenmediğini anlamak bazen zor olduğundan, kaynakların doğru yapılandırıldığını onaylamaya yardımcı olması için aşağıdaki hata ayıklama kodu geçici olarak bir uygulamaya eklenebilir. Kaynak yükleme sorunlarında hata ayıklamaya yardımcı olmak için verilen derlemeye eklenmiş tüm bilinen kaynakları Konsola çıkış olarak gösterir.

using System.Reflection;
// ...
// NOTE: use for debugging, not in released app code!
var assembly = typeof(MyClass).GetTypeInfo().Assembly;
foreach (var res in assembly.GetManifestResourceNames())
{
    System.Diagnostics.Debug.WriteLine("found resource: " + res);
}

Diğer projelere eklenmiş görüntüler

Varsayılan olarak, ImageSource.FromResource yöntemi yalnızca yöntemini çağıran kodla aynı derlemede görüntüleri ImageSource.FromResource aratır. Yukarıdaki hata ayıklama kodunu kullanarak deyimini her derlemede bilinen bir olarak değiştirerek hangi derlemelerin belirli typeof()Type bir kaynak içerdiğini görebilirsiniz.

Ancak, ekli görüntü aranan kaynak derleme yöntemine bağımsız değişken olarak ImageSource.FromResource belirtilebilir:

var imageSource = ImageSource.FromResource("filename.png",
            typeof(MyClass).GetTypeInfo().Assembly);

Görüntüleri indirme

Görüntüler, aşağıdaki XAML'de gösterildiği gibi görüntü için otomatik olarak indirilebilir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="WorkingWithImages.DownloadImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="Image UriSource Xaml" />
    <Image Source="https://aka.ms/campus.jpg" />
    <Label Text="campus.jpg gets downloaded from microsoft.com" />
  </StackLayout>
</ContentPage>

Eşdeğer C# kodu aşağıdaki gibidir:

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

Veri Xamarin_Forms _ImageSource_FromUri_System_Uri_" data-linktype="absolute-path">yöntemi bir nesnesi gerektirir ve 'den okunan yeni ImageSource.FromUriUriUriImageSource bir Uri döndürür.

URI dizeleri için de örtülü bir dönüştürme vardır, bu nedenle aşağıdaki örnek de çalışır:

webImage.Source = "https://aka.ms/campus.jpg";

Aşağıdaki ekran görüntüleri, her platformda uzak görüntü görüntülemenin sonucu gösterir:

İndirilen görüntü önbelleğe alma

Ayrıca, UriImageSource aşağıdaki özelliklerle yapılandırılmış indirilen görüntülerin önbelleğe alınmasını da destekler:

• Xamarin_Forms _UriImageSource_CachingEnabled" data-linktype="absolute-path">- önbelleğe alma özelliğinin etkin olup olmadığı CachingEnabledtrue (varsayılan olarak).
• Xamarin_Forms _UriImageSource_CacheValidity data-linktype="absolute-path">- Görüntünün yerel olarak ne kadar süreyle depo CacheValidity olacağını tanımlayan TimeSpan bir.

Önbelleğe Alma varsayılan olarak etkindir ve görüntüyü 24 saat boyunca yerel olarak depolar. Belirli bir görüntüde önbelleğe almayı devre dışı bırakmak için görüntü kaynağını aşağıdaki gibi örnek olarak kullanın:

image.Source = new UriImageSource { CachingEnabled = false, Uri = new Uri("https://server.com/image") };

Belirli bir önbellek süresi ayarlamak için (örneğin, 5 gün) görüntü kaynağının örneğini aşağıdaki gibi ayarlayın:

webImage.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Yerleşik önbelleğe alma, her hücrede bir görüntü ayar (veya bağlama) ve hücre yeniden görünüme kaydırıldıklarında yerleşik önbelleğin görüntüyü yeniden yükleme işlemini askıya aldırarak görüntü listelerini kaydırma gibi senaryoları desteklemeyi çok kolaylaştırır.

Animasyonlu GIF'ler

Xamarin.Forms , küçük, animasyonlu GIF'leri görüntüleme desteği içerir. Bu, "Xamarin_Forms _Image_Source" data-linktype="absolute-path">özelliğini animasyonlu bir GIF dosyasına Image.Source ayarerek başarılı olur:

<Image Source="demo.gif" />

Varsayılan olarak, animasyonlu BIR GIF yüklendiğinde bu gif oynanmayacaktır. Bunun nedeni, animasyonlu BIR GIF'in oynanıp oynanmayıp durdurulmay olmadığını IsAnimationPlaying kontrol eden özelliğinin varsayılan değerine sahip olup olmadığıdır. false türüne sahip bu özellik, bir nesnesi tarafından desteklemektedir. Bu, bir veri bağlamanın hedefi olduğu ve stile boolBindableProperty sahip olduğu anlamına gelir.

Bu nedenle, animasyonlu BIR GIF yüklendiğinde, özelliği olarak ayarlanıncaya IsAnimationPlaying kadar bu gif oynanmayacak. true Daha sonra özelliği olarak ayar tarafından kayıttan yürütme IsAnimationPlayingfalse durdurulur. GIF olmayan bir görüntü kaynağı görüntülenirken bu özelliğin hiçbir etkisi olmadığını unutmayın.

Simgeler ve giriş ekranları

Görünümle ilgili değildir Image ancak uygulama simgeleri ve giriş ekranları da projelerde görüntülerin önemli bir Xamarin.Forms kullanımıdır.

Uygulamalar için simge ve giriş Xamarin.Forms ekranı ayarlama, uygulama projelerinin her birsinde yapılır. Bu, iOS, Android ve UWP için doğru boyutlandırilmiş görüntüler oluşturma anlamına gelir. Bu görüntüler her platformun gereksinimlerine göre adlandırılmış ve bulunuyordur.

Simgeler

Bu uygulama kaynaklarını oluşturma hakkında daha fazla bilgi için iOSGörüntülerle Çalışma, Google Iconographyve kutucuk ve simge varlıkları için UWP Yönergeleri'ne bakın.

Ayrıca, bir nesnede yazı tipi Image simgesi verileri belirterek yazı tipi simgeleri görünüm tarafından FontImageSource görüntülenebilir. Daha fazla bilgi için Yazı tipleri kılavuzunun Yazı tipi simgelerini görüntüleme'ye bakın.

Giriş ekranları

Yalnızca iOS ve UWP uygulamaları için giriş ekranı (başlangıç ekranı veya varsayılan görüntü olarak da adlandırılır) gerekir.

Windows Geliştirme Merkezi'da iOS Görüntü veGiriş ekranları ile çalışma belgelerine bakın.

İlgili bağlantılar

• WorkingWithImages (örnek)
• iOS Görüntülerle Çalışma
• Android SimgeOgrafisi
• Kutucuk ve simge varlıkları için yönergeler