Bagikan melalui

Mulai menggunakan WinUI 2 untuk UWP

WinUI 2.8 adalah versi stabil terbaru dari WinUI yang dapat digunakan untuk membangun aplikasi UWP produksi (dan aplikasi desktop menggunakan Kepulauan XAML).

Pustaka tersedia sebagai paket NuGet yang dapat ditambahkan ke proyek Visual Studio baru atau yang sudah ada.

Nota

Untuk informasi selengkapnya tentang membangun aplikasi desktop Windows dengan versi terbaru WinUI 3, lihat WinUI 3.

Menyiapkan Visual Studio untuk pengembangan UWP

Unduh Visual Studio 2022 dan instal alat untuk pengembangan UWP. Untuk petunjuk selengkapnya, lihat Membuat aplikasi UWP di dokumen Visual Studio.

Pada tab Beban Kerja aplikasi Penginstal Visual Studio, pilih beban kerja dan komponen berikut:

  • Pilih beban kerja pengembangan aplikasi WinUI . Kemudian, di panel Detail penginstalan , di bawah simpul pengembangan aplikasi WinUI , pilih opsi UWP yang Anda butuhkan (ini juga akan memilih komponen tambahan yang diperlukan.):

    • Untuk C#, pilih Alat Universal Windows Platform.
    • Untuk C++, pilih alat Platform Windows Universal C++ (v14x) (pilih versi terbaru kecuali Anda memiliki alasan khusus untuk menggunakan versi yang lebih lama).

Nota

Di Visual Studio 17.10 - 17.12, beban kerja ini disebut pengembangan aplikasi Windows.

Mengunduh dan menginstal WinUI

  1. Buka proyek yang sudah ada, atau buat proyek baru menggunakan templat Aplikasi Kosong di bawah Visual C# > Windows > Universal, atau templat yang sesuai untuk proyeksi bahasa Anda.

    Penting

    Untuk menggunakan WinUI 2.8, Anda harus mengatur TargetPlatformVersion >= 10.0.18362.0 dan TargetPlatformMinVersion >= 10.0.17763.0 di properti proyek.

  2. Di panel Penjelajah Solusi, klik kanan pada nama proyek Anda dan pilih Kelola Paket NuGet.

    Cuplikan layar panel Penjelajah Solusi dengan proyek diklik kanan dan opsi Kelola Paket NuGet disorot.
    Panel Penjelajah Solusi dengan proyek diklik kanan dan opsi Kelola Paket NuGet disorot.

  3. Di Manajer Paket NuGet, pilih tab Telusuri dan cari Microsoft.UI.Xaml atau WinUI. Pilih Paket NuGet WinUI mana yang ingin Anda gunakan (paket Microsoft.UI.Xaml berisi kontrol dan fitur Fasih yang cocok untuk semua aplikasi). Klik Pasang.

    Centang kotak centang "Sertakan prarilis" untuk melihat versi prarilis terbaru yang menyertakan fitur baru eksperimental.

    Cuplikan layar kotak dialog Manajer Paket NuGet memperlihatkan tab Telusuri dengan win u i di bidang pencarian dan Sertakan prarilis dicentang.
    Kotak dialog Manajer Paket NuGet memperlihatkan tab Telusuri dengan winui di bidang pencarian dan Sertakan prarilis dicentang.

  4. Tambahkan Sumber Daya Tema WinUI ke file App.xaml Anda.

    Ada dua cara untuk melakukan ini, tergantung pada apakah Anda memiliki sumber daya aplikasi tambahan.

    sebuah. Jika Anda tidak memerlukan sumber daya aplikasi lain, tambahkan elemen XamlControlsResources sumber daya WinUI seperti yang ditunjukkan dalam contoh berikut:

    <Application
    x:Class="ExampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    RequestedTheme="Light">

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

</Application>

    b. Jika Anda memiliki sumber daya lain, kami sarankan Anda menambahkannya ke XamlControlsResources.MergedDictionaries. Ini bekerja dengan sistem sumber daya platform untuk memungkinkan penggantian sumber daya XamlControlsResources.

    <Application
    x:Class="ExampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    RequestedTheme="Light">

    <Application.Resources>
        <controls:XamlControlsResources>
            <controls:XamlControlsResources.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Styles.xaml"/>
                <!-- Other app resources here -->
            </controls:XamlControlsResources.MergedDictionaries>
        </controls:XamlControlsResources>
    </Application.Resources>

</Application>

  5. Tambahkan referensi paket WinUI ke halaman XAML dan/atau halaman code-behind.

    • Di halaman XAML Anda, tambahkan referensi di bagian atas halaman Anda

      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

    • Dalam kode Anda (jika Anda ingin menggunakan nama jenis tanpa menentukan ruang lingkup), Anda dapat menambahkan perintah using.

      using MUXC = Microsoft.UI.Xaml.Controls;

Langkah tambahan untuk proyek C++/WinRT

Saat Anda menambahkan paket NuGet ke proyek C++/WinRT, alat menghasilkan sekumpulan header proyeksi di folder proyek \Generated Files\winrt Anda. Untuk memasukkan file header tersebut ke dalam proyek Anda, agar referensi ke tipe-tipe baru tersebut dapat teratasi, Anda bisa membuka file header yang telah dikompilasi sebelumnya (biasanya pch.h) dan menyertakannya di sana. Di bawah ini adalah contoh yang menyertakan 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.Primitives.h>
#include <winrt/Microsoft.UI.Xaml.Media.h>
#include <winrt/Microsoft.UI.Xaml.XamlTypeInfo.h>
...

Untuk panduan langkah demi langkah lengkap menambahkan dukungan sederhana untuk WinUI ke proyek C++/WinRT, lihat Contoh C++/WinRT WinUI sederhana.

WinUI di GitHub

Kami menyambut laporan bug di repositori microsoft-ui-xaml di GitHub.

  • Last updated on