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 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 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 Tata Letak Jendela Reset Jendela>.
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 visual, maka Anda masih dapat menggunakan perancang yang disertakan dalam 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 jenis sistem operasi Windows dan jenis kustom Anda sendiri.
Anda masih menggunakan debugger Visual Studio, profiler, dan alat pengembangan lainnya.
Anda masih membuat aplikasi yang dikompilasi ke kode komputer asli oleh pengkompilasi Visual C++. Aplikasi UWP di C++/CX tidak dijalankan di lingkungan runtime terkelola.
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 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 menggunakan 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 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 Telepon 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. Jika Anda telah mengembangkan aplikasi untuk Windows 8.1 dan Windows Telepon 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 Platform Windows Universal (UWP) memungkinkan hanya memiliki satu proyek, yang berjalan di semua perangkat, termasuk komputer desktop dan laptop yang menjalankan 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
Di Visual Studio, pada bilah menu, pilih File>Proyek Baru>....
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.
Pilih Berikutnya, lalu masukkan nama untuk proyek. Kami akan menamainya HelloWorld.
Pilih tombol Buat .
Catatan
Jika ini pertama kalinya Anda menggunakan Visual Studio, Anda mungkin melihat dialog Pengaturan yang meminta Anda 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 Mengaktifkan 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.
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 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 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 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 Perancang Manifes, cukup klik dua kali.
- HelloWorld_TemporaryKey.pfx: Kunci yang memungkinkan penyebaran aplikasi di 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 kelas Windows Runtime, yang mencakup semua jenis dalam kontrol Windows API--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. Di C++/CX, masa pakai jenis ini diatur oleh penghitungan referensi otomatis (bukan pengumpulan sampah) 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 layanan dan tidak seperti di ISO C++ jenis itu sendiri memiliki pengubah aksesibilitas. Pengubah publik membuat kelas terlihat oleh komponen Windows 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 -> sama 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);
}
}
Delegasi
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
Di Penjelajah Solusi, buka MainPage.xaml.
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, 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 "Hello""/> </StackPanel> <TextBlock x:Name="greetingOutput"/> </StackPanel>Pada titik ini, Anda telah membuat aplikasi Universal Windows yang sangat mendasar. 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 mengkustomisasi layar percikan, lihat Menambahkan layar percikan.
Saat layar percikan menghilang, aplikasi Anda muncul. Ini menampilkan halaman utama Aplikasi.
Ini belum banyak dilakukan—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 penanganan aktivitas untuk peristiwa Klik tombol, yang menampilkan salam yang dipersonalisasi.
Langkah 2: Membuat penanganan aktivitas
Di MainPage.xaml, dalam tampilan XAML atau desain, pilih Tombol "Say Hello" di StackPanel yang Anda tambahkan sebelumnya.
Buka Jendela Properti dengan menekan F4, lalu pilih tombol Peristiwa (
).Temukan peristiwa Klik. Dalam kotak teksnya, ketik nama fungsi yang menangani peristiwa Klik . Untuk contoh ini, ketik "Button_Click".
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 "Hello"" 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 membuat deklarasi dan stub metode yang diperlukan.
Perancang gagal dimuat jika terjadi pengecualian yang tidak tertangani selama penyajian. Penyajian dalam perancang melibatkan menjalankan versi waktu desain halaman. Sangat berguna untuk menonaktifkan menjalankan kode pengguna. Anda bisa melakukan ini dengan mengubah pengaturan dalam kotak dialog Alat, Opsi . Di bawah XAML Designer, hapus centang Jalankan kode proyek di perancang XAML (jika didukung).
- Di MainPage.xaml.cpp, tambahkan kode berikut ke penanganan aktivitas Button_Click yang baru saja Anda buat. Kode ini mengambil nama pengguna dari
nameInputkontrol 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 + "!";
}
- 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.
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 cahaya. Mari kita coba dan lihat seperti apa tampilannya.
Untuk beralih ke tema gelap
Buka App.xaml.
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">Tekan F5 untuk membangun dan menjalankannya. Perhatikan bahwa ia menggunakan tema gelap.
Tema mana yang harus Anda gunakan? Mana pun 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 cahaya. 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
Di proyek Windows, buka MainPage.xaml.
Dalam tampilan XAML atau desain, pilih "Apa nama Anda?"TextBlock yang Anda tambahkan sebelumnya.
Di jendela Properti (F4), pilih tombol Properti (
) di kanan atas.Perluas grup Teks dan atur ukuran font ke 18 px.
Perluas grup Lain-lain dan temukan properti Gaya.
Klik penanda properti (kotak hijau di sebelah kanan properti Gaya), lalu, pada menu, pilih Basis Sumber Daya>SistemTextBlockStyle.
BaseTextBlockStyle adalah sumber daya yang ditentukan dalam ResourceDictionary di <root>\Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.
Pada permukaan desain XAML, tampilan teks berubah. Di editor XAML, XAML untuk TextBlock diperbarui:
<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
Ulangi proses untuk mengatur ukuran font dan tetapkan BaseTextBlockStyle ke
greetingOutputelemen TextBlock.Tips Meskipun tidak ada teks dalam TextBlock ini, saat Anda memindahkan penunjuk ke permukaan desain XAML, kerangka biru menunjukkan di mana teks 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 "Hello"" Click="Button_Click"/>
</StackPanel>
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>
- Tekan F5 untuk membuat dan menjalankan aplikasi. Sekarang terlihat seperti ini:
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
- 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>
- Debug aplikasi di komputer lokal. Perhatikan bahwa UI terlihat sama seperti sebelumnya kecuali jendela menjadi lebih sempit dari 641 piksel independen perangkat (DIP).
- Debug aplikasi di emulator perangkat seluler. Perhatikan bahwa UI menggunakan properti yang Anda tentukan di
narrowStatedan muncul dengan benar di layar kecil.
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-nyadiatur 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
contentPanelkiri elemen dari 120 menjadi 20. - Anda mengubah Orientasi
inputPanelelemen dari Horizontal ke Vertikal. - Anda menambahkan margin atas 4 DIP ke
inputButtonelemen .
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
Jika Anda memiliki proyek aplikasi Windows Universal yang menargetkan Windows 8.1 dan/atau Windows Telepon 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 Windows Universal 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 regenerasi 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.
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk