Perluas aplikasi desktop Anda dengan komponen UWP modern
Beberapa pengalaman Windows (Misalnya, halaman UI yang mendukung sentuhan) harus berjalan di dalam AppContainer. Jika Anda ingin menambahkan pengalaman tersebut, perluas aplikasi desktop Anda dengan proyek UWP dan komponen Windows Runtime.
Dalam banyak kasus, Anda dapat memanggil WINDOWS Runtime API langsung dari aplikasi desktop Anda, jadi sebelum Anda meninjau panduan ini, lihat Meningkatkan untuk Windows.
Catatan
Fitur yang dijelaskan dalam topik ini mengharuskan aplikasi Anda dipaketkan (memiliki identitas paket saat runtime). Itu termasuk aplikasi paket (lihat Membuat proyek baru untuk aplikasi desktop WinUI 3 paket) dan aplikasi paket dengan lokasi eksternal (lihat Memberikan identitas paket dengan pengemasan dengan lokasi eksternal). Lihat juga Fitur yang memerlukan identitas paket.
Pertama, siapkan solusi Anda
Tambahkan satu atau beberapa proyek UWP dan komponen runtime ke solusi Anda.
Mulailah dengan solusi yang berisi Proyek Pengemasan Aplikasi Windows dengan referensi ke aplikasi desktop Anda.
Gambar ini menunjukkan contoh solusi.
Jika solusi Anda tidak berisi proyek pengemasan, lihat Mengemas aplikasi desktop Anda dengan menggunakan Visual Studio.
Mengonfigurasi aplikasi desktop
Pastikan aplikasi desktop Anda memiliki referensi ke file yang Anda butuhkan untuk memanggil WINDOWS Runtime API.
Untuk melakukan ini, lihat Memanggil WINDOWS Runtime API di aplikasi desktop.
Menambahkan proyek UWP
Tambahkan Aplikasi Kosong (Universal Windows) ke solusi Anda.
Di sinilah Anda akan membangun UI XAML modern atau menggunakan API yang hanya berjalan dalam proses UWP.
Dalam proyek kemasan Anda, klik kanan simpul Aplikasi , lalu klik Tambahkan Referensi.
Kemudian, tambahkan referensi proyek UWP.
Solusi Anda akan terlihat seperti ini:
(Opsional) Menambahkan komponen Windows Runtime
Untuk menyelesaikan beberapa skenario, Anda harus menambahkan kode ke komponen Windows Runtime.
Kemudian, dari proyek UWP Anda, tambahkan referensi ke komponen runtime. Solusi Anda akan terlihat seperti ini:
Membangun solusi
Bangun solusi Anda untuk memastikan bahwa tidak ada kesalahan yang muncul. Jika Anda menerima kesalahan, buka Configuration Manager dan pastikan proyek Anda menargetkan platform yang sama.
Mari kita lihat beberapa hal yang dapat Anda lakukan dengan proyek UWP dan komponen runtime Anda.
Menampilkan UI XAML modern
Sebagai bagian dari alur aplikasi, Anda dapat menggabungkan antarmuka pengguna berbasis XAML modern ke dalam aplikasi desktop Anda. Antarmuka pengguna ini secara alami adaptif terhadap ukuran dan resolusi layar yang berbeda dan mendukung model interaktif modern seperti sentuhan dan tinta.
Misalnya, dengan sejumlah kecil markup XAML, Anda dapat memberi pengguna fitur visualisasi terkait peta yang kuat.
Gambar ini menunjukkan aplikasi Formulir Windows yang membuka UI modern berbasis XAML yang berisi kontrol peta.
Catatan
Contoh ini menunjukkan UI XAML dengan menambahkan proyek UWP ke solusi. Itu adalah pendekatan yang didukung stabil untuk menampilkan UI XAML dalam aplikasi desktop. Alternatif dari pendekatan ini adalah menambahkan kontrol UWP XAML langsung ke aplikasi desktop Anda dengan menggunakan Pulau XAML. Kepulauan XAML saat ini tersedia sebagai pratinjau pengembang. Meskipun kami mendorong Anda untuk mencobanya dalam kode prototipe Anda sendiri sekarang, kami tidak menyarankan Anda menggunakannya dalam kode produksi saat ini. API dan kontrol ini akan terus matang dan stabil dalam rilis Windows mendatang. Untuk mempelajari selengkapnya tentang Kepulauan XAML, lihat kontrol UWP di aplikasi desktop
Pola desain
Untuk menampilkan UI berbasis XAML, lakukan hal-hal berikut:
2️⃣ Membuat UI XAML
3️⃣ Menambahkan ekstensi protokol ke proyek UWP
4️⃣ Mulai aplikasi UWP dari aplikasi desktop Anda
5️⃣ Dalam proyek UWP, perlihatkan halaman yang Anda inginkan
Menyiapkan solusi Anda
Untuk panduan umum tentang cara menyiapkan solusi Anda, lihat bagian Pertama, siapkan solusi Anda di awal panduan ini.
Solusi Anda akan terlihat seperti ini:
Dalam contoh ini, proyek Formulir Windows diberi nama Landmark dan proyek UWP yang berisi UI XAML bernama MapUI.
Membuat UI XAML
Tambahkan UI XAML ke proyek UWP Anda. Berikut adalah XAML untuk peta dasar.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12,20,12,14">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<maps:MapControl x:Name="myMap" Grid.Column="0" Width="500" Height="500"
ZoomLevel="{Binding ElementName=zoomSlider,Path=Value, Mode=TwoWay}"
Heading="{Binding ElementName=headingSlider,Path=Value, Mode=TwoWay}"
DesiredPitch="{Binding ElementName=desiredPitchSlider,Path=Value, Mode=TwoWay}"
HorizontalAlignment="Left"
MapServiceToken="<Your Key Goes Here" />
<Grid Grid.Column="1" Margin="12">
<StackPanel>
<Slider Minimum="1" Maximum="20" Header="ZoomLevel" Name="zoomSlider" Value="17.5"/>
<Slider Minimum="0" Maximum="360" Header="Heading" Name="headingSlider" Value="0"/>
<Slider Minimum="0" Maximum="64" Header=" DesiredPitch" Name="desiredPitchSlider" Value="32"/>
</StackPanel>
</Grid>
</Grid>
Menambahkan ekstensi protokol
Di Penjelajah Solusi, buka file package.appxmanifest dari proyek Packaging dalam solusi Anda, dan tambahkan ekstensi ini.
<Extensions>
<uap:Extension Category="windows.protocol" Executable="MapUI.exe" EntryPoint="MapUI.App">
<uap:Protocol Name="xamluidemo" />
</uap:Extension>
</Extensions>
Beri nama protokol, berikan nama executable yang dihasilkan oleh proyek UWP, dan nama kelas titik masuk.
Anda juga dapat membuka package.appxmanifest di perancang, memilih tab Deklarasi , lalu menambahkan ekstensi di sana.
Catatan
Kontrol peta mengunduh data dari internet jadi jika Anda menggunakannya, Anda juga harus menambahkan kemampuan "klien internet" ke manifes Anda.
Memulai aplikasi UWP
Pertama, dari aplikasi desktop Anda, buat Uri yang menyertakan nama protokol dan parameter apa pun yang ingin Anda teruskan ke aplikasi UWP. Kemudian, panggil metode LaunchUriAsync .
private void Statue_Of_Liberty_Click(object sender, EventArgs e)
{
ShowMap(40.689247, -74.044502);
}
private async void ShowMap(double lat, double lon)
{
string str = "xamluidemo://";
Uri uri = new Uri(str + "location?lat=" +
lat.ToString() + "&?lon=" + lon.ToString());
var success = await Windows.System.Launcher.LaunchUriAsync(uri);
}
Mengurai parameter dan menampilkan halaman
Di kelas Aplikasi proyek UWP Anda, ambil alih penanganan aktivitas Aktif. Jika aplikasi diaktifkan oleh protokol Anda, uraikan parameter lalu buka halaman yang Anda inginkan.
protected override void OnActivated(Windows.ApplicationModel.Activation.IActivatedEventArgs e)
{
if (e.Kind == ActivationKind.Protocol)
{
ProtocolActivatedEventArgs protocolArgs = (ProtocolActivatedEventArgs)e;
Uri uri = protocolArgs.Uri;
if (uri.Scheme == "xamluidemo")
{
Frame rootFrame = new Frame();
Window.Current.Content = rootFrame;
rootFrame.Navigate(typeof(MainPage), uri.Query);
Window.Current.Activate();
}
}
}
Di kode di belakang halaman XAML Anda, ambil alih OnNavigatedTo metode untuk menggunakan parameter yang diteruskan ke halaman. Dalam hal ini, kita akan menggunakan garis lintang dan bujur yang diteruskan ke halaman ini untuk menampilkan lokasi di peta.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.Parameter != null)
{
WwwFormUrlDecoder decoder = new WwwFormUrlDecoder(e.Parameter.ToString());
double lat = Convert.ToDouble(decoder[0].Value);
double lon = Convert.ToDouble(decoder[1].Value);
BasicGeoposition pos = new BasicGeoposition();
pos.Latitude = lat;
pos.Longitude = lon;
myMap.Center = new Geopoint(pos);
myMap.Style = MapStyle.Aerial3D;
}
base.OnNavigatedTo(e);
}
Menjadikan aplikasi desktop Anda sebagai target berbagi
Anda dapat menjadikan aplikasi desktop Anda sebagai target berbagi sehingga pengguna dapat dengan mudah berbagi data seperti gambar dari aplikasi lain yang mendukung berbagi.
Misalnya, pengguna dapat memilih aplikasi Anda untuk berbagi gambar dari Microsoft Edge, aplikasi Foto. Berikut adalah aplikasi sampel WPF yang memiliki kemampuan tersebut.
.
Lihat sampel lengkapnya di sini
Pola desain
Untuk menjadikan aplikasi Anda target berbagi, lakukan hal-hal berikut:
1️⃣ Menambahkan ekstensi target berbagi
2️⃣ Mengambil alih penanganan aktivitas OnShareTargetActivated
3️⃣ Menambahkan ekstensi desktop ke proyek UWP
4️⃣ Tambahkan ekstensi proses kepercayaan penuh
5️⃣ Ubah aplikasi desktop untuk mendapatkan file bersama
Langkah-langkah berikut
Menambahkan ekstensi target berbagi
Di Penjelajah Solusi, buka file package.appxmanifest dari proyek Packaging dalam solusi Anda dan tambahkan ekstensi target berbagi.
<Extensions>
<uap:Extension
Category="windows.shareTarget"
Executable="ShareTarget.exe"
EntryPoint="App">
<uap:ShareTarget>
<uap:SupportedFileTypes>
<uap:SupportsAnyFileType />
</uap:SupportedFileTypes>
<uap:DataFormat>Bitmap</uap:DataFormat>
</uap:ShareTarget>
</uap:Extension>
</Extensions>
Berikan nama executable yang dihasilkan oleh proyek UWP, dan nama kelas titik masuk. Markup ini mengasumsikan bahwa nama yang dapat dieksekusi untuk aplikasi UWP Anda adalah ShareTarget.exe.
Anda juga harus menentukan jenis file apa yang dapat dibagikan dengan aplikasi Anda. Dalam contoh ini, kami menjadikan aplikasi desktop WPF PhotoStoreDemo sebagai target berbagi untuk gambar bitmap sehingga kami menentukan Bitmap untuk jenis file yang didukung.
Mengambil alih penanganan aktivitas OnShareTargetActivated
Ambil alih penanganan aktivitas OnShareTargetActivated di kelas Aplikasi proyek UWP Anda.
Penanganan aktivitas ini dipanggil saat pengguna memilih aplikasi Anda untuk berbagi file mereka.
protected override void OnShareTargetActivated(ShareTargetActivatedEventArgs args)
{
shareWithDesktopApplication(args.ShareOperation);
}
private async void shareWithDesktopApplication(ShareOperation shareOperation)
{
if (shareOperation.Data.Contains(StandardDataFormats.StorageItems))
{
var items = await shareOperation.Data.GetStorageItemsAsync();
StorageFile file = items[0] as StorageFile;
IRandomAccessStreamWithContentType stream = await file.OpenReadAsync();
await file.CopyAsync(ApplicationData.Current.LocalFolder);
shareOperation.ReportCompleted();
await FullTrustProcessLauncher.LaunchFullTrustProcessForCurrentAppAsync();
}
}
Dalam kode ini, kami menyimpan gambar yang sedang dibagikan oleh pengguna ke dalam folder penyimpanan lokal aplikasi. Nantinya, kita akan memodifikasi aplikasi desktop untuk menarik gambar dari folder yang sama. Aplikasi desktop dapat melakukannya karena disertakan dalam paket yang sama dengan aplikasi UWP.
Menambahkan ekstensi desktop ke proyek UWP
Tambahkan Ekstensi Desktop Windows untuk ekstensi UWP ke proyek aplikasi UWP. Anda akan melihat lebih dari satu versi ekstensi (misalnya, 10.0.18362.0 dan 10.0.19041.0). Untuk informasi tentang cara memilih versi, lihat SDK Ekstensi, dan cara mereferensikannya.
Menambahkan ekstensi proses kepercayaan penuh
Di Penjelajah Solusi, buka file package.appxmanifest dari proyek Packaging dalam solusi Anda, lalu tambahkan ekstensi proses kepercayaan penuh di samping ekstensi target berbagi yang Anda tambahkan file ini sebelumnya.
<Extensions>
...
<desktop:Extension Category="windows.fullTrustProcess" Executable="PhotoStoreDemo\PhotoStoreDemo.exe" />
...
</Extensions>
Ekstensi ini akan mengaktifkan aplikasi UWP untuk memulai aplikasi desktop tempat Anda ingin berbagi file. Misalnya, kami merujuk ke aplikasi desktop WPF PhotoStoreDemo yang dapat dieksekusi.
Ubah aplikasi desktop untuk mendapatkan file bersama
Ubah aplikasi desktop Anda untuk menemukan dan memproses file bersama. Dalam contoh ini, aplikasi UWP menyimpan file bersama di folder data aplikasi lokal. Oleh karena itu, kami akan memodifikasi aplikasi desktop WPF PhotoStoreDemo untuk menarik foto dari folder tersebut.
Photos.Path = Windows.Storage.ApplicationData.Current.LocalFolder.Path;
Untuk instans aplikasi desktop yang sudah dibuka oleh pengguna, kami mungkin juga menangani peristiwa FileSystemWatcher dan meneruskan jalur ke lokasi file. Dengan begitu setiap instans terbuka aplikasi desktop akan menampilkan foto bersama.
...
FileSystemWatcher watcher = new FileSystemWatcher(Photos.Path);
...
private void Watcher_Created(object sender, FileSystemEventArgs e)
{
// new file got created, adding it to the list
Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Normal, new Action(() =>
{
if (File.Exists(e.FullPath))
{
ImageFile item = new ImageFile(e.FullPath);
Photos.Insert(0, item);
PhotoListBox.SelectedIndex = 0;
CurrentPhoto.Source = (BitmapSource)item.Image;
}
}));
}
Membuat tugas latar belakang
Anda menambahkan tugas latar belakang untuk menjalankan kode bahkan saat aplikasi ditangguhkan. Tugas latar belakang sangat bagus untuk tugas kecil yang tidak memerlukan interaksi pengguna. Misalnya, tugas Anda dapat mengunduh email, menampilkan pemberitahuan toast tentang pesan obrolan masuk, atau bereaksi terhadap perubahan kondisi sistem.
Berikut adalah aplikasi sampel WPF yang mendaftarkan tugas latar belakang.
Tugas membuat permintaan http dan mengukur waktu yang diperlukan agar permintaan mengembalikan respons. Tugas Anda kemungkinan akan jauh lebih menarik, tetapi sampel ini bagus untuk mempelajari mekanisme dasar tugas latar belakang.
Lihat sampel lengkapnya di sini.
Pola desain
Untuk membuat layanan latar belakang, lakukan hal-hal berikut:
1️⃣ Menerapkan tugas latar belakang
2️⃣ Mengonfigurasi tugas latar belakang
3️⃣ Daftarkan tugas latar belakang
Menerapkan tugas latar belakang
Terapkan tugas latar belakang dengan menambahkan kode ke proyek komponen Windows Runtime.
public sealed class SiteVerifier : IBackgroundTask
{
public async void Run(IBackgroundTaskInstance taskInstance)
{
taskInstance.Canceled += TaskInstance_Canceled;
BackgroundTaskDeferral deferral = taskInstance.GetDeferral();
var msg = await MeasureRequestTime();
ShowToast(msg);
deferral.Complete();
}
private async Task<string> MeasureRequestTime()
{
string msg;
try
{
var url = ApplicationData.Current.LocalSettings.Values["UrlToVerify"] as string;
var http = new HttpClient();
Stopwatch clock = Stopwatch.StartNew();
var response = await http.GetAsync(new Uri(url));
response.EnsureSuccessStatusCode();
var elapsed = clock.ElapsedMilliseconds;
clock.Stop();
msg = $"{url} took {elapsed.ToString()} ms";
}
catch (Exception ex)
{
msg = ex.Message;
}
return msg;
}
Mengonfigurasi tugas latar belakang
Dalam perancang manifes, buka file package.appxmanifest dari proyek Packaging dalam solusi Anda.
Di tab Deklarasi , tambahkan deklarasi Tugas Latar Belakang.
Kemudian, pilih properti yang diinginkan. Sampel kami menggunakan properti Timer .
Berikan nama kelas yang sepenuhnya memenuhi syarat di komponen Windows Runtime Anda yang mengimplementasikan tugas latar belakang.
Daftarkan tugas latar belakang
Tambahkan kode ke proyek aplikasi desktop Anda yang mendaftarkan tugas latar belakang.
public void RegisterBackgroundTask(String triggerName)
{
var current = BackgroundTaskRegistration.AllTasks
.Where(b => b.Value.Name == triggerName).FirstOrDefault().Value;
if (current is null)
{
BackgroundTaskBuilder builder = new BackgroundTaskBuilder();
builder.Name = triggerName;
builder.SetTrigger(new MaintenanceTrigger(15, false));
builder.TaskEntryPoint = "HttpPing.SiteVerifier";
builder.Register();
System.Diagnostics.Debug.WriteLine("BGTask registered:" + triggerName);
}
else
{
System.Diagnostics.Debug.WriteLine("Task already:" + triggerName);
}
}
Temukan jawaban atas pertanyaan Anda
Ada pertanyaan? Tanyakan kami di Stack Overflow. Tim kami memantau tag ini. Anda juga dapat meminta kami di sini.
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk