Xamarin.Forms Resim Öğreticisi

Makale
Developer (Başlangıç)
Tamamlanması için 10 dakika kaldı

Bu öğreticiye başlamadan önce şunları başarıyla tamamlamış olmanız gerekir:

İlk Xamarin.Forms uygulama hızlı başlangıcınızı oluşturun.
StackLayout öğreticisi.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

XAML içinde bir Xamarin.FormsImage oluşturun.
Image görünümünü özelleştirme.
Her platform projesinden bir yerel görüntü dosyası görüntüleme.

Bir görüntüyü göstermeyi ve görünümünü özelleştirmeyi gösteren basit bir uygulama oluşturmak için Visual Studio 2019 veya Mac için Visual Studio kullanacaksınız. Aşağıdaki ekran görüntüleri, son uygulamayı gösterir:

Ayrıca uygulamanızı yeniden oluşturmadan kullanıcı arabirimi değişikliklerini görmek için için Xamarin.Forms XAML Çalışırken Yeniden Yükleme kullanacaksınız.

Görüntü oluşturma

9 dakika kaldı

Visual Studio
Mac için Visual Studio

Bu öğreticiyi tamamlamak için Visual Studio 2019 (son sürüm) ve .NET ile mobil uygulama geliştirme iş yükü sisteminizde yüklü olmalıdır. Ayrıca öğretici uygulamasını iOS üzerinde derleyebilmek için eşleştirilmiş bir Mac de gerekecektir. Xamarin platformunu yükleme hakkında bilgi için bkz. Xamarin'i Yükleme. Visual Studio 2019'u bir Mac derleme ana bilgisayarına bağlama hakkında bilgi için bkz. Xamarin.iOS geliştirme için Mac ile eşleştirme.

Visual Studio'yu başlatın ve ImageTutorial adlı boş Xamarin.Forms bir uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı ImageTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Gezgini'ndeki ImageTutorial projesinde MainPage.xaml dosyasına çift tıklayıp açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Bu kod, sayfa için kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Image bileşeninden oluşur. Image.Source özelliği bir URI aracılığıyla görüntülenecek görüntüyü belirtir. Image.Source özelliği ImageSource türüne sahiptir ve görüntünün dosyalardan, URI'lerden veya kaynaklardan alınmasını sağlar. Daha fazla bilgi için bkz. Kılavuzdaki Görüntüler'de Xamarin.Forms görüntüleri görüntüleme.

HeightRequest özelliği, Image yüksekliğini cihazdan bağımsız birimler halinde belirtir.

Not

Bu örnekte WidthRequest özelliğinin ayarlanmasına gerek yoktur. Bunun nedeni Image öğesinin varsayılan olarak görüntünün en boy oranını korumasıdır.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Not

Image görünümü, indirilen görüntüleri otomatik olarak 24 saat boyunca önbellekte tutar. Daha fazla bilgi için bkz. Resimler kılavuzundaki İndirilen görüntü Xamarin.Forms önbelleğe alma.

Bu öğreticiyi tamamlamak için iOS ve Android platformu desteğine sahip Mac için Visual Studio (son sürüm) uygulamasını yüklemiş olmanız gerekir. Ayrıca Xcode (son sürüm) uygulaması da gereklidir. Xamarin platformunu yükleme hakkında daha bilgi için bkz. Xamarin'i Yükleme.

Mac için Visual Studio başlatın ve ImageTutorial adlı yeni bir boş Xamarin.Forms uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı ImageTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Bölmesi'ndeki ImageTutorial projesinde MainPage.xaml dosyasına çift tıklayıp açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Bu kod, sayfa için kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Image bileşeninden oluşur. Image.Source özelliği bir URI aracılığıyla görüntülenecek görüntüyü belirtir. Image.Source özelliği ImageSource türüne sahiptir ve görüntünün dosyalardan, URI'lerden veya kaynaklardan alınmasını sağlar. Daha fazla bilgi için bkz. Kılavuzdaki Görüntüler'de Xamarin.Forms görüntüleri görüntüleme.

HeightRequest özelliği, Image yüksekliğini cihazdan bağımsız birimler halinde belirtir.

Not

Bu örnekte WidthRequest özelliğinin ayarlanmasına gerek yoktur. Bunun nedeni Image öğesinin varsayılan olarak görüntünün en boy oranını korumasıdır.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Not

Image görünümü, indirilen görüntüleri otomatik olarak 24 saat boyunca önbellekte tutar. Daha fazla bilgi için bkz. Resimler kılavuzundaki İndirilen görüntü Xamarin.Forms önbelleğe alma.

Görünümünü özelleştirme

6 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml dosyasında Image bildirimini değiştirerek görünümünü özelleştirin:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Bu kod, görüntünün ölçeklendirme modunu tanımlayan Aspect özelliğini Fill olarak ayarlar. Fill üyesi Aspect sabit listesinde tanımlanmıştır ve görüntüyü uzatarak görünümü tamamen doldurmasını sağlar. Bunu yaparken görüntünün bozulup bozulmadığını dikkate almaz. Görüntü ölçeklendirme hakkında daha fazla bilgi için bkz. Görüntüler kılavuzunda Xamarin.Forms görüntüleri görüntüleme.

OnPlatform işaretleme uzantısı, kullanıcı arabirimi görünümünü platforma göre özelleştirmenizi sağlar. Bu örnekte işaretleme uzantısı, HeightRequest ve WidthRequest özelliklerini iOS için cihazdan bağımsız 300 birime, Android için de cihazdan bağımsız 250 birime ayarlamak için kullanılmıştır. OnPlatform işaretleme uzantısı hakkında daha fazla bilgi için XAML İşaretleme Uzantılarını Kullanma kılavuzunun OnPlatform işaretleme uzantısı bölümüne bakın.

Ayrıca HorizontalOptions özelliği, görüntünün dikey düzlemde ortalanacağını belirtir.
Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz uzak iOS simülatöründe veya Android öykünücüsünde başlatın:

Visual Studio'da uygulamayı durdurun.

MainPage.xaml dosyasında Image bildirimini değiştirerek görünümünü özelleştirin:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Bu kod, görüntünün ölçeklendirme modunu tanımlayan Aspect özelliğini Fill olarak ayarlar. Fill üyesi Aspect sabit listesinde tanımlanmıştır ve görüntüyü uzatarak görünümü tamamen doldurmasını sağlar. Bunu yaparken görüntünün bozulup bozulmadığını dikkate almaz. Görüntü ölçeklendirme hakkında daha fazla bilgi için bkz. Görüntüler kılavuzunda Xamarin.Forms görüntüleri görüntüleme.

OnPlatform işaretleme uzantısı, kullanıcı arabirimi görünümünü platforma göre özelleştirmenizi sağlar. Bu örnekte işaretleme uzantısı, HeightRequest ve WidthRequest özelliklerini iOS için 300 birime, Android için de 250 birime ayarlamak için kullanılmıştır. OnPlatform işaretleme uzantısı hakkında daha fazla bilgi için XAML İşaretleme Uzantılarını Kullanma kılavuzunun OnPlatform işaretleme uzantısı bölümüne bakın.

Ayrıca HorizontalOptions özelliği, görüntünün dikey düzlemde ortalanacağını belirtir.
Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Mac için Visual Studio'da uygulamayı durdurun.

Yerel görüntü gösterme

4 dakika kaldı

Görüntü dosyaları platform projelerine eklenebilir ve paylaşılan koddan Xamarin.Forms başvurulabilir. 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.

Bu alıştırmada ImageTutorial çözümünü URI'den indirilen görüntünün yerine yerel bir görüntüyü gösterecek şekilde değiştireceksiniz. Yerel görüntü, aşağıdaki düğmeye tıklayarak indirebileceğiniz Xamarin logosudur.

XamarinLogo.png dosyasını indirin

Önemli

Tek bir görüntüyü tüm platformlarda kullanabilmek için her platformda aynı dosya adı kullanılmalıdır ve bu geçerli bir Android kaynağı adı olmalıdır (yalnızca küçük harf, rakam, alt çizgi ve nokta kullanılabilir).

Visual Studio
Mac için Visual Studio

Çözüm Gezgini'ndeki ImageTutorial.iOS projesinde Varlık Katalogları'nı genişletin ve Varlıklar'a çift tıklayarak açın. Ardından Assets.xcassets sekmesindeki Artı düğmesine tıklayıp Görüntü Kümesi Ekle'yi seçin:
Assets.xcassets sekmesinde yeni görüntü kümesini seçtiğinizde düzenleyici görüntülenir:
Dosya sisteminizdeki XamarinLogo.png dosyasını Evrensel kategorisinin 1x kutusuna sürükleyin:
Assets.xcassets sekmesinde yeni görüntü kümesinin adına sağ tıklayıp adını XamarinLogo olarak değiştirin:

Çalışmanızı kaydedip Assets.xcassets sekmesini kapatın.
Çözüm Gezgini'ndeki ImageTutorial.Android projesinde Kaynaklar klasörünü genişletin. Ardından dosya sisteminizdeki XamarinLogo.png dosyasını drawable klasörüne sürükleyin:

Not

Visual Studio, görüntünün derleme eylemini otomatik olarak AndroidResource yapacaktır.
ImageTutorial projesinin MainPage.xaml bölümünde Image bildirimini yerel XamarinLogo dosyasını gösterecek şekilde değiştirin:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Bu kod, Source özelliğini yerel dosyayı görüntüleyecek şekilde ayarlar. WidthRequest özelliği, iOS için cihazdan bağımsız 300 birime, Android için de cihazdan bağımsız 250 birime ayarlanır. Ayrıca HorizontalOptions özelliği, görüntünün dikey düzlemde ortalanacağını belirtir.

Not

iOS üzerinde PNG biçimli görüntüler için .png uzantısı Source özelliğinde belirtilen dosya adından atılabilir. Diğer biçimlerde uzantının kullanılması gerekir.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Visual Studio'da uygulamayı durdurun.

Yerel görüntüler hakkında daha fazla bilgi için kılavuzdaki Görüntüler'deki Yerel görüntüler bölümüne Xamarin.Forms bakın.

ImageTutorial.iOS projesinin Çözüm Bölmesi kısmında Assets.xcassets öğesine çift tıklayarak açın. Ardından Varlıklar Listesi'nde sağ tıklayın ve Yeni Görüntü Kümesi'ni seçin:
Varlıklar Listesi'nde yeni görüntü kümesini seçtiğinizde düzenleyici görüntülenir:
Dosya sisteminizdeki XamarinLogo.png dosyasını Evrensel kategorisinin 1x kutusuna sürükleyin:
Varlıklar Listesi'nde yeni görüntü kümesinin adına sağ tıklayıp adını XamarinLogo olarak değiştirin:
Çözüm Bölmesi'ndeki ImageTutorial.Android projesinde Kaynaklar klasörünü genişletin. Ardından dosya sisteminizdeki XamarinLogo.png dosyasını drawable klasörüne sürükleyin.
Dosyayı Klasöre Ekle iletişim kutusunda Tamam'ı seçin.

Not

Mac için Visual Studio, görüntünün derleme eylemini otomatik olarak AndroidResource yapacaktır.
ImageTutorial projesinin MainPage.xaml bölümünde Image bildirimini yerel XamarinLogo dosyasını gösterecek şekilde değiştirin:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Bu kod, Source özelliğini yerel dosyayı görüntüleyecek şekilde ayarlar. WidthRequest özelliği, iOS için cihazdan bağımsız 300 birime, Android için de cihazdan bağımsız 250 birime ayarlanır. Ayrıca HorizontalOptions özelliği, görüntünün dikey düzlemde ortalanacağını belirtir.

Not

iOS üzerinde PNG biçimli görüntüler için .png uzantısı Source özelliğinde belirtilen dosya adından atılabilir. Diğer biçimlerde uzantının kullanılması gerekir.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Mac için Visual Studio'da uygulamayı durdurun.

Yerel görüntüler hakkında daha fazla bilgi için kılavuzdaki Görüntüler'deki Yerel görüntüler bölümüne Xamarin.Forms bakın.

Xamarin.Forms Resim Öğreticisi

Görüntü oluşturma

Görünümünü özelleştirme

Yerel görüntü gösterme

Tebrikler!

Sonraki adımlar

Xamarin.Forms Resim Öğreticisi

Görüntü oluşturma

Görünümünü özelleştirme

Yerel görüntü gösterme

Tebrikler!

Sonraki adımlar

İlgili bağlantılar