Buat "Halo, Dunia!" Aplikasi UWP di C++/CX

Penting

Tutorial ini menggunakan C++/CX. Microsoft telah merilis C++/WinRT: proyeksi bahasa C++17 modern yang sepenuhnya standar untuk API Windows Runtime (WinRT). Untuk informasi selengkapnya tentang bahasa ini, silakan lihat C++/WinRT.

Dengan Microsoft Visual Studio, Anda dapat menggunakan C++/CX untuk mengembangkan aplikasi yang berjalan di Windows dengan UI yang ditentukan dalam Extensible Application Markup Language (XAML).

Catatan

Tutorial ini menggunakan Visual Studio Community 2019. Jika Anda menggunakan versi Visual Studio yang berbeda, mungkin terlihat sedikit berbeda untuk Anda.

Sebelum Anda memulai

  • Untuk menyelesaikan tutorial ini, Anda harus menggunakan Visual Studio Community, atau salah satu versi Visual Studio non-Komunitas, di komputer yang menjalankan Windows. Untuk mengunduh, lihat Dapatkan alat.
  • Untuk mengikutinya, Anda harus memiliki pemahaman dasar tentang C++/CX, XAML, dan konsep dalam gambaran umum XAML.
  • Untuk mengikutinya, Anda harus menggunakan tata letak jendela default di Visual Studio. Untuk mengatur ulang ke tata letak default, pada bilah menu, pilih WindowReset Window Layout.

Membandingkan aplikasi desktop C++ dengan aplikasi UWP

Jika Anda berasal dari latar belakang di pemrograman desktop Windows di C++, maka Anda mungkin akan menemukan bahwa beberapa aspek penulisan aplikasi untuk UWP sudah akrab, tetapi aspek lain memerlukan beberapa pembelajaran.

Apa yang sama?

  • Anda dapat menggunakan STL, CRT (dengan beberapa pengecualian), dan pustaka C++ lainnya selama kode hanya memanggil fungsi Windows yang dapat diakses dari lingkungan Windows Runtime.

  • Jika Anda terbiasa dengan permukaan desain, maka Anda masih dapat menggunakan Designer yang disertakan dalam Microsoft Visual Studio, atau Anda dapat menggunakan Blend yang lebih kaya fitur untuk Visual Studio. Jika Anda terbiasa menulis kode UI secara manual, maka Anda dapat menulis XAML Anda secara manual.

  • Anda masih membuat aplikasi yang menggunakan tipe sistem operasi Windows dan tipe kustom Anda sendiri.

  • Anda masih menggunakan debugger Visual Studio, profiler, dan alat pengembangan lainnya.

  • Anda masih membuat aplikasi yang dikompilasi ke kode mesin native oleh pengkompilasi Visual C++. Aplikasi UWP di C++/CX tidak dijalankan di lingkungan runtime terkelola.

Apa yang baru?

  • Prinsip desain untuk aplikasi UWP sangat berbeda dari prinsip untuk aplikasi desktop. Batas jendela, label, kotak dialog, dan sebagainya, tidak ditekankan. Konten adalah yang terpenting. Aplikasi UWP yang hebat menggabungkan prinsip-prinsip ini sejak awal tahap perencanaan.

  • Anda menggunakan XAML untuk menentukan seluruh UI. Pemisahan antara UI dan logika program inti jauh lebih jelas dalam aplikasi UWP daripada di aplikasi MFC atau Win32. Orang lain dapat mengerjakan tampilan UI dalam file XAML saat Anda mengerjakan perilaku dalam file kode.

  • Anda terutama memprogram terhadap API baru yang mudah dinavigasi, berorientasi objek, Windows Runtime, meskipun pada perangkat Windows Win32 masih tersedia untuk beberapa fungsionalitas.

  • Anda menggunakan C++/CX untuk mengakses dan membuat objek Windows Runtime. C++/CX memungkinkan penanganan pengecualian C++, delegasi, peristiwa, dan penghitungan referensi otomatis objek yang dibuat secara dinamis. Saat Anda menggunakan C++/CX, detail arsitektur COM dan Windows yang mendasari disembunyikan dari kode aplikasi Anda. Untuk informasi selengkapnya, lihat Referensi Bahasa C++/CX.

  • Aplikasi Anda dikompilasi ke dalam paket yang juga berisi metadata tentang tipe yang terdapat dalam aplikasi Anda, sumber daya yang digunakannya, dan kemampuan yang diperlukannya (akses file, akses internet, akses kamera, dan sebagainya).

  • Dalam Microsoft Store aplikasi Anda diverifikasi sebagai aman oleh proses sertifikasi dan dibuat dapat ditemukan oleh jutaan pelanggan potensial.

aplikasi Halo Dunia Store di C++/CX

Aplikasi pertama kami adalah "Halo Dunia" yang menunjukkan beberapa fitur dasar interaktivitas, tata letak, dan gaya. Kami akan membuat aplikasi dari templat proyek aplikasi Windows Universal. Universal Windows Platform (UWP) memungkinkan Anda menggunakan satu proyek untuk kode aplikasi anda dan XAML dan menjalankan aplikasi di komputer desktop dan laptop dan tablet Windows.

Kita akan mulai dengan dasar-dasarnya:

  • Cara membuat proyek Universal Windows di Visual Studio.

  • Cara memahami proyek dan file yang dibuat.

  • Cara memahami fitur bahasa tambahan dalam ekstensi komponen Visual C++ (C++/CX), dan kapan menggunakannya.

Pertama, buat solution di Visual Studio

  1. Di Visual Studio, pada bilah menu, pilih File>Baru>Proyek....

  2. Dalam kotak dialog Buat proyek baru, pilih Aplikasi Kosong (Universal Windows - C++/CX). Jika Anda tidak melihat opsi ini, pastikan Anda telah menginstal Universal Windows App Development Tools. Lihat Siapkan untuk informasi selengkapnya.

Templat proyek C++/CX dalam kotak dialog Buat proyek baru

  1. Pilih Next, lalu masukkan nama untuk proyek. Kami akan menamainya HelloWorld.

  2. Pilih tombol Buat .

Catatan

Jika ini pertama kalinya Anda menggunakan Visual Studio, Anda mungkin melihat dialog Pengaturan yang meminta Anda untuk mengaktifkan Mode Pengembang. Mode pengembang adalah pengaturan khusus yang memungkinkan fitur tertentu, seperti izin untuk menjalankan aplikasi secara langsung, bukan hanya dari Store. Untuk informasi selengkapnya, silakan baca Aktifkan perangkat Anda untuk pengembangan. Untuk melanjutkan panduan ini, pilih Mode pengembang, klik Ya, dan tutup dialog.

File proyek Anda dibuat.

Sebelum kita lanjutkan, mari kita lihat apa yang ada dalam solusinya.

Solusi aplikasi universal dengan node diciutkan

Tentang file proyek

Setiap file .xaml dalam folder proyek memiliki file .xaml.h yang sesuai dan file .xaml.cpp di folder yang sama dan file .g dan file .g.hpp di folder File yang Dihasilkan, yang ada di disk tetapi bukan bagian dari proyek. Anda memodifikasi file XAML untuk membuat elemen UI dan menyambungkannya ke sumber data (DataBinding). Anda mengubah file .h dan .cpp untuk menambahkan logika kustom untuk penangan peristiwa. File yang dihasilkan secara otomatis mewakili transformasi markup XAML menjadi C++/CX. Jangan ubah file-file ini, tetapi Anda dapat mempelajarinya untuk lebih memahami cara kerja code-behind. Pada dasarnya, file yang dihasilkan berisi definisi kelas parsial untuk elemen akar XAML; kelas ini adalah kelas yang sama dengan yang Anda ubah dalam file *.xaml.h dan .cpp. File yang dihasilkan mendeklarasikan elemen anak UI XAML sebagai anggota kelas sehingga Anda dapat mereferensikannya dalam kode yang Anda tulis. Pada waktu build, kode yang dihasilkan dan kode Anda digabungkan ke dalam definisi kelas lengkap lalu dikompilasi.

Mari kita lihat terlebih dahulu file proyek.

  • App.xaml, App.xaml.h, App.xaml.cpp: Mewakili objek Aplikasi, yang merupakan titik masuk aplikasi. App.xaml tidak berisi markup UI khusus halaman, tetapi Anda dapat menambahkan gaya UI dan elemen lain yang ingin dapat diakses dari halaman mana pun. File code-behind berisi handler untuk peristiwa OnLaunched dan OnSuspending . Biasanya, Anda menambahkan kode kustom di sini untuk menginisialisasi aplikasi saat dimulai dan melakukan pembersihan saat ditangguhkan atau dihentikan.
  • MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Berisi markup XAML dan code-behind untuk halaman "start" default di aplikasi. Ini tidak memiliki dukungan navigasi atau kontrol bawaan.
  • pch.h, pch.cpp: File header yang telah dikommpilasikan sebelumnya dan file yang menyertakannya dalam proyek Anda. Dalam pch.h, Anda dapat menyertakan header apa pun yang tidak sering berubah dan disertakan dalam file lain dalam solusi.
  • Package.appxmanifest: File XML yang menjelaskan kemampuan perangkat yang diperlukan aplikasi Anda, dan info versi aplikasi dan metadata lainnya. Untuk membuka file ini di Manifest Designer, cukup klik dua kali.
  • HelloWorld_TemporaryKey.pfx: Kunci yang memungkinkan penyebaran aplikasi di komputer ini, dari Visual Studio.

Sekilas tentang kode

Jika Anda memeriksa kode di App.xaml.h, App.xaml.cpp dalam proyek bersama, Anda akan melihat bahwa sebagian besar adalah kode C++ yang terlihat akrab. Namun, beberapa elemen sintaks mungkin tidak akrab jika Anda baru menggunakan aplikasi Windows Runtime, atau Anda telah bekerja dengan C++/CLI. Berikut adalah elemen sintaks non-standar paling umum yang akan Anda lihat di C++/CX:

Kelas referensi

Hampir semua kelas Windows Runtime, yang mencakup semua jenis dalam Windows API--kontrol XAML, halaman di aplikasi Anda, kelas App itu sendiri, semua objek perangkat dan jaringan, semua jenis kontainer--dinyatakan sebagai ref class. (Beberapa tipe Windows adalah value class atau value struct). Kelas ref dapat dikonsumsi dari bahasa apa pun. Di C++/CX, masa pakai jenis ini diatur oleh penghitungan referensi otomatis (bukan garbage collection) sehingga Anda tidak pernah secara eksplisit menghapus objek ini. Anda juga dapat membuat kelas ref Anda sendiri.

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();
   };
}

Semua jenis Windows Runtime harus dideklarasikan dalam namespace dan tidak seperti di ISO C++ jenis itu sendiri memiliki pengubah aksesibilitas. Pengubah publik membuat kelas terlihat oleh komponen Windows Runtime di luar namespace. Kata kunci sealed berarti kelas tidak dapat berfungsi sebagai kelas dasar. Hampir semua kelas ref bersifat sealed; pewarisan kelas tidak digunakan secara luas karena JavaScript tidak memahaminya.

ref baru dan ^ (topi)

Anda mendeklarasikan variabel kelas ref dengan menggunakan operator ^ (topi), dan Anda membuat instans objek dengan kata kunci ref new. Setelah itu, akses metode instans objek dengan operator -> sama seperti pointer C++. Metode statis diakses dengan operator :: sama seperti dalam ISO C++.

Dalam kode berikut, kami menggunakan nama berkualifikasi lengkap untuk membuat instans objek, dan menggunakan operator -> untuk memanggil metode instans.

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

bitmapImage->SetSource(fileStream);

Biasanya, dalam file .cpp kami akan menambahkan direktif using namespace Windows::UI::Xaml::Media::Imaging dan kata kunci auto, sehingga kode yang sama akan terlihat seperti ini:

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

Properti

Kelas ref dapat memiliki properti, yang, sama seperti dalam bahasa terkelola, adalah fungsi anggota khusus yang muncul sebagai bidang bagi kode yang menggunakannya.

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);
   }
}

Delegasi

Sama seperti dalam bahasa terkelola, delegasi adalah jenis referensi yang merangkum fungsi dengan signatur tertentu. Mereka paling sering digunakan dengan peristiwa dan penangan peristiwa

// 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);
}

Menambahkan konten ke aplikasi

Mari kita tambahkan beberapa konten ke aplikasi.

Langkah 1: Ubah halaman mulai Anda

  1. Di Penjelajah Solusi, buka MainPage.xaml.

  2. Buat kontrol untuk UI dengan menambahkan XAML berikut ke Root Grid, segera sebelum tag penutupnya. Ini berisi StackPanel yang memiliki TextBlock yang menanyakan nama pengguna, elemen TextBox yang menerima nama pengguna, Button, dan elemen TextBlock lainnya.

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

  3. Pada titik ini, Anda telah membuat aplikasi Universal Windows yang sangat mendasar. Untuk melihat seperti apa aplikasi UWP, tekan F5 untuk build, deploy, dan menjalankan aplikasi dalam mode debug.

Layar pembuka default muncul terlebih dahulu. Ini memiliki gambar—Assets\SplashScreen.scale-100.png—dan warna latar belakang yang ditentukan dalam file manifes aplikasi. Untuk mempelajari cara menyesuaikan layar pembuka, lihat Menambahkan layar pembuka.

Saat splash screen menghilang, aplikasi Anda muncul. Ini menampilkan halaman utama Aplikasi.

Layar aplikasi UWP, dengan kontrol

Aplikasi ini belum bisa melakukan banyak hal—tetapi selamat, Anda telah membangun aplikasi Platform Windows Universal pertama Anda!

Untuk menghentikan penelusuran kesalahan dan menutup aplikasi, kembali ke Visual Studio dan tekan Shift+F5.

Untuk informasi selengkapnya, lihat Menjalankan aplikasi Store dari Visual Studio.

Di aplikasi, Anda dapat mengetik di Kotak Teks, tetapi mengklik Tombol tidak melakukan apa pun. Di langkah selanjutnya, Anda membuat penangan peristiwa untuk peristiwa tombol Klik, yang menampilkan salam yang dipersonalisasi.

Langkah 2: Membuat pengendali event

  1. Di MainPage.xaml, dalam tampilan XAML atau desain, pilih "Say Hello" Button di StackPanel yang Anda tambahkan sebelumnya.

  2. Buka Jendela Properti dengan menekan F4, lalu pilih tombol Kejadian (tombol Kejadian).

  3. Temukan event Klik. Dalam kotak teksnya, ketik nama fungsi yang menangani peristiwa Click. Untuk contoh ini, ketik "Button_Click".

    Jendela Properties, tampilan Event

  4. Tekan Enter. Metode penanganan kejadian dibuat di MainPage.xaml.cpp dan dibuka sehingga Anda dapat menambahkan kode yang dijalankan saat kejadian terjadi.

Pada saat yang sama, di MainPage.xaml, XAML untuk Button diperbarui untuk mendeklarasikan penangan peristiwa Click, seperti ini:

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

Anda juga bisa saja menambahkan ini ke kode xaml secara manual, yang dapat membantu jika Designer tidak dimuat. Jika Anda memasukkan ini secara manual, ketik "Klik" lalu biarkan IntelliSense memunculkan opsi untuk menambahkan penangan peristiwa baru. Dengan begitu, Visual Studio membuat deklarasi dan stub metode yang diperlukan.

Designer gagal dimuat jika terjadi pengecualian yang tidak tertangani selama rendering. Rendering dalam Designer melibatkan menjalankan versi waktu desain halaman. Menonaktifkan eksekusi kode pengguna dapat membantu. Anda bisa melakukan ini dengan mengubah pengaturan dalam kotak dialog Tools, Options. Di bawah XAML Designer, hapus centang Jalankan kode proyek di perancang XAML (jika didukung).

  1. Di MainPage.xaml.cpp, tambahkan kode berikut ke penangan peristiwa Button_Click yang baru saja Anda buat. Kode ini mengambil nama pengguna dari kontrol nameInputTextBox dan menggunakannya untuk membuat salam. greetingOutput TextBlock menampilkan hasilnya.
void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}
  1. Atur proyek sebagai startup, lalu tekan F5 untuk membuat dan menjalankan aplikasi. Saat Anda mengetikkan nama di kotak teks dan mengklik tombol , aplikasi menampilkan salam yang dipersonalisasi.

Layar aplikasi dengan tampilan pesan

Langkah 3: Menata halaman awal

Memilih tema

Sangat mudah untuk menyesuaikan tampilan dan nuansa aplikasi Anda. Secara default, aplikasi Anda menggunakan sumber daya yang memiliki tema terang. Sumber daya sistem juga menyertakan tema terang. Mari kita coba dan lihat seperti apa tampilannya.

Untuk beralih ke tema gelap

  1. Buka App.xaml.

  2. Dalam tag Application pembuka, edit properti RequestedTheme dan atur nilainya menjadi Dark:

    RequestedTheme="Dark"

    Berikut adalah tag Application lengkap dengan tema gelap :

    <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">

  3. Tekan F5 untuk membangun dan menjalankannya. Perhatikan bahwa ia menggunakan tema gelap.

    Layar aplikasi dengan tema gelap

Tema mana yang harus Anda gunakan? Mana saja yang Anda inginkan. Menurut kami: untuk aplikasi yang sebagian besar menampilkan gambar atau video, kami merekomendasikan tema gelap; untuk aplikasi yang berisi banyak teks, kami merekomendasikan tema terang. Jika Anda menggunakan skema warna kustom, gunakan tema yang paling sesuai dengan tampilan dan nuansa aplikasi Anda. Di sisa tutorial ini, kita menggunakan tema Light dalam cuplikan layar.

Catatan Tema diterapkan saat aplikasi dimulai dan tidak dapat diubah saat aplikasi sedang berjalan.

Menggunakan gaya sistem

Saat ini, di aplikasi Windows teksnya sangat kecil dan sulit dibaca. Mari kita perbaiki dengan menerapkan gaya sistem.

Untuk mengubah gaya elemen

  1. Di proyek Windows, buka MainPage.xaml.

  2. Dalam tampilan XAML atau desain, pilih "Apa nama Anda?"TextBlock yang Anda tambahkan sebelumnya.

  3. Di jendela Properti (F4), pilih tombol Properti (Tombol Properti) di kanan atas.

  4. Perluas grup Teks dan atur ukuran font ke 18 px.

  5. Buka grup Lain-lain dan temukan properti Gaya.

  6. Klik penanda properti (kotak hijau di sebelah kanan properti Gaya), lalu, pada menu, pilih System Resource>BaseTextBlockStyle.

    BaseTextBlockStyle adalah sumber daya yang ditentukan dalam ResourceDictionary di <root>\Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

    Jendela Properti, tampilan Properti

    Pada permukaan desain XAML, tampilan teks berubah. Di editor XAML, XAML untuk TextBlock diperbarui:

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

  1. Ulangi proses untuk mengatur ukuran font dan tetapkan BaseTextBlockStyle ke elemen greetingOutputTextBlock.

    Tip Meskipun tidak ada teks dalam TextBlock ini, saat Anda memindahkan penunjuk ke permukaan desain XAML, kerangka biru menunjukkan di mana elemen tersebut berada sehingga Anda dapat memilihnya.  

    XAML Anda sekarang terlihat seperti ini:

<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>
  1. Tekan F5 untuk membuat dan menjalankan aplikasi. Sekarang terlihat seperti ini:

Layar aplikasi dengan teks yang lebih besar

Langkah 4: Sesuaikan UI ke ukuran jendela yang berbeda

Sekarang kita akan membuat UI beradaptasi dengan ukuran layar yang berbeda sehingga terlihat bagus di perangkat seluler. Untuk melakukan ini, Anda menambahkan VisualStateManager dan mengatur properti yang diterapkan untuk status visual yang berbeda.

Untuk menyesuaikan tata letak UI

  1. Di editor XAML, tambahkan blok XAML ini setelah tag pembuka elemen root Grid.
<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>
  1. Debug aplikasi di komputer lokal. Perhatikan bahwa UI terlihat sama seperti sebelumnya kecuali jendela menjadi lebih sempit dari 641 piksel independen perangkat (DIP).
  2. Debug aplikasi di emulator perangkat seluler. Perhatikan bahwa UI menggunakan properti yang Anda tentukan di narrowState dan muncul dengan benar di layar kecil.

Layar aplikasi seluler dengan teks bergaya

Jika Anda telah menggunakan VisualStateManager di versi XAML sebelumnya, Anda mungkin melihat bahwa XAML di sini menggunakan sintaks yang disederhanakan.

VisualState bernama wideState memiliki AdaptiveTrigger dengan properti MinWindowWidth diatur ke 641. Ini berarti bahwa keadaan akan diterapkan hanya ketika lebar jendela tidak kurang dari minimal 641 DIP. Anda tidak menentukan objek Setter apa pun untuk keadaan ini, sehingga menggunakan properti tata letak yang Anda tentukan di XAML untuk konten halaman.

VisualState kedua, narrowState, memiliki AdaptiveTrigger dengan properti MinWindowWidth-nya diatur ke 0. Status ini diterapkan ketika lebar jendela lebih besar dari 0, tetapi kurang dari 641 DIP. (Pada 641 DIP, wideState diterapkan.) Dalam keadaan ini, Anda menentukan beberapa objek Setter untuk mengubah properti tata letak kontrol di UI:

  • Anda mengurangi margin contentPanel kiri elemen dari 120 menjadi 20.
  • Anda mengubah Orientation dari elemen inputPanel dari Horizontal ke Vertical.
  • Anda menambahkan margin atas 4 DIP ke inputButton elemen .

Ringkasan

Selamat, Anda telah menyelesaikan tutorial pertama! Ini mengajarkan cara menambahkan konten ke aplikasi Windows Universal, cara menambahkan interaktivitas kepada mereka, dan cara mengubah penampilan mereka.

Langkah berikutnya

Untuk memindahkan proyek aplikasi Windows Runtime yang lebih lama ke Windows 10 atau Windows 11, mulailah dengan proyek universal Windows baru untuk mendapatkan struktur sistem proyek dan file manifes terbaru, salin file kode Anda ke struktur direktori proyek, tambahkan item ke proyek Anda, dan tulis ulang XAML Anda menggunakan VisualStateManager sesuai dengan panduan dalam topik ini. Untuk informasi selengkapnya, lihat Porting proyek Windows Runtime 8 ke proyek Platform Windows Universal (UWP) dan Porting ke Platform Windows Universal (C++).

Jika Anda memiliki kode C++ yang ingin Anda integrasikan dengan aplikasi UWP, seperti membuat UI UWP baru untuk aplikasi yang sudah ada, lihat Cara: Menggunakan kode C++ yang ada dalam proyek Universal Windows.

  • Terakhir diperbarui pada