Buat "Halo, Dunia!" Aplikasi UWP menggunakan C++/WinRT

Artikel
08/25/2023

Topik ini memandu Anda membuat aplikasi Windows Platform Windows Universal (UWP) "Hello, World!" menggunakan C++/WinRT. Antarmuka pengguna (UI) aplikasi didefinisikan menggunakan Extensible Application Markup Language (XAML).

C++/WinRT adalah proyeksi bahasa C++17 modern yang sepenuhnya standar untuk API Windows Runtime (WinRT). Untuk informasi selengkapnya, dan panduan dan contoh kode lainnya, lihat dokumentasi C++/WinRT . Topik yang baik untuk dimulai adalah Mulai menggunakan C++/WinRT.

Menyiapkan Visual Studio untuk C++/WinRT

Untuk informasi tentang menyiapkan Visual Studio untuk pengembangan C++/WinRT—termasuk menginstal dan menggunakan C++/WinRT Visual Studio Extension (VSIX) dan paket NuGet (yang bersama-sama menyediakan templat proyek dan dukungan build)—lihat Dukungan Visual Studio untuk C++/WinRT.

Untuk mengunduh Visual Studio, lihat Unduhan.

Untuk pengenalan XAML, lihat Gambaran umum XAML

Membuat Aplikasi Kosong (HelloWorldCppWinRT)

Aplikasi pertama kami adalah aplikasi "Hello, World!" yang menunjukkan beberapa fitur dasar interaktivitas, tata letak, dan gaya.

Mulailah dengan membuat proyek baru di Microsoft Visual Studio. Buat proyek Aplikasi Kosong (C++/WinRT), dan beri nama HelloWorldCppWinRT. Pastikan bahwa Tempatkan solusi dan proyek dalam direktori yang sama tidak dicentang. Targetkan versi terbaru yang tersedia secara umum (yaitu, bukan pratinjau) dari Windows SDK.

Di bagian selanjutnya dari topik ini, Anda akan diarahkan untuk membangun proyek Anda (tetapi jangan membangun sampai saat itu).

Tentang file proyek

Biasanya, di folder proyek, setiap .xaml file (markup XAML) memiliki file , , .hdan .cpp yang .idlsesuai. Bersama-sama, file-file tersebut dikompilasi ke dalam jenis halaman XAML.

Anda dapat memodifikasi file markup XAML untuk membuat elemen UI, dan Anda dapat mengikat elemen tersebut ke sumber data (tugas yang dikenal sebagai pengikatan data). Anda mengubah .hfile , dan .cpp (dan terkadang .idl file) untuk menambahkan logika kustom untuk halaman XAML Anda—penanganan aktivitas, misalnya.

Mari kita lihat beberapa file proyek.

App.idl, App.xaml, App.h, dan App.cpp. File-file ini mewakili spesialisasi aplikasi Anda dari kelas Windows::UI::Xaml::Application , yang mencakup titik masuk aplikasi Anda. App.xaml tidak berisi markup khusus halaman, tetapi Anda dapat menambahkan gaya elemen antarmuka pengguna di sana, serta elemen lain yang ingin Anda akses dari semua halaman. File .h dan .cpp berisi handler untuk berbagai peristiwa siklus hidup aplikasi. Biasanya, Anda menambahkan kode kustom di sana untuk menginisialisasi aplikasi saat dimulai, dan untuk melakukan pembersihan saat ditangguhkan atau dihentikan.
MainPage.idl, MainPage.xaml, MainPage.h, dan MainPage.cpp. Berisi markup XAML, dan implementasi, untuk jenis halaman utama (startup) default dalam aplikasi, yang merupakan kelas runtime MainPage . MainPage tidak memiliki dukungan navigasi, tetapi menyediakan beberapa UI default, dan penanganan aktivitas, untuk membantu Anda memulai.
pch.h dan pch.cpp. File-file ini mewakili file header proyek Anda yang telah dikomproyeksikan sebelumnya. Dalam pch.h, sertakan file header apa pun yang tidak sering berubah, lalu sertakan pch.h dalam file lain dalam proyek.

Pertama-tama lihat kode

Kelas runtime

Seperti yang Anda ketahui, semua kelas dalam aplikasi Platform Windows Universal (UWP) yang ditulis dalam C# adalah jenis Windows Runtime. Tetapi ketika Anda menulis jenis dalam aplikasi C++/WinRT, Anda dapat memilih apakah jenis tersebut adalah jenis Windows Runtime, atau kelas/struktur/enumerasi C++ biasa.

Jenis halaman XAML apa pun dalam proyek Anda harus merupakan jenis Windows Runtime. Jadi MainPage adalah jenis Windows Runtime. Secara khusus, ini adalah kelas runtime. Jenis apa pun yang digunakan oleh halaman XAML juga perlu menjadi jenis Windows Runtime. Saat Anda menulis komponen Windows Runtime, dan Anda ingin menulis jenis yang dapat digunakan dari aplikasi lain, maka Anda akan menulis jenis Windows Runtime. Dalam kasus lain, jenis Anda bisa menjadi jenis C++ biasa. Secara umum, jenis Windows Runtime dapat digunakan menggunakan bahasa Windows Runtime apa pun.

Salah satu indikasi yang baik bahwa jenis adalah jenis Windows Runtime adalah bahwa jenis tersebut didefinisikan dalam Microsoft Interface Definition Language (MIDL) di dalam file Bahasa Definisi Antarmuka (.idl). Mari kita ambil MainPage sebagai contoh.

// MainPage.idl
namespace HelloWorldCppWinRT
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Int32 MyProperty;
    }
}

Dan berikut adalah struktur dasar implementasi kelas runtime MainPage , dan pabrik aktivasinya, seperti yang terlihat di MainPage.h.

// MainPage.h
...
namespace winrt::HelloWorldCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        int32_t MyProperty();
        void MyProperty(int32_t value);
        ...
    };
}

namespace winrt::HelloWorldCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

Untuk detail selengkapnya tentang apakah Anda harus menulis kelas runtime untuk jenis tertentu atau tidak, lihat topik API Penulis dengan C++/WinRT. Dan untuk informasi selengkapnya tentang koneksi antara kelas runtime dan IDL (.idl file), Anda dapat membaca dan mengikuti bersama dengan topik kontrol XAML; mengikat ke properti C++/WinRT. Topik itu menjelaskan proses penulisan kelas runtime baru, langkah pertama adalah menambahkan item File Midl (.idl) baru ke proyek.

Sekarang mari kita tambahkan beberapa fungsionalitas ke proyek HelloWorldCppWinRT .

Langkah 1. Mengubah halaman startup Anda

Di Penjelajah Solusi, buka MainPage.xaml sehingga Anda dapat menulis kontrol yang membentuk antarmuka pengguna (UI).

Hapus StackPanel yang sudah ada di sana, serta kontennya. Di tempatnya, tempelkan XAML berikut.

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

StackPanel baru ini memiliki TextBlock yang meminta nama pengguna, TextBox yang menerima nama pengguna, Tombol, dan elemen TextBlock lainnya.

Karena kita menghapus Tombol bernama myButton, kita harus menghapus referensi ke dalamnya dari kode. Jadi, dalam MainPage.cpp, hapus baris kode di dalam fungsi MainPage::ClickHandler .

Pada titik ini, Anda telah membuat aplikasi Universal Windows yang sangat mendasar. Untuk melihat seperti apa aplikasi UWP, buat dan jalankan aplikasi.

Layar aplikasi UWP, dengan kontrol

Di aplikasi, Anda dapat mengetik ke dalam kotak teks. Tetapi mengklik tombol belum melakukan apa pun.

Langkah 2. Menambahkan penanganan aktivitas

Di MainPage.xaml, temukan Tombol bernama inputButton, dan deklarasikan penanganan aktivitas untuk peristiwa ButtonBase::Click-nya. Markup untuk Tombol sekarang akan terlihat seperti ini.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="inputButton_Click"/>

Terapkan penanganan aktivitas seperti ini.

// MainPage.h
struct MainPage : MainPageT<MainPage>
{
    ...
    void inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
};

// MainPage.cpp
namespace winrt::HelloWorldCppWinRT::implementation
{
    ...
    void MainPage::inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        greetingOutput().Text(L"Hello, " + nameInput().Text() + L"!");
    }
}

Untuk informasi selengkapnya, lihat Menangani peristiwa dengan menggunakan delegasi.

Implementasi mengambil nama pengguna dari kotak teks, menggunakannya untuk membuat salam, dan menampilkannya di blok teks greetingOutput .

Buat dan jalankan aplikasi. Ketik nama Anda di kotak teks, dan klik tombol . Aplikasi ini menampilkan salam yang dipersonalisasi.

Layar aplikasi dengan tampilan pesan

Langkah 3. Gaya halaman startup

Pilih tema

Sangat mudah untuk menyesuaikan tampilan dan nuansa aplikasi Anda. Secara default, aplikasi Anda menggunakan sumber daya yang memiliki gaya berwarna terang. Sumber daya sistem juga menyertakan tema gelap.

Untuk mencoba tema gelap, edit App.xaml, dan tambahkan nilai untuk Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Untuk aplikasi yang menampilkan sebagian besar 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.

Catatan

Tema diterapkan saat aplikasi Anda dimulai. Ini tidak dapat diubah saat aplikasi sedang berjalan.

Menggunakan gaya sistem

Di bagian ini kita akan mengubah tampilan teks (misalnya, membuat ukuran font lebih besar).

Di MainPage.xaml, temukan "Siapa nama Anda?" TextBlock. Atur properti Gayanya ke referensi ke kunci sumber daya sistem BaseTextBlockStyle.

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

BaseTextBlockStyle adalah kunci sumber daya yang ditentukan dalam ResourceDictionary di \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml. Berikut adalah nilai properti yang diatur oleh gaya tersebut.

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineStackingStrategy" Value="MaxHeight" />
    <Setter Property="TextLineBounds" Value="Full" />
</Style>

Juga di MainPage.xaml, temukan TextBlock bernama greetingOutput. Atur Gayanya ke BaseTextBlockStyle juga. Jika Anda membuat dan menjalankan aplikasi sekarang, Anda akan melihat bahwa tampilan kedua blok teks telah berubah (misalnya, ukuran font sekarang lebih besar).

Langkah 4. Memiliki antarmuka pengguna yang beradaptasi dengan ukuran jendela yang berbeda

Sekarang kita akan menyebabkan UI beradaptasi secara dinamis dengan ukuran jendela yang berubah, dan sehingga terlihat bagus pada perangkat dengan layar kecil. Untuk melakukan ini, Anda akan menambahkan bagian VisualStateManager ke dalam MainPage.xaml. Anda akan menentukan status visual yang berbeda untuk ukuran jendela yang berbeda, lalu mengatur properti untuk diterapkan untuk masing-masing status visual tersebut.

Menyesuaikan tata letak UI

Tambahkan blok XAML ini sebagai elemen turunan pertama dari elemen StackPanel akar.

<StackPanel ...>
    <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>
    ...
</StackPanel>

Buat dan jalankan aplikasi. Perhatikan bahwa UI terlihat sama seperti sebelumnya hingga jendela diubah ukurannya lebih sempit dari 641 piksel independen perangkat (DIP). Pada titik itu , status visual narrowState diterapkan dan, bersama dengan itu, semua setter properti yang ditentukan untuk status tersebut.

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. Tepat 641 DIP, wideState berlaku. Di narrowState, Anda menentukan objek Setter untuk mengubah properti tata letak kontrol di UI.

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

Ringkasan

Panduan ini menunjukkan kepada Anda cara menambahkan konten ke aplikasi Windows Universal, cara menambahkan interaktivitas, dan cara mengubah tampilan UI.

Bagikan melalui