XAML kod düzenleyici

Visual Studio IDE'deki XAML kod düzenleyicisi, Windows platformu ve Xamarin.Forms 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 kullanacağı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.
  (Hata ayıklarken kodunuzu gerçek zamanlı olarak da düzenleyebilirsinizXAML Çalışırken Yeniden Yükleme.)
• 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 aynı düğmeyi yeniden seçin ve bu düğmenin adı Bölmeyi Genişlet düğmesi.)

İkinci satır

XAML kod penceresinin en üstündeki ikinci satırda iki Pencere açılan 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çılan 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üzenleyicisindeki odağınız seçtiğiniz öğeyi içeren kod satırına yaslanı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üzenleyicisindeki odağınız seçtiğiniz özelliği içeren kod satırına yaslanır.

  

Orta bölme, kod düzenleyicisi

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

Hızlı Eylemler

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 deyiminin üzerine gelin, ampul simgesini seçin ve ardından açılan 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 IntelliSense Kaldırma ve Sıralama Kullanımı Düzenle'yi>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 kapatmak ve açmak için, Metin Düzenleyicisi ayarlarında (Araçlar>Seçenekleri>Metin Düzenleyicisi) Değişiklikleri izle seçeneğini değiştirin.

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 kod düzenleyicisinin Özellikleri sayfasının Düzenleyici özellikleri bölümüne bakın.

Sağ tıklama 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 Yeniden Düzenleme : Kodu tek bir eylemle yeniden düzenleyin, oluşturur veya başka bir şekilde 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.
• Açıklamaya Göz Atma - Geçerli konumunuzu düzenleyicide bırakmadan bir türün tanımının önizlemesini gösterir.
  Ayrıca bkz. Tanıma Göz Atma ve Tanıma Göz Atma 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ıma Git.
• Çevrele... - Seçili bir kod bloğunun çevresine eklenen surround kod parçacıkları kullanın.
  Ayrıca bkz. Genişletme parçacıkları ve surround kod parçacıkları.
• Kod Parçacığı Ekle - İmleç konumuna bir kod parçacığı ekler.
• Kes - Kendi kendine açıklayıcı
• 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ırmaktan fazlasını yapabilir. 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 ek özellikleri de değiştirebilirsiniz. Örneğin, birçok kişi kod değişiklikleri, kesme noktaları, yer işaretleri, hatalar ve şapka işareti konumu gibi görsel ipuçları sağlayan ek 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. Bir dosyada çok fazla koda sahip olan geliştiriciler, eşleme modunun kod satırlarını varsayılan kaydırma çubuğundan daha etkili bir şekilde izlediğini bulabilir.

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 K, Ctrl++X) kullanarak kod dosyasına ekleyebileceğiniz yeniden kullanılabilir kod bloklarıdır. IntelliSense'i, hem yerleşik kod parçacıkları hem de el ile eklediğiniz özel kod parçacıkları için çalışan XAML parçacıklarını göstermeyi destekleyecek şekilde geliştirdik. 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 ve Xamarin.Forms'da XAML geliştiricileri için #region destek 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 siz yazdıkça <!gösterilir.

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ı soluk metinde görünür. kullanarak imlecinizi gereksiz bir öğenin üzerine getirdiğinizde ampul görüntülenir. 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, Yeniden DüzenlemeYi Yeniden Düzenleme'yi>> kullanarak veya Ctrl R tuşuna ve ardından yeniden Ctrl++R tuşuna basarak da erişebilirsiniz.

  

  Daha fazla bilgi için kod simgesini yeniden düzenlemeyi yeniden adlandırma 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 (XAML Adaları) Konak UWP XAML denetimleri 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. Bu açılı ayraç yazdığınızda, daha popüler XAML etiketlerinden birkaçını listeleyen bir IntelliCode menüsü görüntülenir. Kodunuza hızla eklemek istediğiniz birini seçin.

IntelliCode seçimlerini, listenin en üstünde göründükleri ve yıldızlı oldukları için tanıyabilirsiniz.

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

Ayarlar

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 iletişim kutusunu kullanabilirsiniz. Ayarları görüntülemek için Araçlar>Seçenekleri>Metin Düzenleyicisi>XAML'yi seçin.

Evrensel metin düzenleyicisi seçenekleri

XAML için Seçenekler iletişim kutusunda, aşağıdaki ilk üç öğe Visual Studio IDE'nin desteklediği tüm programlama dillerine evrenseldir. 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ı bilgileri ziyaret edin.

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

Aşağıdaki tabloda, XAML tabanlı uygulamalar geliştirirken düzenleme deneyiminizi geliştirebilecek Seçenekler iletişim kutusundaki ayarlar listelenmiştir. Bu seçenekler ve bunların nasıl kullanılacağı hakkında daha fazla bilgi edinmek için bağlantılı bilgileri ziyaret edin.

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 bkz.

• Visual Studio kod düzenleyicisi özellikleri
• UWP uygulamalarında XAML
• Xamarin.Forms uygulamalarında XAML