Membuat aplikasi "Hello, World!" 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 lebih lanjut 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 memulai

  • Untuk menyelesaikan tutorial ini, Anda harus menggunakan komunitas Visual Studio, atau salah satu versi non-Komunitas Visual Studio, di komputer yang menjalankan Windows. Untuk mengunduh, lihat Mendapatkan 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 Windows pemrograman desktop di C++, maka Anda mungkin akan menemukan bahwa beberapa aspek penulisan aplikasi untuk UWP sudah dikenal, 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 visual, maka Anda masih dapat menggunakan perancang yang terpasang di Microsoft Visual Studio, atau Anda dapat menggunakan Blend yang lebih berperan lengkap untuk Visual Studio. Jika Anda terbiasa mengodekan UI dengan tangan, maka Anda dapat membuat kode tangan XAML Anda.

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

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

  • Anda masih membuat aplikasi yang dikompilasi ke kode mesin asli 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 paling penting. 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 di 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 menggunakan dan membuat objek runtime Windows. 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 mendasar disembunyikan dari kode aplikasi Anda. Untuk informasi selengkapnya, lihat Referensi Bahasa C++/CX.

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

  • Di Microsoft Store dan Windows Phone Simpan aplikasi Anda diverifikasi sebagai aman oleh proses sertifikasi dan dibuat dapat ditemukan oleh jutaan calon pelanggan.

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 universal Windows. Jika Anda telah mengembangkan aplikasi untuk Windows 8.1 dan Windows Phone 8.1 sebelumnya, Anda mungkin ingat bahwa Anda harus memiliki tiga proyek di Visual Studio, satu untuk aplikasi Windows, satu untuk aplikasi telepon, dan yang lain dengan kode bersama. Windows Universal Windows Platform (UWP) memungkinkan hanya memiliki satu proyek, yang berjalan di semua perangkat, termasuk komputer desktop dan laptop yang berjalan Windows, perangkat seperti tablet, ponsel, perangkat VR, dan sebagainya.

Kita akan mulai dengan dasar-dasarnya:

  • Cara membuat proyek Universal Windows di Visual Studio.

  • Cara memahami proyek dan file yang dibuat.

  • Cara memahami ekstensi di ekstensi komponen Visual C++ (C++/CX), dan kapan menggunakannya.

Pertama, buat solusi di Visual Studio

  1. Di Visual Studio, pada bilah menu, pilih FileBaru>>Project....

  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 Menyiapkan untuk informasi selengkapnya.

C++/CX project templates in the Create a new project dialog box

  1. Pilih Berikutnya, 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 Toko. Untuk informasi lebih lanjut, silakan baca Mengaktifkan perangkat Anda untuk pengembangan. Untuk melanjutkan panduan ini, pilih Mode pengembang, klik Ya, dan tutup dialog.

File proyek Anda dibuat.

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

Universal app solution with nodes collapsed

Tentang file proyek

Setiap file .xaml dalam folder proyek memiliki file .xaml.h dan file .xaml.cpp yang sesuai di folder yang sama dan file .g dan file .g.hpp di folder Generated Files, 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 penanganan aktivitas. 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 kode-di belakang. 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 Anda akses dari halaman mana pun. File code-behind berisi handler untuk peristiwa OnLaunched dan OnSuspending . Biasanya, Anda menambahkan kode kustom di sini untuk menginisialisasi aplikasi Anda 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 "mulai" 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, serta 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 pada komputer ini, dari Visual Studio.

Pertama-tama lihat kode

Jika Anda memeriksa kode di App.xaml.h, App.xaml.cpp dalam proyek bersama, Anda akan melihat bahwa sebagian besar 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 Ref

Hampir semua Windows kelas Runtime, yang mencakup semua jenis dalam kontrol API Windows--XAML, halaman di aplikasi Anda, kelas Aplikasi itu sendiri, semua objek perangkat dan jaringan, semua jenis kontainer--dinyatakan sebagai kelas ref. (Beberapa jenis Windows adalah kelas nilai atau struktur nilai). Kelas ref dapat dikonsumsi dari bahasa apa pun. Dalam C++/CX, masa pakai jenis ini diatur oleh penghitungan referensi otomatis (bukan pengumpulan sampah) sehingga Anda tidak pernah menghapus objek ini secara eksplisit. 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 layanan dan tidak seperti di ISO C++ jenis itu sendiri memiliki pengubah aksesibilitas. Pengubah publik membuat kelas terlihat oleh Windows komponen Runtime di luar namespace layanan. Kata kunci yang disegel berarti kelas tidak dapat berfungsi sebagai kelas dasar. Hampir semua kelas ref disegel; 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 baru ref. Setelah itu Anda mengakses metode instans objek dengan operator -> seperti pointer C++. Metode statis diakses dengan operator :: sama seperti dalam ISO C++.

Dalam kode berikut, kami menggunakan nama yang sepenuhnya memenuhi syarat 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 using namespace Windows::UI::Xaml::Media::Imaging direktif dan kata kunci otomatis, 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 untuk menggunakan kode.

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

Delegasikan

Sama seperti dalam bahasa terkelola, delegasi adalah jenis referensi yang merangkum fungsi dengan tanda tangan tertentu. Mereka paling sering digunakan dengan peristiwa dan penanganan aktivitas

// 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 Grid akar, segera sebelum tag penutupnya. Ini berisi StackPanel yang memiliki TextBlock yang meminta nama pengguna, elemen TextBox yang menerima nama pengguna, Tombol, 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 dasar. Untuk melihat seperti apa aplikasi UWP, tekan F5 untuk membangun, menyebarkan, dan menjalankan aplikasi dalam mode penelusuran kesalahan.

Layar percikan 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 splash, lihat Menambahkan layar splash.

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

UWP app screen, with controls

Ini tidak melakukan banyak — namun — tetapi selamat, Anda telah membangun aplikasi Universal Windows Platform 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 TextBox, tetapi mengklik Tombol tidak melakukan apa pun. Di langkah selanjutnya, Anda membuat penanganan aktivitas untuk acara Klik tombol, yang menampilkan salam yang dipersonalisasi.

Langkah 2: Membuat penanganan aktivitas

  1. Di MainPage.xaml, dalam tampilan XAML atau desain, pilih Tombol "Ucapkan Halo" di StackPanel yang Anda tambahkan sebelumnya.

  2. Buka Jendela Properti dengan menekan F4, lalu pilih tombol Peristiwa (Events button).

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

    Properties window, Events view

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

Pada saat yang sama, di MainPage.xaml, XAML untuk Tombol diperbarui untuk mendeklarasikan penanganan aktivitas Klik , 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 perancang tidak memuat. Jika Anda memasukkan ini secara manual, ketik "Klik" lalu biarkan IntelliSense memunculkan opsi untuk menambahkan penanganan aktivitas baru. Dengan begitu, Visual Studio menciptakan deklarasi metode dan stub yang diperlukan.

Perancang gagal memuat jika terjadi pengecualian yang tidak tertangani selama penyajian. Penyajian dalam perancang melibatkan menjalankan versi waktu desain halaman. Sangat membantu untuk menonaktifkan menjalankan kode pengguna. Anda dapat melakukan ini dengan mengubah pengaturan dalam kotak dialog Alat, Opsi . Di bawah XAML Designer, hapus centang Jalankan kode proyek di perancang XAML (jika didukung).

  1. Di MainPage.xaml.cpp, tambahkan kode berikut ke penanganan aktivitas Button_Click yang baru saja Anda buat. Kode ini mengambil nama pengguna dari nameInput kontrol TextBox dan menggunakannya untuk membuat salam. greetingOutputTextBlock 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 mengetik nama di kotak teks dan mengklik tombol, aplikasi menampilkan salam yang dipersonalisasi.

App screen with message display

Langkah 3: Menata halaman mulai

Memilih tema

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

Untuk beralih ke tema gelap

  1. Buka App.xaml.

  2. Di tag Aplikasi pembuka, edit properti RequestedTheme dan atur nilainya ke Gelap:

    RequestedTheme="Dark"
    

    Berikut adalah tag Aplikasi 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.

    App screen with dark theme

Tema mana yang harus Anda gunakan? Apapun yang anda inginkan. Berikut adalah pengambilan kami: untuk aplikasi yang sebagian besar menampilkan gambar atau video, kami merekomendasikan tema gelap; untuk aplikasi yang berisi banyak teks, kami merekomendasikan tema ringan. Jika Anda menggunakan skema warna kustom, gunakan tema yang paling sesuai dengan tampilan dan nuansa aplikasi Anda. Di sisa tutorial ini, kita menggunakan tema Cahaya 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. Dalam 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 (Properties button) di kanan atas.

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

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

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

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

    Properties window, Properties view

    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 greetingOutput elemen TextBlock.

    Tips Meskipun tidak ada teks dalam TextBlock ini, ketika Anda memindahkan penunjuk ke permukaan desain XAML, kerangka biru menunjukkan di mana teks 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:

App screen with larger text

Langkah 4: Sesuaikan UI dengan 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 Grid akar.
<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.

Mobile app screen with styled text

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-nya diatur ke 641. Ini berarti bahwa status akan diterapkan hanya ketika lebar jendela tidak kurang dari minimal 641 DIP. Anda tidak menentukan objek Setter apa pun untuk status 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 status 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 OrientasiinputPanel elemen dari Horizontal ke Vertikal.
  • Anda menambahkan margin atas 4 DIP ke inputButton elemen .

Ringkasan

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

Langkah berikutnya

Jika Anda memiliki proyek aplikasi Universal Windows yang menargetkan Windows 8.1 dan/atau Windows Phone 8.1, Anda dapat memindahkannya ke Windows 10 atau Windows 11. Tidak ada proses otomatis untuk ini, tetapi Anda dapat melakukannya secara manual. Mulailah dengan proyek Universal Windows baru untuk mendapatkan struktur sistem proyek terbaru dan file manifes, salin file kode Anda ke dalam 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 Memindahkan proyek Windows Runtime 8 ke proyek Universal Windows Platform (UWP) dan Porting ke Universal Windows Platform (C++).

Jika Anda memiliki kode C++ yang sudah ada 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.