WPF'te SVG: Görüntüleyici veya XAML çizimi seçin

SVG tarayıcınızda açılır, ancak dosya adını bir WPF Image denetimine vermek aynı görüntüleme sürecini sağlamaz. Önce uygulamanın gerçekte ne alacağını seçin: bir kitaplık tarafından işlenen SVG, WPF’nin kendi çizim nesneleri veya raster dışa aktarım.

WPF'nin yerleşik görüntü kodekleri PNG ve JPEG'i içerir, ancak SVG'yi listelemez. Image denetimi bir DrawingImage da gösterebilir; dolayısıyla vektör görüntülemek için SVG dosyasını doğrudan yüklemeniz gerekmez. Microsoft bunları ayrı görüntüleme ve çizimi görüntü kaynağı olarak kullanma yolları olarak belgeler.

Bu rehber, seçimi somutlaştırmak için özgün bir kitap ayracı simgesi kullanır. Aşağıdaki SVG ve XAML elle yazılmıştır; bir dönüştürücü kıyaslaması veya Windows uygulamasından alınmış ekran görüntüsü değildir.

Dosyayı değiştirmeden önce gösterim biçimini seçin

Bu seçenekler, uygulamanızın gösterdiği nesneyle ilgilidir. Tasarımcının düzenlenebilir bir SVG ana dosyasını saklayıp saklamayacağını belirlemez. Uygulama bir PNG alsa bile bu ana dosyayı koruyun.

Önce WPF’nin kendi DrawingImage nesnesiyle küçük bir çizim deneyin

Basit bir simge için elle oluşturulan çizim, SVG ayrıştırıcısı eklemeden yararlı bir başlangıç noktası sunar. Microsoft yapıyı şöyle gösterir: Image.Source değerini bir DrawingImage olarak ayarlayın, ardından çizimi onun Drawing özelliğine atayın. Aşağıdaki özgün örnek, bu belgelenmiş modeli izler.

SVG tasarımı şöyle: turkuaz bir kitap ayracı ve ondan ayrı mercan renkli bir daire. Düzenleyicinizde karşılaştırabileceğiniz bir kaynak isterseniz bunu bookmark.svg olarak kaydedin.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Bu Image öğesini mevcut bir WPF penceresinin Grid gibi bir yerleşim kapsayıcısına yerleştirin:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

İki görünür çizim nesnesi, kitap ayracını ve daireyi ayrı ayrı tanımlar. Saydam dikdörtgen, grafiğin çevresindeki boş kenar payları dahil örneğin tam 120 × 80 çizim sınırlarını belirler. Sonradan eklenen geometriyi kırpmaz veya XAML'i bir SVG belgesine dönüştürmez.

Koordinatlar bilinçli tasarım tercihleridir. İki kod parçasını karşılaştırın: kitap ayracı aynı noktaları, daire de aynı merkezi ve yarıçapı kullanır. Bu, inceleyebileceğiniz küçük bir elle uyarlama örneğidir; her SVG özelliğini XAML'e çevirmenin tarifi değildir.

Kaynak dosyalar XML olarak kontrol edilmiştir, ancak bu örnek bir Windows WPF uygulamasında derlenmemiş veya görüntülenmemiştir. Kullanmaya başlamadan önce projenizde deneyin.

Yeniden kullanılabilir hale getirmeden önce sınırları ve fırçaları kontrol edin

Verilen boyutta başlayın. Kitap ayracının alt çentiğinin görünür kaldığını ve dairenin ayrı durduğunu doğrulayın. Ardından daha geniş veya daha uzun bir yerleşim alanı deneyin. Microsoft'un görüntü ölçekleme rehberinde açıklandığı gibi, Stretch="Uniform" kullanılabilir alana sığdırırken oranları korur.

Mercan renkli Brush değerini farklı bir renkle değiştirin. Bu, WPF’nin kendi çizim nesnesinde yapılan bilinçli bir düzenlemedir; içe aktarılan herhangi bir SVG'nin parçalarının aynı kolay denetimleri sunacağını kanıtlamaz.

Çizim merkezden kaymış görünüyorsa sınırlarını SVG'nin viewBox değeri ve boş kenar paylarıyla karşılaştırın. Doğru bir siluet bile yerleşim alanının farklı bir bölümünü kaplayabilir. Son grafiği eklerken bu basit başlangıç örneğini koruyun.

Girdi SVG olarak kalacaksa bir görüntüleyici kullanın

WPF geometrisini elle yönetmek pratik değilse WPF için açıkça SVG okuyan bir kitaplığı değerlendirin. SharpVectors.Wpf paketi, SVG ayrıştırma, dönüştürme ve görüntüleme bileşenleri sağlar. Projeye eklemeden önce güncel sürümü, hedef çerçeveleri ve bağımlılıkları kontrol etmek için paket sayfasını kullanın.

SharpVectors'ın başlangıç belgeleri, WPF çizim nesnelerine dönüştürmeyi ve görüntü tabanlı gösterim örneklerini açıklar. Dolayısıyla bu yol, normal bitmap sürecinden bir SVG dosya adını çözmesini istemekten farklıdır.

İlk kitaplık girdiniz olarak özgün kitap ayracını kullanın, ardından kendi grafiğinizle değiştirin. Şu kontrolleri birbirinden ayrı tutun:

1. Yükleme: seçtiğiniz örnek, projenizde dosyayı veya uygulama kaynağını bulabiliyor mu?
2. Gösterim biçimi: API, kullanım durumunuz için çizim nesneleri mi döndürüyor, XAML mi üretiyor, yoksa bir bitmap mi oluşturuyor?
3. Görünüm: çalışan uygulamada çentik, ayrı daire, renkler ve boş kenar payları doğru mu?
4. Dağıtım: sonuç, hedef makinede kitaplığın çalışma zamanı assembly dosyasını veya başka varlıkları gerektiriyor mu?

Yüklü sürümünüzle eşleşen örnekleri izleyin. SharpVectors, IncludeRuntime ayarını belgeler, TextAsGeometry özelliğini kullanımdan kaldırılmış olarak işaretler ve 2.0 sürümündeki ad alanı değişikliklerine dikkat çeker. Bunlar, eski kod parçalarının ayarlarını kopyalamadan önce gözden geçirmeniz için gerekçelerdir; tek bir dönüştürme yapılandırmasının süresiz olarak uygun kalacağını varsaymanız için değil. SharpVectors belgeleri

Yazı içeren bir logoda kaynağın yanı sıra gerçek hedef çıktıyı da inceleyin. SVG yazı tipi değişiklikleri rehberimiz, yazı tiplerine bağımlı metin ile kontur olarak korunan harfler arasındaki farkı açıklar. Metni dönüştürmek, hangi öğelerin düzenlenebilir kaldığını değiştirebilir; bu yüzden özgün tasarım dosyasını saklayın.

SvgImageSource'u yanlış XAML çerçevesinden almayın

Bu sorunu ararken Microsoft'un SvgImageSource başvurusuna ulaşabilirsiniz. UWP sınıf belgeleri, bu türü Windows.UI.Xaml.Media.Imaging içinde tanımlar. Bu, WPF'nin System.Windows denetimleri ve medya sınıflarından farklı bir API'dir.

Bir ad alanı veya paket eklemeden önce örneğin hangi çerçeve için yazıldığını kontrol edin. Benzer XAML işaretlemesi, bir UWP veya WinUI görüntü kaynağını yerleşik WPF özelliği yapmaz. Başka bir çerçeve için geçerli olan çözüm, masaüstü projeniz için yine de yanlış olabilir.

PNG'nin yeterli olup olmadığına karar verin

Gereken boyutlar biliniyorsa ve uygulamanın geometriyi düzenlemesi gerekmiyorsa PNG dışa aktarımı makul bir sunum seçeneğidir. Bu boyutlar için dışa aktarın, saydam kenarları gerçek arka plan üzerinde karşılaştırın ve en büyük görüntüleme boyutunu inceleyin. Bitmap'in yerleşim boyutunu artırmak kaynak yolları yeniden oluşturmaz.

Bir görüntüleme kitaplığına zaman ayırmadan önce SVG'nin içinde ne olduğunu da kontrol edin. Yalnızca bir raster görüntüyü gömüyorsa kapsayıcıyı içe aktarmak o resmi düzenlenebilir geometriye dönüştürmez. Gömülü raster içeren SVG rehberi, neleri incelemeniz gerektiğini gösterir. Bir simge koleksiyonunda aynı kenar payı ve siluet kontrollerini tüm sete uygulayın; arayüz simgesi hazırlama iş akışımız bu grafik hazırlama aşamasını ele alır.

Kitap ayracı veya logo yalnızca PNG ya da JPG olarak kaldıysa PerfectVector'ın görüntüden vektöre dönüştürme iş akışı, düzenlenebilir bir SVG adayı hazırlamanıza yardımcı olabilir. WPF'de sunum yolunu seçmeden önce yeniden oluşturulan silueti, çentiği ve ayrı ayrıntıları inceleyin. Vektörleştirme grafiği hazırlar; WPF görüntüleyicisi yüklemez veya WPF’nin kendi XAML çizim biçimine dönüşümü garanti etmez.

Daha kapsamlı görüntü vektörleştirme rehberi, bu kaynak yeniden oluşturma adımını açıklar. Kaynak hazır olduğunda uygulama kontrolleri yine WPF içinde yapılmalıdır.

Sık sorulan sorular

WPF Image bir SVG dosyasını doğrudan yükleyebilir mi? WPF'nin belgelenmiş yerleşik görüntü kodekleri SVG'yi içermez. SVG destekleyen bir kitaplık kullanın, DrawingImage üzerinden WPF’nin kendi çizim nesnelerini sağlayın veya PNG gibi desteklenen bir raster biçimi sunun.

DrawingImage, SVG dosyasıyla aynı şey midir? Hayır. DrawingImage, WPF çizim nesnelerini gösterir. Bu nesneleri bir SVG kitaplığı oluşturabilir veya buradaki küçük örnekte olduğu gibi doğrudan kendiniz yazabilirsiniz.

UWP SvgImageSource örneğini WPF'te kullanabilir miyim? Bunu yerleşik bir WPF API'si olarak değerlendirmeyin. UWP başvurusu farklı bir ad alanına ve çerçeveye aittir; kodu ve bağımlılıkları gerçek uygulamanıza göre seçin.

SVG'yi XAML'e dönüştürmek her efekti korur mu? Bunu varsaymayın. Dönüştürücünün belgelenmiş yeteneklerini kontrol edin ve metin, sınırlar, ayrı şekiller ve efektler dahil grafiğinizi hedef uygulamada inceleyin.

Kaynaklar

1. Microsoft — WPF Imaging Overview — Yerleşik bitmap biçimleri ve görüntü ölçekleme davranışı.
2. Microsoft — Use a Drawing as an Image Source — WPF’nin kendi DrawingImage nesnesi ve çizim nesnesi yapısı.
3. SharpVectors — Getting Started — WPF çizim dönüşümü, çalışma zamanı ayarları ve belgelenmiş geçiş uyarıları.
4. NuGet — SharpVectors.Wpf — Güncel paket kimliği ve uyumluluk bilgileri.
5. Microsoft — UWP SvgImageSource Class — Sıklıkla karıştırılan bir API'nin çerçeve ve ad alanı sınırı.

Bir WPF yolu seçin ve tüm varlık setinizi değiştirmeden önce küçük bir tasarımı karşılaştırın. Raster grafiğin yeniden oluşturulması gerekiyorsa düzenlenebilir bir SVG adayı hazırlayın, şekilleri inceleyin, ardından seçtiğiniz gösterim biçimini uygulamanızda deneyin.