Contoh dasar C++/WinRT Pustaka Windows UI 2 (UWP)

Topik ini memandu Anda melalui proses penambahan dukungan dasar untuk Pustaka Windows UI (WinUI) ke proyek C++/WinRT UWP Anda. Secara khusus, topik ini berkaitan dengan WinUI 2, yaitu untuk aplikasi UWP. Untuk aplikasi desktop, ada WinUI 3. Kebetulan, WinUI sendiri ditulis dalam C++/WinRT.

Important

Untuk aplikasi desktop, SDK Aplikasi Windows menyediakan Pustaka Windows UI (WinUI) 3. WinUI 3 tidak dirancang untuk digunakan dengan panduan langkah demi langkah dalam topik ini, yang ditujukan untuk UWP. Lihat juga Migrasi dari UWP ke SDK Aplikasi Windows.

Note

Toolkit Pustaka Windows UI (WinUI) tersedia sebagai paket NuGet yang dapat Anda tambahkan ke proyek yang ada atau baru menggunakan Visual Studio, seperti yang akan kita lihat dalam topik ini. Untuk informasi latar belakang, penyetelan, dan dukungan lainnya, lihat Mulai menggunakan Pustaka Windows UI.

Membuat Aplikasi Kosong (HelloWinUICppWinRT)

Di Visual Studio, buat proyek UWP baru menggunakan templat proyek Blank App (C++/WinRT) (untuk aplikasi desktop WinUI 3, gunakan templat Blank App, Packaged (WinUI 3 in Desktop). Pastikan Anda menggunakan templat (C++/WinRT), dan bukan templat (Universal Windows).

Atur nama proyek baru ke HelloWinUICppWinRT, dan (sehingga struktur folder Anda akan cocok dengan panduan) hapus centang Tempatkan solusi dan proyek di direktori yang sama.

Instal paket NuGet Microsoft.UI.Xaml

Klik Project>Kelola Paket NuGet...>Telusuri, ketik, atau tempel Microsoft. UI. Xaml di kotak pencarian, pilih item di hasil pencarian, lalu klik Instal untuk menginstal paket ke project Anda (Anda juga akan melihat perintah perjanjian lisensi). Pastikan Anda hanya menginstal paket Microsoft.UI.Xaml, dan bukan Microsoft.UI.Xaml.Core.Direct.

Mendeklarasikan sumber daya aplikasi WinUI

Buka App.xaml dan tempel markup berikut antara tag Aplikasi pembuka dan penutup yang ada.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>

Menambahkan kontrol WinUI ke MainPage

Selanjutnya, buka MainPage.xaml. Di tag Halaman pembuka yang sudah ada, ada beberapa deklarasi namespace xml. Tambahkan deklarasi namespace XML xmlns:muxc="using:Microsoft.UI.Xaml.Controls". Kemudian, tempelkan markup berikut antara tag Halaman pembuka dan penutup yang ada, menimpa elemen StackPanel yang ada.

<muxc:NavigationView PaneTitle="Welcome">
    <TextBlock Text="Hello, World!" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
</muxc:NavigationView>

Sunting pch.h sesuai kebutuhan

Saat Anda menambahkan paket NuGet ke proyek C++/WinRT (seperti Microsoft. UI. Paket Xaml, yang Anda tambahkan sebelumnya), dan membangun proyek, alat menghasilkan sekumpulan file header proyeksi di folder proyek \Generated Files\winrt Anda. Jika Anda telah mengikuti panduan, Anda sekarang akan memiliki \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt folder. Untuk menambahkan file header tersebut ke dalam proyek Anda agar referensi ke tipe-tipe baru tersebut dapat dikenali, Anda dapat membuka file header yang telah dikompilasi sebelumnya (biasanya pch.h) dan menyertakannya.

Anda hanya perlu menyertakan header yang sesuai dengan jenis yang Anda gunakan. Namun, berikut adalah contoh yang mencakup semua file header yang dihasilkan untuk paket Microsoft.UI.Xaml.

// pch.h
...
#include "winrt/Microsoft.UI.Xaml.Automation.Peers.h"
#include "winrt/Microsoft.UI.Xaml.Controls.h"
#include "winrt/Microsoft.UI.Xaml.Controls.Primitives.h"
#include "winrt/Microsoft.UI.Xaml.Media.h"
#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
...

Edit MainPage.cpp

Dalam MainPage.cpp, hapus kode di dalam implementasi MainPage::ClickHandler Anda, karena myButton tidak lagi berada di markup XAML.

Anda sekarang dapat membangun dan menjalankan proyek.

Cuplikan layar Pustaka Windows UI C++/WinRT sederhana

  • Last updated on