XAML kod düzenleyicisi

Visual Studio IDE'deki XAML kod düzenleyicisi, Windows platformu ve Xamarin.Forms veya .NET MAUI için WPF ve UWP uygulamaları oluşturmak için ihtiyacınız olan tüm araçları içerir. Bu makalede hem XAML tabanlı uygulamalar geliştirirken kod düzenleyicisinin oynadığı rol hem de Visual Studio 2019'daki XAML kod düzenleyicisine özgü özellikler özetlenir.

Başlamak için açık bir WPF projesiyle IDE'ye (tümleşik geliştirme ortamı) göz atalım. Aşağıdaki görüntüde, XAML kod düzenleyicisiyle birlikte kullandığınız birkaç temel IDE aracı gösterilmektedir.

Saat yönünde giden görüntünün sol alt kısmından, temel IDE araçları aşağıdaki gibidir:

• Kodunuzu oluşturup düzenlediğiniz bu makalenin konusu olan XAML kod düzenleyicisi penceresi.
• Kullanıcı arabiriminizi tasarladığınız XAML Tasarımcısı penceresi.
• Kullanıcı arabiriminize denetim eklediğiniz Araç Kutusu yerleşik penceresi.
• Kodunuzu çalıştırdığınız ve hata ayıkladığınız Hata Ayıkla düğmesi.
  ( XAML Çalışırken Yeniden Yükleme ile hata ayıklarken kodunuzu gerçek zamanlı olarak da düzenleyebilirsiniz.)
• Dosyalarınızı, projelerinizi ve çözümlerinizi yönettiğiniz Çözüm Gezgini penceresi.
• Kullanıcı arabiriminizin görünümünü ve kullanıcı arabirimi denetimlerinin çalışma şeklini değiştirdiğiniz Özellikler penceresi.

Devam etmek için XAML kod düzenleyicisi hakkında daha fazla bilgi edinelim.

XAML kod düzenleyicisi kullanıcı arabirimi

XAML uygulamaları için kod düzenleyicisi penceresinde standart IDE'mizde de görünen bazı kullanıcı arabirimi (kullanıcı arabirimi) öğeleri paylaşılıyor olsa da, XAML uygulamalarını geliştirmeyi kolaylaştıran birkaç benzersiz özellik de içerir.

Burada XAML kod düzenleyicisi penceresinin kendisine bir göz atabilirsiniz.

Şimdi kod düzenleyicisindeki kullanıcı arabirimi öğelerinin her birinin işlevlerine göz atalım.

İlk satır

XAML kod penceresinin en üstündeki ilk satırda, sol tarafta Tasarım sekmesi, Bölmeleri Değiştir düğmesi, XAML sekmesi ve XAML'yi Aç düğmesi bulunur.

Şu şekilde çalışırlar:

• Tasarım sekmesi odağı XAML kod düzenleyicisinden XAML Tasarımcısı'na değiştirir.
• Bölmeleri Değiştir düğmesi, IDE'de XAML Tasarımcısı'nın ve XAML kod düzenleyicisinin konumunu tersine çevirir.
• XAML sekmesi odağı XAML kod düzenleyicisine geri değiştirir.
• Açılan XAML düğmesi, IDE'nin dışında ayrı bir XAML kod düzenleyicisi penceresi oluşturur.

Sağ tarafta dikey bölme düğmesi, Yatay Bölme düğmesi ve Bölmeleri Daralt düğmesi bulunur.

Şu şekilde çalışırlar:

• Dikey Bölme düğmesi, XAML Tasarımcısı'nın ve XAML kod düzenleyicisinin IDE'deki konumunu yatay hizalamadan dikey hizalamaya değiştirir.
• Yatay Bölme düğmesi, XAML Tasarımcısı'nın ve XAML kod düzenleyicisinin IDE'deki konumunu dikey hizalamadan yatay hizalamaya değiştirir.
• Bölmeyi Daralt düğmesi, kod düzenleyicisi veya Tasarımcı olsun, alt bölmedekileri daraltmanızı sağlar. (Alt bölmeyi geri yüklemek için, şimdi Bölmeyi Genişlet düğmesi olarak adlandırılan aynı düğmeyi yeniden seçin.)

İkinci satır

XAML kod penceresinin en üstündeki ikinci satırda iki adet "Pencere" açılır listesi vardır. Ancak, bu kullanıcı arabirimi öğeleri için Araç İpucu'nu görüntülerseniz, bunları "Öğe: Pencere" ve "Üye: Pencere" olarak tanımlar.

Pencere açılır listeleri aşağıdaki gibi farklı işlevlere sahiptir:

• Soldaki Öğe: Pencere , eşdüzey veya üst öğeleri görüntülemenize ve bu öğelere gitmenize yardımcı olur.

  Özel olarak, kodunuzun etiket yapısını gösteren ana hat benzeri bir görünüm gösterir. Listeden seçim yaptığınızda, kod düzenleyicisi odağınızı seçtiğiniz öğeyi içeren kod satırına otomatik olarak kaydırır.

  

• Sağ taraftaki Üye: Pencere , öznitelik veya alt öğeleri görüntülemenize ve bu öğelere gitmenize yardımcı olur.

  Özel olarak, kodunuzdaki özelliklerin listesini gösterir. Listeden seçim yaptığınızda, kod düzenleyicisinde odağınız seçtiğiniz özelliği içeren kod satırına kaydırılır.

  

Orta bölme, kod düzenleyicisi

Orta bölme, XAML kod düzenleyicisinin "kod" bölümüdür. IDE kod düzenleyicisinde bulduğunuz özelliklerin çoğunu içerir. XAML kodunuzu geliştirmenize yardımcı olabilecek çeşitli evrensel IDE özelliklerine değineceğiz. XAML'e özgü özellikleri de IDE'de vurgulayacağız.

Hızlı İşlemler

Tek bir eylemle kodu yeniden düzenlemek, oluşturmak veya başka bir şekilde değiştirmek için Hızlı Eylemler'i kullanabilirsiniz.

Örneğin, Hızlı Eylemler'i kullanarak gerçekleştirebileceğiniz yararlı görevlerden biri, MainWindow.xaml.cs sekmesindeki C# kodundan gereksiz kullanımları kaldırmaktır.

Şunu yapabilirsiniz:

1. Using ifadesinin üzerine gelin, ampul simgesini seçin ve ardından çıkan listeden Gereksiz Kullanımı Kaldır'ı seçin.

   

2. Belgedeki, Projedeki veya Çözümdeki tüm oluşumları düzeltmek isteyip istemediğinizi seçin.

3. Önizleme iletişim kutusunu görüntüleyin ve uygula'yı seçin.

Bu özelliğe menü çubuğundan da erişebilirsiniz. Bunu yapmak için Düzenle>IntelliSense>Kullanımları Kaldır ve Sırala seçin.

Kullanma ayarları hakkında daha fazla bilgi için, Kullanımı sıralama sayfasına bakın. IntelliSense hakkında daha fazla bilgi için Visual Studio'da IntelliSense sayfasına bakın. Geliştiricilerin Hızlı İşlemler'i kullandığı tipik yollardan bazıları hakkında daha fazla bilgi için Ortak Hızlı Eylemler sayfasına bakın.

Değişiklik izleme

Sol kenar boşluğunun rengi, dosyada yaptığınız değişiklikleri izlemenizi sağlar. Renklerin gerçekleştirdiğiniz eylemlerle ilişkisi şöyledir:

• Dosya açıldığından ancak kaydedilmediğinden beri yaptığınız değişiklikler sol kenar boşluğundaki sarı bir çubukla gösterilir (seçim kenar boşluğu olarak bilinir).

  

• Değişiklikleri kaydettikten sonra (ancak dosyayı kapatmadan önce), çubuk yeşile döner.

  

Bu özelliği Araçlar>Seçenekleri bölmesinde açıp kapatabilirsiniz. Tüm Ayarlar>Metin Düzenleyicisi>Genel bölümünü genişletin ve Değişiklikleri izle onay kutusunu seçin veya temizleyin.

Kod dizelerinin altında görünen dalgalı çizgileri ("dalgalı çizgiler" olarak da bilinir) dahil etmek üzere değişiklik izleme hakkında daha fazla bilgi için Visual Studio Code düzenleyicisinin Özellikleri sayfasının Düzenleyici özellikleri bölümüne bakın.

Sağ tık bağlam menüsü

Kodunuzu XAML kod düzenleyicisinde düzenlerken, sağ tıklama bağlam menüsünü kullanarak erişebileceğiniz çeşitli özellikler vardır. Bu özelliklerin çoğu Visual Studio IDE'de evrensel olarak kullanılabilirken, bazıları tasarım penceresiyle birlikte bir kod düzenleyicisi kullanmaya özgüdür.

Her özelliğin ne yaptığı ve nasıl yararlı olduğu aşağıdadır:

• Kodu Görüntüle - Genellikle Tasarım penceresini ve XAML kod düzenleyicisini içeren varsayılan görünümün yanında sekmeli olan programlama dili kod penceresini açar.
• Görünüm Tasarımcısı - Tasarım penceresini ve XAML kod düzenleyicisini içeren varsayılan görünümü açar. (Zaten varsayılan görünümdeyseniz hiçbir şey yapmaz.)
• Hızlı Eylemler ve Kod Yeniden Düzenleme : Tek bir işlemle kodu yeniden düzenler, oluşturur veya değiştirir. Kodun üzerine geldiğinizde, hızlı bir işlem veya yeniden düzenleme kullanılabilir olduğunda bir ampul simgesi görürsünüz.
  Ayrıca bkz. Hızlı Eylemler ve Yeniden Düzenleme kodu.
• Yeniden Adlandır... - Yalnızca ad alanlarını yeniden adlandırır. Yeniden adlandırılacak bir ad alanınız yoksa, "Yalnızca ad alanı ön ekleri yeniden adlandırılabilir" hata iletisi alırsınız.
• Ad Alanlarını Kaldır ve Sırala - Kullanılmayan ad alanlarını kaldırır ve sonra kalan ad alanlarını sıralar.
• Tanıma Göz At - Geçerli konumunuzu düzenleyicide bırakmadan bir türün tanımını önizler.
  Ayrıca bkz. Tanıma Göz At ve Tanıma Göz At'ı Kullanarak Kodu Görüntüleme ve Düzenleme.
• Tanıma Git - Bir türün veya üyenin kaynağına gider ve sonucu yeni bir sekmede açar.
  Ayrıca bkz. Tanımlara Git.
• Çevrele... - Seçili bir kod bloğunun çevresine eklenen surround kod parçacıkları kullanın.
  Ayrıca bkz. Genişleme kesitleri ve çevreleme kesitleri.
• Kod Parçacığı Ekle - İmleç konumuna bir kod parçacığı ekler.
• Kes - Açıklamaya gerek yok
• Kopyala - Kendi kendine açıklayıcı
• Yapıştırma - Kendi kendine açıklayıcı
• Anahat oluşturma - Kodun bölümlerini genişletin ve daraltın.
  Ayrıca bkz. Anahat oluşturma.
• Kaynak Denetimi - Açık kaynak depoya yapılan kod katkılarının geçmişini görüntüleyin.

Orta bölme, kaydırma çubuğu

Kaydırma çubuğu, kodunuzu kaydırmanın ötesinde başka işlevler de yerine getirebilir. Bunu başka bir kod düzenleyicisi bölmesi açmak için de kullanabilirsiniz. Ayrıca, kaydırma çubuğunu kullanarak ek açıklamalar ekleyerek veya farklı görüntü modlarını kullanarak daha verimli bir şekilde kod oluşturmanıza yardımcı olabilirsiniz.

Kod penceresini bölme

Kod düzenleyicisinin kaydırma çubuğunda sağ üst kısımda Bir Böl düğmesi bulunur. Bunu seçtiğinizde, başka bir kod düzenleyicisi bölmesi açabilirsiniz. Bu, birbirinden bağımsız olarak çalıştıkları için yararlıdır, böylece bunları farklı konumlardaki kod üzerinde çalışmak için kullanabilirsiniz.

Düzenleyici penceresini bölme hakkında daha fazla bilgi için Düzenleyici pencerelerini yönetme sayfasına bakın.

Ek açıklamaları veya harita modunu kullanma

Ayrıca kaydırma çubuğunun görünümünü ve içerdiği diğer özellikleri de değiştirebilirsiniz. Örneğin, birçok kişi kod değişiklikleri, kesme noktaları, yer işaretleri, hatalar ve imleç konumu gibi görsel ipuçları sağlayan açıklamaları kaydırma çubuğuna eklemeyi sever.

Diğerleri, kaydırma çubuğunda kod satırlarını minyatür olarak görüntüleyen harita modunu kullanmayı takdir eder. Büyük kod dosyalarıyla çalışan geliştiriciler, harita modunun varsayılan olan kaydırma çubuğundan daha etkili bir şekilde kod satırlarını izlediğini keşfedebilir.

Kaydırma çubuğunun varsayılan ayarlarını değiştirme hakkında daha fazla bilgi için Kaydırma çubuğunu özelleştirme sayfasına bakın.

XAML'e özgü özellikler

Aşağıdaki özelliklerin çoğu Visual Studio IDE'de evrensel olarak kullanılabilir, ancak bazılarına XAML geliştiricileri için kodlamayı kolaylaştıran boyutlar eklenmiştir.

XAML kod parçacıkları

Kod parçacıkları, kod parçacığı ekle veya klavye kısayollarının bir bileşimini (Ctrl+, Ctrl+X) kullanarak kod dosyasına ekleyebileceğiniz yeniden kullanılabilir kod bloklarıdır. IntelliSense artık hem yerleşik kod parçacıkları hem de el ile eklediğiniz özel kod parçacıkları için çalışan XAML kod parçacıklarının gösterilmesini destekliyor. Kullanıma hazır bazı XAML kod parçacıkları arasında #region, , Column definitionRow definition, Setterve Tagbulunur.

Daha fazla bilgi için bkz. Kod parçacıkları ve C# kod parçacıkları sayfaları.

XAML #region desteği

Visual Studio'da WPF, UWP, Xamarin.Forms ve .NET MAUI'deki XAML geliştiricileri için #region desteği sağlanır. Visual Studio 2019'da, #region desteğinde artımlı iyileştirmeler yapmaya devam ediyoruz. Örneğin, sürüm 16.4 ve sonraki sürümlerde , #region seçenekleri yazmaya başladığınızda <!görünür.

Kodunuzun genişletmek veya daraltmak istediğiniz bölümlerini gruplandırmak istediğinizde bölgeleri kullanabilirsiniz.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Bölgeler hakkında daha fazla bilgi için #region (C# Başvurusu) sayfasına bakın. Kodun bölümlerini genişletme ve daraltma hakkında daha fazla bilgi için bkz. Anahat sayfası.

XAML açıklamaları

Geliştiriciler genellikle açıklama kullanarak kodlarını belgelemektedir. MainWindow.xaml sekmesindeki XAML koduna açıklamaları aşağıdaki yollarla ekleyebilirsiniz:

• Açıklamadan önce girin <!-- ve açıklamanın arkasına ekleyin --> .

• Girin <! ve seçenekler listesinden seçim yapın !-- .

  

• Bir açıklamayla çevrelemek istediğiniz kodu seçin ve ardından IDE'deki araç çubuğundan Açıklama düğmesini seçin. Eylemi tersine çevirmek için Açıklamayı Kaldır düğmesini seçin.

  

• Açıklamayla çevrelemek istediğiniz kodu seçin ve ardından Ctrl+K, Ctrl+C tuşlarına basın. Seçili kodun açıklamasını açmak için Ctrl+K, Ctrl+U tuşlarına basın.

MainWindow.xaml.cs sekmesindeki C# kodunda açıklamaları kullanma hakkında daha fazla bilgi için Belgeler açıklamaları sayfasına bakın.

XAML ampulleri

XAML kodunuzda görünen ampul simgeleri, kodu yeniden düzenlemek, oluşturmak veya başka bir şekilde değiştirmek için kullanabileceğiniz Hızlı Eylemler'in bir parçasıdır.

XAML kodlama deneyiminize nasıl fayda sağladıklarına birkaç örnek aşağıda verilmiştir:

• Gereksiz ad alanlarını kaldırın. XAML kod düzenleyicisinde, gereksiz ad alanlarının altı dalgalı mavi çizgiyle çizilir. İmlecinizi gereksiz bir using'in üzerine getirdiğinizde bir ampul belirir. Açılan listeden Gereksiz Ad Alanlarını Kaldır seçeneğini belirlediğinizde, kaldırabileceğiniz bir önizleme görürsünüz.

  

• Ad alanını yeniden adlandırın. Bir ad alanını vurguladıktan sonra sağ tıklama bağlam menüsünden sağlanan bu özellik, bir ayarın birden çok örneğini aynı anda değiştirmeyi kolaylaştırır. Bu özelliğe menü çubuğunu, Düzenle>Yeniden Düzenle>Yeniden Adlandır kullanarak veya Ctrl+R tuşuna ve ardından yeniden Ctrl+R tuşuna basarak da erişebilirsiniz.

  

Daha fazla bilgi için Bir kod sembolünü yeniden adlandırma refaktörleme sayfasına bakın.

UWP için koşullu XAML

Koşullu XAML, XAML işaretlemesinde ApiInformation.IsApiContractPresent yöntemini kullanmak için bir yol sağlar. Bu, arka planda kod kullanmaya gerek kalmadan bir API'nin varlığına göre işaretlemede özellikleri ayarlamanıza ve nesneleri örneklemenize olanak tanır.

Daha fazla bilgi için Koşullu XAML sayfasına ve masaüstü uygulamalarında UWP XAML denetimlerini barındırma (XAML Adaları) sayfasına bakın.

XAML Yapı Görselleştiricisi

Kod düzenleyicisindeki Yapı Görselleştiricisi özelliği, kodunuzdaki açık ve kapalı etiket öğeleriyle eşleşen dikey kesikli çizgiler olan yapı kılavuzu çizgilerini gösterir. Bu dikey çizgiler, mantıksal blokların nerede başlayıp nerede sona erdiğini görmeyi kolaylaştırır.

Daha fazla bilgi için Bkz. Kodda gezinme sayfası.

XAML için IntelliCode

Kodunuza bir XAML etiketi eklediğinizde, genellikle sol köşeli ayraç <ile başlarsınız. Bir açılı ayraç yazdığınızda, en popüler XAML etiketlerinden birkaçını listeleyen bir IntelliCode menüsü görünür. Kodunuza hızla eklemek istediğiniz birini seçin.

Daha fazla bilgi için Bkz. IntelliCode'a Genel Bakış sayfası.

Settings

Visual Studio IDE'deki tüm ayarlar hakkında daha fazla bilgi için kod düzenleyicisinin Özellikleri sayfasına bakın.

XAML isteğe bağlı ayarları

XAML kod düzenleyicisinin varsayılan ayarlarını değiştirmek için Seçenekler bölmesini kullanabilirsiniz. Ayarları görüntülemek için Araçlar>Seçenekleri bölmesini açın ve Tüm Ayarlar>Dilleri>XAML bölümünü genişletin.

Uyarı

Seçenekler bölmesindeki bölümlere ve ayarlara erişmek için klavye kısayollarını da kullanabilirsiniz. IDE'de arama yapmak için Ctrl+Q'yi seçin, seçenekler yazın ve Enter tuşuna basın. Seçenekler listesinde arama yapmak için Ctrl+E tuşuna basın, diller yazın, Enter tuşuna basın, xaml yazın ve enter tuşuna basın.

Klavye kısayolları hakkında daha fazla bilgi için Visual Studio için kısayol ipuçları sayfasına bakın.

Evrensel metin düzenleyicisi seçenekleri

XAML Seçenekleri'nin ilk üç bölümü, Visual Studio IDE'nin desteklediği tüm programlama dillerine evrensel olan ayarlar sağlar. Bu seçenekler ve bunların nasıl kullanılacağı hakkında daha fazla bilgi edinmek için aşağıdaki tabloda yer alan bağlantılı bilgilere bakın.

Bölüm	Yer
General	Seçenekler bölmesi: Tüm Ayarlar, Diller, Varsayılanlar, Genel
Kaydırma çubukları	Seçenekler, Tüm Ayarlar, Diller, Varsayılanlar, Kaydırma Çubukları
Sekmeler	Seçenekler, Tüm Ayarlar, Diller, Varsayılanlar, Sekmeler

XAML'e özgü metin düzenleyicisi seçenekleri

XAML Seçenekleri'nin aşağıdaki bölümleri XAML'ye özeldir. Bu ayarlar, XAML tabanlı uygulamalar geliştirirken düzenleme deneyiminizi geliştirebilir. Bu seçenekler ve bunların nasıl kullanılacağı hakkında daha fazla bilgi edinmek için aşağıdaki tabloda yer alan bağlantılı bilgilere bakın.

Bölüm	Yer
Formatting	Seçenekler bölmesi: Tüm Ayarlar, Diller, XAML, Biçimlendirme
Miscellaneous	Seçenekler, Tüm Ayarlar, Diller, XAML, Çeşitli

İpucu

Çeşitli bölümündeki Olay işleyicisi yöntemini büyük harfe çevirme ayarı özellikle XAML geliştiricileri için yararlıdır. Bu ayar, yeni olduğu için varsayılan olarak kapalıdır, ancak kodunuzda uygun büyük/küçük harf kullanımı için bu ayarı açık konuma getirmenizi öneririz.

Sonraki Adımlar

Uygulamanızı hata ayıklama modunda çalıştırırken kodunuzu gerçek zamanlı olarak düzenleme hakkında daha fazla bilgi edinmek için XAML Çalışırken Yeniden Yükleme sayfasına bakın.

Ayrıca bakınız

• Visual Studio Code düzenleyicisi özellikleri
• UWP uygulamalarında XAML
• Xamarin.Forms uygulamalarında XAML
• .NET MAUI uygulamalarında XAML kullanımı