Görüntüler ve görüntü fırçaları

Bir görüntüyü görüntülemek için Image nesnesini veya ImageBrush nesnesini kullanabilirsiniz. Image nesnesi bir görüntüyü işler ve ImageBrush nesnesi başka bir nesneyi resimle boyar.

Bunlar doğru öğeler mi?

Uygulamanızda tek başına görüntü görüntülemek için bir Image öğesi kullanın.

Başka bir nesneye görüntü uygulamak için ImageBrush kullanın. ImageBrush'ın kullanımları, metin için dekoratif efektler veya denetimler ve düzen kapsayıcıları için arka planlar içerir.

Bir görüntü oluştur.

• Önemli API'ler:Image sınıfı, Source özelliği, ImageBrush sınıfı, ImageSource özelliği

WinUI 3 Galeri uygulamasını açın ve ImageBrushes'ın nasıl çalıştığını görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Resim

Bu örnekte, Image nesnesi kullanılarak nasıl görüntü oluşturulacağı gösterilmektedir.

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

İşlenen Image nesnesi aşağıdadır.

Bu örnekte, Source özelliği, görüntülemek istediğiniz görüntünün konumunu belirtir. Mutlak bir URL belirterek (örneğin, http://contoso.com/myPicture.jpg) veya uygulama paketleme yapınıza göre bir URL belirterek Kaynak'ı ayarlayabilirsiniz. Örneğimiz için , "sunset.jpg" görüntü dosyasını project kök klasörüne yerleştiriyoruz ve görüntü dosyasını içerik olarak içeren project ayarlarını bildiriyoruz.

Görüntü Fırçası

ImageBrush nesnesiyle, Brush nesnesi alan bir alanı boyamak için bir görüntü kullanabilirsiniz. Örneğin, Elips üzerine Dolgu özelliği için veya Tuvalüzerindeki Arka Plan özelliği için bir ImageBrush kullanabilirsiniz.

Sonraki örnekte, bir Elips'i boyamak için ImageBrush'ın nasıl kullanılacağı gösterilmektedir.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="sunset.jpg" />
   </Ellipse.Fill>
</Ellipse>

ImageBrush tarafından boyanan elips aşağıdadır.

Resmi genişlet

Resim'in Genişlik veya Yükseklik değerlerini ayarlamazsanız, Kaynaktarafından belirtilen boyutlarda görüntülenir. Genişliği ve Yükseklik ayarlandığında, görüntünün görüntülendiği dikdörtgen bir alan oluşturulur. Stretch özelliğini kullanarak görüntünün bu alanı nasıl dolduracağını belirtebilirsiniz. Stretch özelliği, Stretch numaralandırmasının tanımladığı şu değerleri kabul eder:

• None: Görüntü, çıkış boyutlarını dolduracak şekilde genişletilmez. Bu Esnetme ayarına dikkat edin: Kaynak görüntü içeren alandan daha büyükse, görüntünüz kırpılır ve görünüm penceresi üzerinde kasıtlı bir Clipgibi herhangi bir denetiminiz olmadığından bu genellikle tercih edilmez.
• Tekdüzen: Görüntü çıktı boyutlarına uyacak şekilde ölçeklendirilir. Ancak içeriğin en boy oranı korunur. Bu varsayılan değerdir.
• UniformToFill: Görüntü, çıkış alanını tamamen dolduracak ancak özgün en boy oranını koruyacak şekilde ölçeklendirilir.
• Doldurma: Görüntü çıktı boyutlarına uyacak şekilde ölçeklendirilir. İçeriğin yüksekliği ve genişliği bağımsız olarak ölçeklendirildiğinden, görüntünün özgün en boy oranı korunmayabilir. Diğer bir ifadeyle, görüntü çıkış alanını tamamen dolduracak şekilde bozulabilir.

Resmi kırpma

Görüntü çıkışından bir alanı kırpmak için Clip özelliğini kullanabilirsiniz. Clip özelliğini Geometriolarak ayarlarsınız. Şu anda dikdörtgen olmayan şekillerin kırpılması desteklenmez.

Sonraki örnekte, bir görüntü için kırpma bölgesi olarak RectangleGeometry nasıl kullanılacağı gösterilmektedir. Bu örnekte, yüksekliği 200 olan bir Image nesnesi tanımlayacağız. RectangleGeometry, görüntünün görüntülenecek alanı için bir dikdörtgen tanımlar. Rect özelliği, genişliği 100 ve yüksekliği 150 olan "25.25" konumundan başlayan bir dikdörtgen tanımlayan "25.25.100.150" olarak ayarlanır. Görüntünün yalnızca dikdörtgenin alanı içinde yer alan bölümü görüntülenir.

<Image Source="sunset.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Siyah arka plandaki kırpılmış görüntü aşağıdadır.

Opaklık uygula

Görüntünün yarı saydam olarak işlenmesi için resme Opaklık uygulayabilirsiniz. Opaklık değerleri 0,0 ile 1,0 arasında olup 1,0 tamamen opaktır ve 0,0 tamamen saydamdır. Bu örnekte, görüntüye 0,5 opaklığının nasıl uygulanacağı gösterilmektedir.

<Image Height="200" Source="sunset.jpg" Opacity="0.5" />

0,5 opaklığı ve kısmi opaklık aracılığıyla gösterilen siyah arka plan ile işlenen görüntü aşağıdadır.

0,5 opaklığına sahip bir Görüntü nesnesi

Görüntü dosyası biçimleri

Image ve ImageBrush şu görüntü dosyası biçimlerini görüntüleyebilir:

• Ortak Fotoğraf Uzmanları Grubu (JPEG)
• Taşınabilir Ağ Grafikleri (PNG)
• bitmap (BMP)
• Grafik Değişim Biçimi (GIF)
• Etiketli Görüntü Dosyası Biçimi (TIFF)
• JPEG XR
• simgeler (ICO)

Image, BitmapImage ve BitmapSource API'leri medya biçimlerini kodlamak ve kodunu çözmek için ayrılmış yöntemler içermez. Tüm kodlama ve kod çözme işlemleri doğrudan entegredir ve en fazla yükleme olayları için olay verilerinin bir parçası olarak kodlama veya kod çözme özelliklerini görünür hale getirir. Görüntü kodlama veya kod çözme ile belirli bir özel iş yapmak istiyorsanız ve uygulamanız görüntü dönüştürme veya işleme gerçekleştiriyorsa, Windows.Graphics.Imaging ad alanında bulunan API'leri kullanmanız gerekir. Bu API'ler Windows'daki Windows Görüntüleme Bileşeni (WIC) tarafından da desteklenir.

Uygulama kaynakları ve bir uygulamadaki görüntü kaynaklarını paketleme hakkında daha fazla bilgi için bkz. . Ölçek, tema, yüksek karşıtlık ve diğer hususlar için uyarlanmış görüntüleri ve varlıkları yükleme.

YazılabilirBitmap

WriteableBitmap, değiştirilebilen ve WIC'in temel dosya tabanlı kod çözme yöntemini kullanmayan bir BitmapSource sağlar. Görüntüleri dinamik olarak değiştirebilir ve güncelleştirilmiş görüntüyü yeniden işleyebilirsiniz. WriteableBitmap arabellek içeriğini belirlemek için PixelBuffer özelliğini kullanarak arabelleğe erişin ve bunu doldurmak için bir akış veya dile özgü bir arabellek türü kullanın. Örnek kod için bkz. WriteableBitmap.

Hedef Görüntü İşleme

RenderTargetBitmap sınıfı, çalışan bir uygulamadan XAML UI ağacını yakalayabilir ve ardından bir bitmap görüntü kaynağı olarak temsil eder. Yakalama sonrasında, bu görüntü kaynağı uygulamanın diğer bölümlerine uygulanabilir, kullanıcı tarafından kaynak veya uygulama verileri olarak kaydedilebilir veya diğer senaryolar için kullanılabilir. Özellikle kullanışlı senaryolardan biri, bir gezinme şeması için XAML sayfasının çalışma zamanı önizleme resmini oluşturmaktır. RenderTargetBitmap, yakalanan görüntüde görünecek içerikle ilgili bazı sınırlamalara sahiptir. Daha fazla bilgi için RenderTargetBitmapapi başvuru konusuna bakın.

Görüntü kaynakları ve ölçeklendirme

Uygulamanızı ölçeklendirirken Windows harika göründüğüne emin olmak için, görüntü kaynaklarınızı önerilen birkaç boyutta oluşturmanız gerekir. Görüntüiçin Kaynak belirtirken, geçerli ölçeklendirme için doğru kaynağı otomatik olarak referans alan bir adlandırma kuralı kullanabilirsiniz. Adlandırma kuralının ayrıntıları ve daha fazla bilgi için bkz. Hızlı Başlangıç:dosya veya görüntü kaynaklarını kullanma.

Ölçeklendirme için tasarım hakkında daha fazla bilgi edinmek için düzen ve ölçeklendirme konusundaki UX yönergelerine bakınız ,.

Kodda Image ve ImageBrush Kullanımı

Kod yerine XAML kullanarak Image ve ImageBrush öğelerinin belirtilmesi normaldir. Bunun nedeni, bu öğelerin genellikle XAML kullanıcı arabirimi tanımının bir parçası olarak tasarım araçlarının çıkışı olmasıdır.

Kod kullanarak bir Image veya ImageBrush tanımlarsanız, varsayılan oluşturucuları kullanın, ardından ilgili kaynak özelliğini ayarlayın ( Image.Sourceveya ImageBrush.ImageSource). Kod kullanarak ayarlandığında kaynak özellikleri bir BitmapImage (URI değil) gerektirir. Kaynağınız bir akışsa, değeri başlatmak için SetSourceAsync yöntemini kullanın. Kaynağınız, uygulamanızda ms-appx veya ms-resource düzenlerini içerik içeren bir URI ise, URI alan BitmapImage oluşturucuyu kullanın. Görüntü kaynağını alma veya kodunu çözme ile ilgili zamanlama sorunları varsa görüntü kaynağı kullanılabilir duruma gelene kadar görüntülenmesi için alternatif içerik gerekebileceği ImageOpened olayını işlemeyi de düşünebilirsiniz. Örnek kod için, WinUI 3 Galerisi örneğine bakın.

Uyarı

Kod kullanarak görüntü oluşturursanız, geçerli ölçek ve kültür niteleyicileriyle nitelenmemiş kaynaklara erişmek için otomatik işlemeyi kullanabilir veya kaynakları doğrudan almak için kültür ve ölçek için niteleyicilerle ResourceManager ve ResourceMap kullanabilirsiniz. Daha fazla bilgi için bkz. Kaynak yönetimi sistemi.

İlgili makaleler

• Ses, video ve kamera
• Image sınıfı
• ImageBrush sınıfı