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

Topik ini memandu Anda membuat aplikasi Windows Universal Windows Platform (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 Memulai dengan 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 Download.

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 solusi dan proyek Place di 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 file .xaml (markup XAML) memiliki file .idl, .h, dan .cpp yang sesuai. 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 file .h, dan file .cpp (dan terkadang file .idl) untuk menambahkan logika kustom untuk halaman XAML Anda—penangan acara, 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 untuk menginisialisasi aplikasi saat dimulai, dan untuk melakukan pembersihan saat aplikasi 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 Universal Windows Platform (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 harus merupakan 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, tipe Anda bisa merupakan tipe C++ biasa. Secara umum, jenis Windows Runtime dapat digunakan menggunakan bahasa Windows Runtime apa pun.

Salah satu indikasi yang baik bahwa sebuah tipe adalah tipe Windows Runtime adalah bahwa tipe tersebut didefinisikan di dalam Microsoft Interface Definition Language (MIDL) di dalam berkas 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 dari implementasi kelas runtime MainPage, serta fabrik 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 Midl File (.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 isinya. 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 penangan kejadian untuk kejadiannya ButtonBase::Click. Markup untuk Tombol sekarang akan terlihat seperti ini.

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

Terapkan pengendali acara 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 salamOutput blok teks.

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

Nota

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

Gunakan gaya sistem

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

Di MainPage.xaml, cari "Siapa nama Anda?" TextBlock. Atur properti Gaya agar menjadi 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. Nilai-nilai properti yang diatur oleh gaya tersebut adalah sebagai berikut.

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

Selain itu, di MainPage.xaml, Anda dapat menemukan TextBlock bernama greetingOutput. Atur Gaya 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 menjadi lebih kecil dari 641 piksel independen perangkat (DIPs). Pada titik itu, status visual narrowState diterapkan, dan, bersama dengan itu, semua pengatur properti yang ditentukan untuk status tersebut.

VisualState bernama wideState memiliki AdaptiveTrigger dengan properti MinWindowWidth diatur menjadi 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.

keduaVisualState, narrowState, memiliki AdaptiveTrigger dengan properti MinWindowWidth diatur ke 0. Status ini diterapkan ketika lebar jendela lebih besar dari 0, tetapi kurang dari 641 DIP. Tepat pada 641 DIP, wideState mulai 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 menjadi Vertikal.
  • Anda menambahkan margin atas sebesar 4 DIPs ke elemen inputButton.

Ringkasan

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

  • Last updated on