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

  • Artikel

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.

Penting

Untuk aplikasi desktop, SDK Aplikasi Windows menyediakan Pustaka UI Windows (WinUI) 3. WinUI 3 tidak dimaksudkan untuk bekerja dengan panduan dalam topik ini, yaitu untuk UWP. Lihat juga Migrasi dari UWP ke SDK Aplikasi Windows.

Catatan

Kotak alat Pustaka UI Windows (WinUI) tersedia sebagai paket NuGet yang dapat Anda tambahkan ke proyek yang sudah 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 UI Windows.

Membuat Aplikasi Kosong (HelloWinUICppWinRT)

Di Visual Studio, buat proyek UWP baru menggunakan templat proyek Aplikasi Kosong (C++/WinRT). 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.

Menginstal paket NuGet Microsoft.UI.Xaml

Klik Kelola Proyek>Paket NuGet...>Telusuri, ketik, atau tempel Microsoft.UI.Xaml di kotak pencarian, pilih item di hasil pencarian, lalu klik Instal untuk menginstal paket ke dalam proyek Anda (Anda juga akan melihat perintah perjanjian lisensi). Berhati-hatilah untuk menginstal hanya 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

Berikutnya, buka MainPage.xaml. Di tag Halaman pembuka yang sudah ada, ada beberapa deklarasi namespace xml. Tambahkan deklarasi xmlns:muxc="using:Microsoft.UI.Xaml.Controls"namespace xml . 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>

Edit pch.h, seperlunya

Saat Anda menambahkan paket NuGet ke proyek C++/WinRT (seperti paket Microsoft.UI.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 membawa file header tersebut ke dalam proyek Anda, sehingga referensi ke jenis baru tersebut diselesaikan, Anda dapat masuk ke file header yang telah dikommpilasikan sebelumnya (biasanya pch.h) dan menyertakannya.

Anda hanya perlu menyertakan header yang sesuai dengan jenis yang Anda gunakan. Tetapi 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.

Simple C++/WinRT Windows UI Library screenshot