** C++/CX'te "Merhaba Dünya!" UWP uygulaması oluşturma

2025-06-10

Önemli

Bu öğreticide C++/CX kullanılır. Microsoft, Windows Çalışma Zamanı (WinRT) API'leri için tamamen standart bir modern C++17 dil projeksiyonu olan C++/WinRT'yi yayımladı. Bu dil hakkında daha fazla bilgi için bkz. C++/WinRT.

Microsoft Visual Studio ile C++/CX kullanarak Genişletilebilir Uygulama biçimlendirme dili (XAML) ile tanımlanan bir kullanıcı arabirimiyle Windows üzerinde çalışan bir uygulama geliştirebilirsiniz.

Uyarı

Bu öğreticide Visual Studio Community 2019 kullanılır. Visual Studio'nun farklı bir sürümünü kullanıyorsanız, sizin için biraz farklı görünebilir.

Başlamadan önce

Bu öğreticiyi tamamlamak için, Windows çalıştıran bir bilgisayarda Visual Studio Community'yi veya Visual Studio'nun Topluluk dışı sürümlerinden birini kullanmanız gerekir. İndirme için bkz. Araçları elde etme .
Bunu takip etmek için C++/CX, XAML ve XAML'ye genel bakışkavramları hakkında temel bilgilere sahip olmanız gerekir.
Birlikte ilerlemek için Visual Studio'da varsayılan pencere düzenini kullanmanız gerekir. Varsayılan düzene sıfırlamak için menü çubuğunda pencere >Pencere Düzenini Sıfırlaöğesini seçin.

C++ masaüstü uygulamalarını UWP uygulamalarıyla karşılaştırma

C++ dilinde Windows masaüstü programlamanın arka planından geliyorsanız, UWP için uygulama yazmanın bazı yönlerinin tanıdık olduğunu, ancak diğer yönlerinin biraz öğrenme gerektirdiğini göreceksiniz.

Aynı şey nedir?

Kod yalnızca Windows Çalışma Zamanı ortamından erişilebilen Windows işlevlerini çağırdıkça STL, CRT (bazı özel durumlar hariç) ve diğer C++ kitaplıklarını kullanabilirsiniz.
Görsel tasarım yüzeylerine alışkınsanız Microsoft Visual Studio'da yerleşik olarak bulunan tasarımcıyı kullanmaya devam edebilir veya Visual Studio için daha tam özellikli Blend'i kullanabilirsiniz. Kullanıcı arabirimini el ile kodlamaya alışkınsanız XAML'nizi el ile kodlayabilirsiniz.
Hala Windows işletim sistemi türlerini ve kendi özel türlerinizi kullanan uygulamalar oluşturuyorsunuz.
Visual Studio hata ayıklayıcısını, profil oluşturucuyu ve diğer geliştirme araçlarını kullanmaya devam edebilirsiniz.
Visual C++ derleyicisi tarafından yerel makine koduna derlenmiş uygulamalar oluşturmaya devam edebilirsiniz. C++/CX içindeki UWP uygulamaları yönetilen çalışma zamanı ortamında yürütülemez.

Yenilikler neler?

UWP uygulamalarına yönelik tasarım ilkeleri, masaüstü uygulamalarına yönelik tasarım ilkelerinden çok farklıdır. Pencere kenarlıkları, etiketler, iletişim kutuları vb. vurgudan çıkarılır. İçerik önceliklidir. Harika UWP uygulamaları, planlama aşamasının başından itibaren bu ilkeleri birleştirir.
Tüm kullanıcı arabirimini tanımlamak için XAML kullanıyorsunuz. Kullanıcı arabirimi ve çekirdek program mantığı arasındaki ayrım, UWP uygulamasında MFC veya Win32 uygulamasına göre çok daha nettir. Siz kod dosyasındaki davranış üzerinde çalışırken diğer kişiler kullanıcı arabiriminin XAML dosyasındaki görünümü üzerinde çalışabilir.
Öncelikli olarak yeni, gezinmesi kolay, nesne odaklı BIR API'ye, Windows Çalışma Zamanı'na karşı programlama yapabilirsiniz, ancak Windows cihazlarında Win32 bazı işlevler için hala kullanılabilir.
Windows Çalışma Zamanı nesnelerini kullanmak ve oluşturmak için C++/CX kullanırsınız. C++/CX, dinamik olarak oluşturulan nesnelerin C++ özel durum işlemesini, temsilcilerini, olaylarını ve otomatik başvuru sayma işlemlerini etkinleştirir. C++/CX kullandığınızda, temel alınan COM ve Windows mimarisinin ayrıntıları uygulama kodunuzdan gizlenir. Daha fazla bilgi için bkz. C++/CX Dil Referansı.
Uygulamanız, uygulamanızın içerdiği türler, kullandığı kaynaklar ve gerektirdiği özellikler (dosya erişimi, İnternet erişimi, kamera erişimi vb.) hakkında meta veriler içeren bir pakette derlenmiştir.
Microsoft Store ve Windows Phone Mağazası'nda uygulamanız bir sertifikasyon işlemiyle güvenli olarak doğrulanır ve milyonlarca potansiyel müşteri tarafından bulunabilir hale gelir.

C++/CX'te Hello World Store uygulaması

İlk uygulamamız etkileşim, düzen ve stillerin bazı temel özelliklerini gösteren bir "Merhaba Dünya"dır. Windows Evrensel uygulama projesi şablonundan bir uygulama oluşturacağız. Daha önce Windows 8.1 ve Windows Phone 8.1 için uygulamalar geliştirdiyseniz Visual Studio'da biri Windows uygulaması, biri telefon uygulaması ve diğeri paylaşılan kod içeren üç projeniz olması gerekir. Windows Evrensel Windows Platformu (UWP), Windows çalıştıran masaüstü ve dizüstü bilgisayarlar, tabletler, cep telefonları, VR cihazları gibi cihazlar dahil olmak üzere tüm cihazlarda çalışan tek bir proje olmasını mümkün kılar.

Temel bilgilerle başlayacağız:

Visual Studio'da Evrensel Windows projesi oluşturma.
Oluşturulan projeleri ve dosyaları anlama.
Visual C++ bileşen uzantılarındaki (C++/CX) uzantıları ve bunların ne zaman kullanılacağını anlama.

İlk olarak, Visual Studio'da bir çözüm oluşturun

Visual Studio'da, menü çubuğunda DosyaYeniProje...seçin .
Yeni Proje oluştur iletişim kutusunda, Boş Uygulama (Evrensel Windows - C++/CX)seçin. Bu seçeneği görmüyorsanız Evrensel Windows Uygulama Geliştirme Araçları'nın yüklü olduğundan emin olun. Daha fazla bilgi için bkz. Kurulumu yap.

Yeni proje oluştur iletişim kutusunda C++/CX proje şablonlarını

İleriseçin ve proje için bir ad girin. Adını HelloWorld olarak adlandıracağız.
Oluştur düğmesini seçin.

Uyarı

Visual Studio'yu ilk kez kullanıyorsanız , Geliştirici modunu etkinleştirmenizi isteyen bir Ayarlar iletişim kutusu görebilirsiniz. Geliştirici modu, yalnızca Mağaza'dan değil, uygulamaları doğrudan çalıştırma izni gibi belirli özellikleri etkinleştiren özel bir ayardır. Daha fazla bilgi için lütfen geliştirme için cihazınızı etkinleştirmeyi okuyun. Bu kılavuza devam etmek için Geliştirici modu'nu seçin, Evet'e tıklayın ve iletişim kutusunu kapatın.

Proje dosyalarınız oluşturulur.

Devam etmeden önce çözümde neler olduğunu inceleyelim.

düğümleri daraltılmış evrensel uygulama çözümünü

Proje dosyaları hakkında

Proje klasöründeki her .xaml dosyasının aynı klasörde karşılık gelen bir .xaml.h dosyası ve .xaml.cpp dosyası ve diskte bulunan ancak projenin parçası olmayan Oluşturulan Dosyalar klasöründe bir .g dosyası ve bir .g.hpp dosyası vardır. Kullanıcı arabirimi öğeleri oluşturmak ve bunları veri kaynaklarına (DataBinding) bağlamak için XAML dosyalarını değiştirirsiniz. Olay işleyicileri için özel mantık eklemek üzere .h ve .cpp dosyalarını değiştirirsiniz. Otomatik oluşturulan dosyalar, XAML işaretlemesinin C++/CX'e dönüştürülmesi anlamına gelir. Bu dosyaları değiştirmeyin, ancak arka planda kodun nasıl çalıştığını daha iyi anlamak için bunları inceleyebilirsiniz. Temel olarak, oluşturulan dosya bir XAML kök öğesi için kısmi bir sınıf tanımı içerir; bu sınıf, *.xaml.h ve .cpp dosyalarında değiştirdiğiniz sınıfla aynıdır. Oluşturulan dosyalar, yazdığınız kodda bunlara başvurabilmeniz için XAML UI alt öğelerini sınıf üyeleri olarak bildirir. Derleme zamanında, oluşturulan kod ve kodunuz tam bir sınıf tanımıyla birleştirilir ve sonra derlenir.

Önce proje dosyalarına bakalım.

App.xaml, App.xaml.h, App.xaml.cpp: Bir uygulamanın giriş noktası olan Uygulama nesnesini temsil edin. App.xaml sayfaya özgü kullanıcı arabirimi işaretlemesi içermez, ancak herhangi bir sayfadan erişilebilir olmasını istediğiniz kullanıcı arabirimi stillerini ve diğer öğeleri ekleyebilirsiniz. Arka planda kod dosyaları OnLaunched ve OnSuspending olayları için işleyiciler içerir. Genellikle, uygulamanızı başlatıldığında başlatmak ve askıya alınıp sonlandırıldığında temizleme gerçekleştirmek için buraya özel kod eklersiniz.
MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Bir uygulamadaki varsayılan "başlangıç" sayfası için XAML işaretlemesini ve arka planda kodu içerir. Gezinti desteği veya yerleşik denetimleri yoktur.
pch.h, pch.cpp: Önceden derlenmiş bir üst bilgi dosyası ve bunu projenizde içeren dosya. pch.h'de, sık değişmeyen ve çözümdeki diğer dosyalara dahil edilen tüm üst bilgileri ekleyebilirsiniz.
Package.appxmanifest: Uygulamanızın gerektirdiği cihaz özelliklerini ve uygulama sürümü bilgilerini ve diğer meta verileri açıklayan bir XML dosyası. Bu dosyayı Bildirim Tasarımcısı'de açmak için çift tıklayın.
HelloWorld_TemporaryKey.pfx: Visual Studio'dan bu makinede uygulamanın dağıtımını sağlayan anahtar.

Koda ilk bakış

Paylaşılan projede App.xaml.cpp App.xaml.h dosyasındaki kodu incelerseniz, çoğunlukla tanıdık görünen C++ kodu olduğunu fark edersiniz. Ancak, Windows Çalışma Zamanı uygulamalarında yeniyseniz veya C++/CLI ile çalıştıysanız bazı söz dizimi öğeleri tanıdık olmayabilir. C++/CX'te göreceğiniz en yaygın standart dışı söz dizimi öğeleri şunlardır:

Referans sınıfları

Windows API'sindeki tüm türleri (XAML denetimleri, uygulamanızdaki sayfalar, Uygulama sınıfının kendisi, tüm cihaz ve ağ nesneleri, tüm kapsayıcı türleri) içeren neredeyse tüm Windows Çalışma Zamanı sınıflarıbaşvuru sınıfı olarak bildirilir. Birkaç Windows türü değer sınıfı veya değer yapısıolarak tanımlanmıştır. Ref sınıfı herhangi bir dilden kullanılabilir. C++/CX'te bu türlerin ömrü otomatik başvuru sayımına (çöp toplamaya değil) tabidir, böylece bu nesneleri hiçbir zaman açıkça silmezsiniz. Kendi referans sınıflarınızı da oluşturabilirsiniz.

namespace HelloWorld
{
   /// <summary>
   /// An empty page that can be used on its own or navigated to within a Frame.
   /// </summary>
   public ref class MainPage sealed
   {
      public:
      MainPage();
   };
}

Tüm Windows Çalışma Zamanı türleri bir ad alanı içinde bildirilmelidir ve ISO C++ dilinden farklı olarak türlerin kendileri bir erişilebilirlik değiştiriciye sahiptir. genel değiştirici, sınıfı ad alanının dışındaki Windows Çalışma Zamanı bileşenlerine görünür hale getirir. korumalı anahtar sözcüğü, sınıfın temel sınıf olarak hizmet veremeyeceği anlamına gelir. Hemen hemen tüm başvuru sınıfları mühürlüdür; JavaScript sınıf kalıtımını anlamadığından, sınıf devralma yaygın olarak kullanılmaz.

yeni ve ^ (şapkalar)

^ (hat) işlecini kullanarak bir başv sınıfının değişkenini bildirir ve ref new anahtar sözcüğüyle nesnesinin örneğini oluşturursunuz. Bundan sonra, aynı C++ işaretçisi gibi -> işleciyle nesnenin örnek yöntemlerine erişin. Statik yöntemlere ISO C++ ile olduğu gibi :: işleciyle erişilir.

Aşağıdaki kodda, bir nesneyi örneklemek için tam nitelikli adı kullanırız ve bir örnek yöntemini çağırmak için -> işlecini kullanırız.

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
     ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

bitmapImage->SetSource(fileStream);

Genellikle, bir .cpp dosyasında using namespace Windows::UI::Xaml::Media::Imaging yönergesini ve otomatik anahtar sözcüğünü ekleriz; böylece aynı kod aşağıdaki gibi görünür:

auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);

Özellikleri

Bir başvuru sınıfı, yönetilen dillerde olduğu gibi kod kullanmak için alan olarak görünen özel üye işlevleri olan özelliklere sahip olabilir.

public ref class SaveStateEventArgs sealed
{
   public:
   // Declare the property
   property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
   {
      Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
   }
   ...
};

   ...
   // consume the property like a public field
   void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {    
      if (mruToken != nullptr && !mruToken->IsEmpty())
   {
      e->PageState->Insert("mruToken", mruToken);
   }
}

Temsilcileri

Yönetilen dillerde olduğu gibi, temsilci de belirli bir imzaya sahip bir işlevi kapsülleyen bir başvuru türüdür. Onlar genellikle en çok olaylar ve olay işleyicileri ile kullanılır.

// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);

// Event declaration (class scope)
public ref class NavigationHelper sealed
{
   public:
   event LoadStateEventHandler^ LoadState;
};

// Create the event handler in consuming class
MainPage::MainPage()
{
   auto navigationHelper = ref new Common::NavigationHelper(this);
   navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}

Uygulamaya içerik ekleme

Şimdi uygulamaya içerik ekleyelim.

Adım 1: Başlangıç sayfanızı değiştirme

Çözüm GezginiMainPage.xaml dosyasını açın.

Aşağıdaki XAML'yi kök Gridöğesine kapanış etiketinden hemen önce ekleyerek kullanıcı arabirimi için denetimler oluşturun. Kullanıcının adını soran bir TextBlock, kullanıcının adını kabul eden bir TextBox öğesi, Buttonve başka bir TextBlock öğesi içeren bir StackPanel içerir.

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

Bu noktada, çok temel bir Evrensel Windows uygulaması oluşturdunuz. UWP uygulamasının nasıl göründüğünü görmek için F5 tuşuna basarak uygulamayı hata ayıklama modunda derleyin, dağıtın ve çalıştırın.

İlk olarak varsayılan giriş ekranı görüntülenir. Bir görüntüye (Varlıklar\SplashScreen.scale-100.png) ve uygulamanın bildirim dosyasında belirtilen bir arka plan rengine sahiptir. Giriş ekranını özelleştirmeyi öğrenmek için bkz. Giriş ekranı ekleme.

Giriş ekranı kaybolduğunda uygulamanız görünür. Uygulamanın ana sayfasını görüntüler.

UWP uygulaması ekranı , kontrollerle birlikte

Henüz pek bir şey yapmıyor, ama tebrikler, ilk Evrensel Windows Platformu uygulamanızı oluşturdunuz!

Hata ayıklamayı durdurmak ve uygulamayı kapatmak için Visual Studio'ya dönün ve Shift+F5 tuşlarına basın.

Daha fazla bilgi için bkz. Visual Studio'dan Mağaza çalıştırma.

Uygulamada, TextBoxyazabilirsiniz, ancak Düğmesi tıklanması hiçbir şey yapmaz. Sonraki adımlarda, düğmenin Click olayını işleyen ve kişiselleştirilmiş bir karşılama görüntüleyen bir olay işleyicisi oluşturursunuz.

2. Adım: Olay işleyicisi oluşturma

MainPage.xaml içinde, XAML veya tasarım görünümünde, daha önce eklemiş olduğunuz StackPanel içindeki "Merhaba Deyin" Düğmesi'ü seçin.
F4 tuşuna basarak Özellikler Penceresi açın ve ardından Olaylar düğmesini () seçin.
Tıklayın olayını bulun. Metin kutusuna Click olayını işleyen işlevin adını yazın. Bu örnek için "Button_Click" yazın.
Enter tuşuna basın. MainPage.xaml.cpp dosyasında bir olay işleyici yöntemi oluşturulur ve olay meydana geldiğinde yürütülecek kodu ekleyebilmeniz için yöntem açılır.

Aynı zamanda MainPage.xaml dosyasında Düğmesi için XAML, Click olay işleyicisini bildirecek şekilde güncelleştirilir:

<Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

Bunu xaml koduna elle de ekleyebilirdiniz, bu da tasarımcı yüklenmezse faydalı olabilir. Bunu el ile girerseniz, "Tıklayın" yazın ve intelliSense'in yeni olay işleyicisi ekleme seçeneğini açmasına izin verin. Bu şekilde Visual Studio gerekli yöntem bildirimini ve saplamasını oluşturur.

İşleme sırasında işlenmeyen bir özel durum oluşursa tasarımcı yüklenemez. Tasarım aracında işleme, sayfanın tasarım zamanı sürümünü çalıştırmayı içerir. Kullanıcı kodunu çalıştırmayı devre dışı bırakmak yararlı olabilir. Bunu yapmak için Araçları, Seçenekler iletişim kutusundaki ayarı değiştirebilirsiniz. XAML Tasarımcısıaltında, Proje kodunu XAML tasarımcısında çalıştır (destekleniyorsa)seçeneğinin işaretini kaldırın.

MainPage.xaml.cpp'da, az önce oluşturduğunuz Button_Click olay işleyicisine aşağıdaki kodu ekleyin. Bu kod, kullanıcının adını nameInputTextBox denetiminden alır ve bir selamlama oluşturmak için kullanır. greetingOutput TextBlock sonucu görüntüler.

void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}

Projeyi başlangıç olarak ayarlayın ve ardından uygulamayı derlemek ve çalıştırmak için F5 tuşuna basın. Metin kutusuna bir ad yazıp düğmeye tıkladığınızda, uygulama kişiselleştirilmiş bir karşılama görüntüler.

İleti görüntüleme içeren Uygulama ekranı

3. Adım: Başlangıç sayfasına stil ekleme

Tema seçme

Uygulamanızın görünümünü özelleştirmek kolaydır. Varsayılan olarak, uygulamanız açık stile sahip kaynakları kullanır. Sistem kaynakları da bir açık tema içerir. Şimdi deneyelim ve nasıl göründüğüne bakalım.

Koyu temayı kullanmak için geçiş yapın

App.xaml dosyasını açın.

Uygulama etiketi açma bölümünde RequestedTheme özelliğini düzenleyin ve değerini Koyuolarak ayarlayın:

RequestedTheme="Dark"

Koyu temayı içeren tam Application etiketi aşağıdadır:

<Application
x:Class="HelloWorld.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld"
RequestedTheme="Dark">

Oluşturmak ve çalıştırmak için F5 tuşuna basın. Koyu temayı kullandığına dikkat edin.

Koyu tema Uygulama ekranı

Hangi temayı kullanmalısınız? Hangisini istersen. İşte bizim aldığımız: çoğunlukla görüntü veya video görüntüleyen uygulamalar için koyu temayı öneririz; çok fazla metin içeren uygulamalar için ışık temasını öneririz. Özel renk düzeni kullanıyorsanız, uygulamanızın görünümüne en uygun temayı kullanın. Bu öğreticinin kalan kısmında ekran görüntülerinde Açık temasını kullanacağız.

Not Tema, uygulama başlatıldığında uygulanır ve uygulama çalışırken değiştirilemez.

Sistem stillerini kullanma

Şu anda Windows uygulamasında metin çok küçük ve okunmak zor. Şimdi bir sistem stili uygulayarak bunu düzeltelim.

Öğenin stilini değiştirmek için

Windows projesinde MainPage.xaml dosyasını açın.
XAML veya tasarım görünümünde, daha önce eklediğiniz TextBlock"Adınız nedir?" öğesini seçin.
Özellikler penceresinde (F4), sağ üstteki Özellikler düğmesini () seçin.
Metin grubunu genişletin ve yazı tipi boyutunu 18 piksel olarak ayarlayın.
Çeşitli grubunu genişletin ve Stili özelliğini bulun.
Özellik işaretçisine (Stili özelliğinin sağındaki yeşil kutu) tıklayın ve menüden Sistem Kaynağı>BaseTextBlockStyleöğesini seçin.

BaseTextBlockStyle, ResourceDictionary içinde, \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml konumunda <kök>içerisinde tanımlanmış bir kaynaktır.

XAML tasarım yüzeyinde metnin görünümü değişir. XAML düzenleyicisinde, TextBlock için XAML güncelleştirilir:

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

Yazı tipi boyutunu ayarlamak ve BaseTextBlockStylegreetingOutputTextBlock öğesine atamak için işlemi yineleyin.

İpucu Bu TextBlockiçinde metin olmasa da, işaretçiyi XAML tasarım yüzeyinin üzerine taşıdığınızda, mavi bir ana hat nerede olduğunu gösterir, böylece bunu seçebilirsiniz.

XAML'niz şu şekilde görünür:

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>

Uygulamayı derlemek ve çalıştırmak için F5 tuşuna basın. Şimdi şöyle görünür:

Daha büyük metin Uygulama ekranı

4. Adım: Kullanıcı arabirimini farklı pencere boyutlarına uyarlama

Şimdi kullanıcı arabiriminin farklı ekran boyutlarına uyarlanmış olarak mobil cihazlarda iyi görünmesini sağlayacağız. Bunu yapmak için bir VisualStateManager ekler ve farklı görsel durumlar için uygulanan özellikleri ayarlarsınız.

Kullanıcı arabirimi düzenini ayarlamak için

XAML düzenleyicisinde, kök Grid öğesinin açılış etiketinden sonra bu XAML bloğunu ekleyin.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Yerel makinede uygulamada hata ayıklama. Pencere 641 cihazdan bağımsız pikselden (DIP) daha dar olmadığı sürece kullanıcı arabiriminin öncekiyle aynı göründüğüne dikkat edin.
Mobil cihaz öykünücüsündeki uygulamada hata ayıklama. Kullanıcı arabiriminin narrowState tanımladığınız özellikleri kullandığına ve küçük ekranda doğru göründüğüne dikkat edin.

Mobil uygulama ekranı stilize edilmiş metinle

XAML'nin önceki sürümlerinde visualstatemanager kullandıysanız, buradaki XAML'nin basitleştirilmiş bir söz dizimi kullandığını fark edebilirsiniz.

adlı , 641 olarak ayarlanmış wideState özelliğiyle bir AdaptiveTrigger'e sahiptir. Bu, durumun yalnızca pencere genişliği en az 641 DIP'den küçük olmadığında uygulanacağı anlamına gelir. Bu durum için hiçbir Setter nesnesi tanımlamazsınız, bu nedenle sayfa içeriği için XAML'de tanımladığınız düzen özelliklerini kullanır.

İkinci VisualState, narrowState, MinWindowWidth özelliği 0 olarak ayarlanmış bir AdaptiveTrigger içerir. Bu durum, pencere genişliği 0'dan büyük ancak 641 DIPS'den küçük olduğunda uygulanır. (641 DIP'de wideState uygulanır.) Bu durumda, kullanıcı arabirimindeki denetimlerin düzen özelliklerini değiştirmek için bazı Setter nesneleri tanımlarsınız:

contentPanel öğesinin sol kenar boşluğunu 120'den 20'ye düşürebilirsiniz.
öğesinin ayarını inputPanel konumdan Dikeykonuma değiştirirsiniz.
inputButton öğesine 4 DIP'lik bir üst kenar boşluğu eklersiniz.

Özet

Tebrikler, ilk dersi tamamladınız! Windows Evrensel uygulamalarına içerik eklemeyi, bunlara etkileşim eklemeyi ve görünümlerini değiştirmeyi öğretti.

Sonraki Adımlar

Windows 8.1 ve/veya Windows Phone 8.1'i hedefleyen bir Windows Evrensel uygulama projeniz varsa, bunu Windows 10 veya Windows 11'e taşıyabilirsiniz. Bunun için otomatik bir işlem yoktur, ancak bunu el ile yapabilirsiniz. En son proje sistemi yapısını ve bildirim dosyalarını almak, kod dosyalarınızı projenin dizin yapısına kopyalamak, öğeleri projenize eklemek ve bu konudaki yönergelere göre VisualStateManager kullanarak XAML'nizi yeniden yazmak için yeni bir Windows Evrensel projesiyle başlayın. Daha fazla bilgi için bkz. Windows Çalışma Zamanı 8 projesini Evrensel Windows Platformu (UWP) projesine taşıma ve Evrensel Windows Platformu'na (C++) taşıma.

Mevcut bir uygulama için yeni bir UWP kullanıcı arabirimi oluşturmak gibi bir UWP uygulamasıyla tümleştirmek istediğiniz mevcut C++ kodunuz varsa bkz. nasıl yapılır: Evrensel Windows projesinde var olan C++ kodunu kullanma.

Aracılığıyla paylaş