WinUI 3 için XAML çalışma zamanı tasarım araçları

Visual Studio, uygulamanız çalışırken WinUI 3 XAML'nizi tasarlamanıza, yinelemenize ve incelemenize olanak sağlayan bir çalışma zamanı araçları kümesi içerir. Birlikte kullanıldığında, statik bir yaklaşık değer yerine gerçek kullanıcı arabiriminizi (gerçek stiller, gerçek veri şablonları, gerçek animasyonlar) gösteren hızlı bir düzenleme-yeniden yükleme-inceleme döngüsü sunar.

Not

Visual Studio XAML Tasarımcısı (sürükle ve bırak Tasarım sekmesi) şu anda WinUI 3 projelerini desteklememektedir. .xaml dosyasını açtıysanız ve yalnızca XML düzenleyicisini görüyorsanız kurulumunuz bozuk değil — WinUI 3 için tasarımcı kullanılamaz. Özellik isteği Geliştirici Topluluğu’de takip edilmektedir: WinUI 3 masaüstü uygulamaları için XAML Tasarımcısı desteğinin eklenmesi. Mühendislik çalışmalarının arka planı için bkz. WindowsAppSDK tartışması #4710.

Bu makalede açıklanan çalışma zamanı araçları, bir tasarımcı mevcut olsun ya da olmasın değerlidir. Bu makale iş akışını adım adım açıklar.

Ne kullanacaksınız?

Aracı Ne işe yarıyor? Nasıl açılır?
XAML Anlık Yeniden Yükleme XAML değişikliklerini yeniden başlatmadan çalışan uygulamanıza iletir Otomatik — hata ayıklama sırasında herhangi bir .xaml dosyayı düzenleme
Canlı Görsel Ağaç Tam çalışma zamanı öğesi ağacını gösterir ve uygulamadaki öğeleri seçmenize olanak tanır Hata ayıklama>> Windows Live Görsel Ağacı
Live Property Explorer Çalışma zamanında seçili öğedeki her özelliği görüntülemenizi ve düzenlemenizi sağlar Hata ayıklama>> Windows Live Özellik Gezgini
XAML Canlı Önizleme Çalışan uygulamanızı Visual Studio içinde işler, böylece pencereleri değiştirmeden inceleyebilirsiniz Hata ayıklama>> Windows XAML Live Preview

Tip

Canlı Görsel Ağaç ve Canlı Özellik Gezgini'ni yan yana yerleştirin. Birlikte size gerçek çalışma zamanı değerlerini gösteren ayrıntılı bir inceleme görünümü sağlar.

Prerequisites

  • Visual Studio 2022 sürüm 17.0 veya üzeri (XAML Çalışırken Yeniden Yükleme ve Canlı Görsel Ağaç dahildir).
  • Windows Uygulama SDK'sı kullanan bir WinUI 3 projesi. Oluşturmak için bkz. WinUI 3 projesi oluşturma ve çalıştırma .
  • Projeniz .NET 6 veya üzerini (C#) hedeflemeli veya C++/WinRT kullanmalıdır.

1. Adım: Uygulamanızı hata ayıklayıcının altında başlatın

F5 tuşuna basın (veya Hata Ayıklamayı>Başlat Hata Ayıklama). Hata ayıklayıcı eklendiğinde XAML Çalışırken Yeniden Yükleme otomatik olarak etkinleştirilir.

XAML Çalışırken Yeniden Yükleme araç çubuğu uygulama içi katmanda görünür. Bu ayarı görmüyorsanız ayarın etkinleştirildiğini doğrulayın:

  1. Araçlar>Seçenekler>Hata Ayıklama>XAML Çalışırken Yeniden Yükleme bölümüne gidin.
  2. XAML Çalışırken Yeniden Yükleme etkinleştir seçeneğinin işaretli olduğunu onaylayın.

Important

XAML Çalışırken Yeniden Yükleme hata ayıklayıcı gerektirir. Hata ayıklamadan çalıştırma (Ctrl+F5), Çalışırken Yeniden Yükleme, Canlı Görsel Ağaç ve Canlı Özellik Gezgini'ni devre dışı bırakır.

2. Adım: XAML'yi düzenleme ve değişiklikleri anında görme

Uygulamanız çalışırken düzenleyicideki herhangi bir .xaml dosyaya geçin ve bir değişiklik yapın; örneğin, bir Background rengi değiştirin veya yeni Buttonbir ekleyin. Çalışan uygulama yeniden başlatılmadan bir veya iki saniye içinde güncelleştirilir.

Çalışırken Yeniden Yükleme neler yapabilir ve yapamaz?

Çalışırken Yeniden Yükleme en yaygın düzenlemeleri işler:

  • Öğeleri ekleme, kaldırma veya yeniden sıralama
  • Özellik değerlerini değiştirme (renkler, kenar boşlukları, metin, boyutlar)
  • Stilleri ve kaynak sözlüklerini ekleme veya değiştirme
  • Veri şablonu içeriğini değiştirme

Bazı değişikliklerin yeniden başlatılması gerekir:

  • Yeni sınıflar, kod arkası olay işleyicileri veya x:Class değişiklikleri ekleme
  • App.xaml Birleştirilmiş sözlükleri değiştirme (bazen)
  • Yeni özelliklere başvuran ifadeleri değiştirme x:Bind

Çalışırken Yeniden Yükleme değişiklik uygulayamayınca araç çubuğunda bir bildirim gösterilir. Bu değişiklikleri almak için uygulamayı yeniden başlatması gerekir.

Daha fazla bilgi için bkz. XAML Çalışırken Yeniden Yükleme.

3. Adım: Görsel ağacı ve özellikleri inceleme

Canlı Görsel Ağaç penceresini açın (Debug>Windows>Live Görsel Ağaç). Bu pencere, çalışan uygulamanızın kullanıcı arabirimi ağacındaki üst-alt ilişkilere göre düzenlenmiş her öğeyi gösterir.

Öğeleri görsel olarak seçme

  1. Canlı Görsel Ağaç araç çubuğunda, Çalışan Uygulama'da Öğe Seç'i (crosshair düğmesi) etkinleştirin.
  2. Çalışan uygulamanızdaki herhangi bir öğeye tıklayın; ağaç bu öğeye gider ve Live Property Explorer özelliklerini gösterir.

Bu, bir tasarım yüzeyinde bir öğeye tıklamanın çalışma zamanındaki karşılığıdır; ancak kodda dinamik olarak oluşturulan öğeler de dahil olmak üzere, uygulamanızın ekranda tam olarak oluşturduğu şeyi yansıtır.

Çalışma zamanında özellikleri düzenleme

Canlı Özellik Gezgini'nde özellik değerlerini gerçek zamanlı olarak değiştirebilirsiniz. Örneğin:

  • Aralığı ayarlamak ve etkiyi hemen görmek için Margin a değerini değiştirin.
  • Bir öğe gizlendiğinde ne olacağını test etmek için Collapsed olarak ayarlayınVisibility.
  • Duyarlı düzenleri test etmek için Height veya Width ayarlayın.

Bu çalışma zamanı düzenlemeleri XAML dosyanıza geri kaydedilmez; bunlar deneme amaçlıdır. Beğendiğiniz değerleri bulduğunuzda, bunları dosyanıza .xaml yazın (burada Çalışırken Yeniden Yükleme bunları alır ve kalıcı hale getirir).

4. Adım: XAML Live Preview'ı kullanma

XAML Live Preview, çalışan uygulamanızı bir Visual Studio sekmesi içinde işler, böylece windows'lar arasında geçiş yapmadan uygulamayı ve XAML kaynağınızı yan yana görüntüleyebilirsiniz.

Açmak için: Debug>Windows>XAML Live Preview.

Bu, özellikle uygulama ile Visual Studio arasındaki Alt-Tabbing zahmetli olduğu tek monitörlü kurulumlarda kullanışlıdır.

Daha fazla bilgi için bkz . XAML Live Preview.

Önerilen: Kullanıcı arabirimi oyun alanı sayfası oluşturma

Projenizde özel bir oyun alanı sayfası oluşturun; tek amacı denetimler, stiller ve düzenlerle denemeler yapmak olan bir sayfa. Bu, görsel yineleme için her zaman hazır olan bir karalama çubuğu sağlar ve özellikle yukarıdaki çalışma zamanı araçlarıyla iyi bir şekilde eşleştirir.

Oyun parkını ayarlama

  1. Çözüm Gezgini'da projenize sağ tıklayın veYeni Öğe>Ekle Boş Sayfa (WinUI 3)'i> seçin. UIPlayground.xaml olarak adlandırın.

  2. UIPlayground.xaml içine, denemek istediğiniz her denetim veya düzen için bölümler içeren bir ScrollViewer ekleyin:

    <Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

  3. Oyun alanının kolay ulaşılabilir olmasını sağlayın. Geliştirme sırasında, bunu App.xaml.cs içinde başlangıç sayfası olarak ayarlayın:

    // In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));

    Veya uygulamanız bir NavigationViewkullanıyorsa, yalnızca hata ayıklama derlemelerinde görünen bir menü öğesi ekleyin. Örneğin, ana pencerenizin arkasındaki kodda:

    // In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif

    NavView, x:Name denetiminizin NavigationView olduğu yerdir.

Oyun alanı nasıl kullanılır?

  1. Uygulamayı başlatmak ve oyun alanı sayfasına gitmek için F5 tuşuna basın.
  2. .xaml Dosyayı çalışan uygulamayla yan yana açın (veya XAML Live Preview'ı kullanın).
  3. XAML düzenleyicisinde denetimleri ekleyin veya değiştirin; Çalışırken Yeniden Yükleme değişiklikleri anında iletir.
  4. Canlı Görsel Ağaç'ı kullanarak işlenen denetimlere tıklayın ve gerçek düzen değerlerini Canlı Özellik Gezgini'nde inceleyin.
  5. Denetimin görünümünden memnun olduğunuzda XAML'yi gerçek sayfanıza kopyalayın.

Bu düzen size bir "tür yeniden yükleme-inceleme" döngüsü sağlar ve gerçek kod çalıştırdığından gerçek veri şablonları, gerçek stiller ve gerçek animasyonlar görürsünüz.

Tasarım zamanı ve çalışma zamanı yaklaşımlarını karşılaştırma

Yaygın kullanıcı arabirimi tasarım görevleri çalışma zamanı araçlarıyla şu şekilde eşlenmiştir:

Görev Çalışma zamanı aracı
Sayfaya denetim ekleme XAML öğesini yazın — IntelliSense etiketi ve gerekli özellikleri tamamlar
Denetimi önizleme Çalışırken Yeniden Yükleme aracılığıyla çalışan uygulamada canlı olarak görün
denetlenecek öğeyi seçin Canlı Görsel Ağaç>Öğe Seç (crosshair) kullanın
Özellikleri görüntüleme veya düzenleme Canlı Özellik Gezgini'ni kullanma
Boyutu veya konumu ayarlama Height, Margin, Width öğelerini XAML'de veya Canlı Özellik Gezgini'nde düzenleyin

Verimli bir iş akışı için ipuçları

  • WinUI 3 Galeri uygulamasını kullanın. Microsoft Store'dan yükleyin veya GitHub'dan derleyin. Etkileşimli örnekler ve kopyalamaya hazır XAML koduyla tüm WinUI 3 denetimlerini gösterir. Bunu XAML yazmadan önce göz atabileceğiniz bir görsel katalog olarak düşünün.
  • Oyun alanı sayfanızı açık tutun. Onu uygulamanız için yaşayan bir stil kılavuzu olarak düşünün.
  • d:DesignHeight ve d:DesignWidth kullanın. Tasarımcı olmadan bile bu öznitelikler IntelliSense'e yardımcı olur ve sayfaları düzenleyicide açtığınızda tutarlı bir boyutta tutar.
  • XAML Bağlama Hataları penceresiyle birleştirin. Tasarımcının size hiç göstermeyeceği bağlama hatalarını yakalamak için Debug>Windows>XAML Bağlama Hataları'ndan açın.
  • Topluluk araç setini kullanın. Windows Topluluk Araç Seti, el ile kod yazmanız gereken düzen miktarını azaltan denetimler ve yardımcılar sağlar.

İlgili içerik

  • Last updated on