Porting Windows Runtime 8.x XAML dan UI ke UWP

Artikel
03/18/2023

Topik sebelumnya adalah Pemecahan Masalah.

Praktik mendefinisikan UI dalam bentuk markup XAML deklaratif diterjemahkan dengan sangat baik dari aplikasi Universal 8.1 ke aplikasi Platform Windows Universal (UWP). Anda akan menemukan bahwa sebagian besar markup Kompatibel, meskipun Anda mungkin perlu membuat beberapa penyesuaian pada kunci Sumber Daya sistem atau templat kustom yang Anda gunakan. Kode imperatif dalam model tampilan Anda akan memerlukan sedikit atau tanpa perubahan. Bahkan banyak, atau sebagian besar, dari kode di lapisan presentasi Anda yang memanipulasi elemen UI juga harus mudah ke port.

Kode imperatif

Jika Anda hanya ingin sampai ke tahap di mana proyek Anda membangun, Anda dapat mengomentari atau mencolok kode yang tidak penting. Kemudian iterasi, satu masalah pada satu waktu, dan lihat topik berikut di bagian ini (dan topik sebelumnya: Pemecahan Masalah), sampai masalah build dan runtime diserikan dan port Anda selesai.

UI adaptif/responsif

Karena aplikasi Anda dapat berjalan di berbagai perangkat yang berpotensi luas—masing-masing dengan ukuran dan resolusi layarnya sendiri—Anda harus melampaui langkah-langkah minimal untuk memindahkan aplikasi dan Anda mungkin ingin menyesuaikan UI agar terlihat terbaik di perangkat tersebut. Anda dapat menggunakan fitur Visual State Manager adaptif untuk mendeteksi ukuran jendela secara dinamis dan mengubah tata letak sebagai respons, dan contoh cara melakukannya ditampilkan di bagian Antarmuka Pengguna adaptif dalam topik studi kasus Bookstore2.

Penanganan tombol kembali

Untuk aplikasi Universal 8.1, aplikasi Windows Runtime 8.x dan aplikasi Windows Phone Store memiliki pendekatan yang berbeda dengan UI yang Anda tampilkan dan peristiwa yang Anda tangani untuk tombol kembali. Namun, untuk aplikasi Windows 10, Anda dapat menggunakan satu pendekatan di aplikasi Anda. Di perangkat seluler, tombol disediakan untuk Anda sebagai tombol kapasitif pada perangkat, atau sebagai tombol di shell. Di perangkat desktop, Anda menambahkan tombol ke chrome aplikasi setiap kali navigasi belakang dimungkinkan dalam aplikasi, dan ini muncul di bilah judul untuk aplikasi berjendela atau di bilah tugas untuk mode Tablet (hanya Windows 10). Peristiwa tombol kembali adalah konsep universal di semua keluarga perangkat, dan tombol yang diterapkan dalam perangkat keras atau dalam perangkat lunak menaikkan peristiwa BackRequested yang sama.

Contoh di bawah ini berfungsi untuk semua keluarga perangkat dan ada baiknya untuk kasus di mana pemrosesan yang sama berlaku untuk semua halaman, dan di mana Anda tidak perlu mengonfirmasi navigasi (misalnya, untuk memperingatkan tentang perubahan yang belum disimpan).

   // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

Ada juga satu pendekatan untuk semua keluarga perangkat untuk keluar dari aplikasi secara terprogram.

   Windows.UI.Xaml.Application.Current.Exit();

Pesona

Anda tidak perlu mengubah kode apa pun yang terintegrasi dengan pesona, tetapi Anda perlu menambahkan beberapa UI ke aplikasi Anda untuk menggantikan bilah Charms, yang bukan bagian dari shell Windows 10. Aplikasi Universal 8.1 yang berjalan di Windows 10 memiliki antarmuka pengguna penggantinya sendiri yang disediakan oleh chrome yang dirender sistem di bilah judul aplikasi.

Kontrol, serta gaya kontrol dan templat

Aplikasi Universal 8.1 yang berjalan di Windows 10 akan mempertahankan tampilan dan perilaku 8.1 sehubungan dengan kontrol. Namun, saat Anda memindahkan aplikasi tersebut ke aplikasi Windows 10, ada beberapa perbedaan tampilan dan perilaku yang harus diperhatikan. Arsitektur dan desain kontrol pada dasarnya tidak berubah untuk aplikasi Windows 10, sehingga sebagian besar perubahannya berada di sekitar bahasa desain, penyederhanaan, dan peningkatan kegunaan.

Catatan Status visual PointerOver relevan dalam gaya/templat kustom di aplikasi Windows 10 dan di aplikasi Windows Runtime 8.x, tetapi tidak di aplikasi Windows Phone Store. Untuk alasan ini (dan karena kunci sumber daya sistem yang didukung untuk aplikasi Windows 10), kami sarankan Anda menggunakan kembali gaya/templat kustom dari aplikasi Windows Runtime 8.x saat Anda memindahkan aplikasi ke Windows 10. Jika Anda ingin yakin bahwa gaya/templat kustom Anda menggunakan serangkaian status visual terbaru, dan mendapat manfaat dari peningkatan performa yang dilakukan pada gaya/templat default, lalu edit salinan templat default Windows 10 baru dan terapkan kembali penyesuaian Anda ke templat tersebut. Salah satu contoh peningkatan performa adalah bahwa Batas apa pun yang sebelumnya menyertakan ContentPresenter atau Panel telah dihapus dan elemen turunan sekarang merender batas.

Berikut adalah beberapa contoh perubahan yang lebih spesifik pada kontrol.

Nama kontrol	Ubah
AppBar	Jika Anda menggunakan kontrol AppBar (CommandBar direkomendasikan), kontrol tersebut tidak disembunyikan secara default di aplikasi Windows 10. Anda dapat mengontrol ini dengan properti AppBar.ClosedDisplayMode .
AppBar, CommandBar	Di aplikasi Windows 10, AppBar dan CommandBar memiliki tombol Lihat selengkapnya (elipsis).
Bilah Perintah	Di aplikasi Windows Runtime 8.x, perintah sekunder CommandBar selalu terlihat. Di aplikasi Windows Phone Store, dan di aplikasi Windows 10, tidak muncul hingga bilah perintah terbuka.
Bilah Perintah	Untuk aplikasi Windows Phone Store, nilai CommandBar.IsSticky tidak memengaruhi apakah bilah dapat dihentikan ringan atau tidak. Untuk aplikasi Windows 10, jika IsSticky diatur ke true, CommandBar mengagumi gerakan mematikan cahaya.
Bilah Perintah	Dalam aplikasi Windows 10, CommandBar tidak menangani peristiwa EdgeGesture.Completed atau UIElement.RightTapped. Juga tidak menanggapi ketukan atau menggesek ke atas. Anda masih memiliki opsi untuk menangani peristiwa ini dan mengatur IsOpen.
DatePicker, TimePicker	Tinjau tampilan aplikasi Anda dengan perubahan visual pada DatePicker dan TimePicker. Untuk aplikasi Windows 10 yang berjalan di perangkat seluler, kontrol ini tidak lagi menavigasi ke halaman pilihan tetapi sebaliknya menggunakan popup yang dapat dimatikan ringan.
DatePicker, TimePicker	Di aplikasi Windows 10, Anda tidak dapat menempatkan DatePicker atau TimePicker di dalam fly-out. Jika Anda ingin kontrol tersebut ditampilkan dalam kontrol jenis popup, maka Anda dapat menggunakan DatePickerFlyout dan TimePickerFlyout.
GridView, ListView	UntukTampilan DaftarGridView/, lihat Perubahan GridView dan ListView.
Hub	Di aplikasi Windows Phone Store, kontrol Hub membungkus dari bagian terakhir ke yang pertama. Di aplikasi Windows Runtime 8.x, dan di aplikasi Windows 10, bagian hub tidak membungkus.
Hub	Di aplikasi Windows Phone Store, gambar latar belakang kontrol Hub bergerak dalam parallax relatif terhadap bagian hub. Di aplikasi Windows Runtime 8.x, dan di aplikasi Windows 10, parallax tidak digunakan.
Hub	Dalam aplikasi Universal 8.1, properti HubSection.IsHeaderInteractive menyebabkan header bagian—dan glyph chevron yang dirender di sampingnya—menjadi interaktif. Dalam aplikasi Windows 10, ada kemampuan interaktif "Lihat selengkapnya" di samping header, tetapi header itu sendiri tidak interaktif. IsHeaderInteractive masih menentukan apakah interaksi menaikkan peristiwa Hub.SectionHeaderClick .
MessageDialog	Jika Anda menggunakan MessageDialog, pertimbangkan untuk menggunakan ContentDialog yang lebih fleksibel. Selain itu, lihat sampel Dasar-Dasar UI XAML .
ListPickerFlyout, PickerFlyout	ListPickerFlyout dan PickerFlyout tidak digunakan lagi untuk aplikasi Windows 10. Untuk satu pilihan fly-out, gunakan MenuFlyout; untuk pengalaman yang lebih kompleks, gunakan Flyout.
PasswordBox	Properti PasswordBox.IsPasswordRevealButtonEnabled tidak digunakan lagi dalam aplikasi Windows 10, dan pengaturannya tidak berpengaruh. Gunakan PasswordBox.PasswordRevealMode sebagai gantinya, yang defaultnya adalah Mengintip (di mana glyph mata ditampilkan, seperti di aplikasi Windows Runtime 8.x). Selain itu, lihat Panduan untuk kotak kata sandi.
Pivot	Kontrol Pivot sekarang universal, tidak lagi terbatas pada penggunaan pada perangkat seluler.
Searchbox	Meskipun SearchBox diimplementasikan dalam keluarga perangkat Universal, itu tidak berfungsi penuh pada perangkat seluler. Lihat SearchBox tidak digunakan lagi demi AutoSuggestBox.
SemantikZoom	Untuk SemanticZoom, lihat Perubahan SemantikZoom.
ScrollViewer	Beberapa properti default ScrollViewer telah berubah. HorizontalScrollMode adalah Auto, VerticalScrollModeAdalah Otomatis, dan ZoomModeDinonaktifkan. Jika nilai default baru tidak sesuai untuk aplikasi Anda, Maka Anda dapat mengubahnya baik dalam gaya atau sebagai nilai lokal pada kontrol itu sendiri.
TextBox	Di aplikasi Windows Runtime 8.x, pemeriksaan ejaan nonaktif secara default untuk Kotak Teks. Di aplikasi Windows Phone Store, dan di aplikasi Windows 10, aplikasi tersebut aktif secara default.
TextBox	Ukuran font default untuk TextBox telah berubah dari 11 menjadi 15.
TextBox	Nilai default TextBox.TextReadingOrder telah berubah dari Default ke DetectFromContent. Jika itu tidak diinginkan, gunakan UseFlowDirection. Defaultnya tidak digunakan lagi.
Bermacam-macam	Warna aksen berlaku untuk aplikasi Windows Phone Store, dan untuk Windows 10 aplikasi, tetapi tidak untuk aplikasi Windows Runtime 8.x.

Untuk informasi selengkapnya tentang kontrol aplikasi UWP, lihat Kontrol menurut fungsi, daftar Kontrol, dan Panduan untuk kontrol.

Bahasa desain dalam Windows 10

Ada beberapa perbedaan kecil namun penting dalam bahasa desain antara aplikasi Universal 8.1 dan aplikasi Windows 10. Untuk semua detailnya, lihat Desain. Terlepas dari perubahan bahasa desain, prinsip desain kami tetap konsisten: penuhi detail tetapi selalu berusaha untuk kesederhanaan melalui fokus pada konten yang tidak chrome, dengan sengit mengurangi elemen visual, dan tetap autentik untuk domain digital; gunakan hierarki visual terutama dengan tipografi; desain pada kisi; dan hidupkan pengalaman Anda dengan animasi cairan.

Piksel, jarak tampilan, dan faktor skala yang efektif

Sebelumnya, piksel tampilan adalah cara untuk mengabstraksi ukuran dan tata letak elemen UI dari ukuran fisik dan resolusi perangkat yang sebenarnya. Lihat piksel sekarang telah berevolusi menjadi piksel yang efektif, dan berikut penjelasan tentang istilah itu, apa artinya, dan nilai tambahan yang ditawarkannya.

Istilah "resolusi" mengacu pada ukuran kepadatan piksel dan bukan, seperti yang umumnya dipikirkan, jumlah piksel. "Resolusi efektif" adalah cara piksel fisik yang menyusun gambar atau glif mengatasi perbedaan mata yang diberikan dalam melihat jarak dan ukuran piksel fisik perangkat (kepadatan piksel menjadi timbal balik ukuran piksel fisik). Resolusi efektif adalah metrik yang baik untuk membangun pengalaman karena berpusat pada pengguna. Dengan memahami semua faktor, dan mengontrol ukuran elemen UI, Anda dapat membuat pengalaman pengguna menjadi yang baik.

Perangkat yang berbeda adalah jumlah piksel efektif yang berbeda, mulai dari 320 epx untuk perangkat terkecil, hingga 1024 epx untuk monitor berukuran sederhana, dan jauh lebih tinggi hingga lebar yang jauh lebih tinggi. Yang harus Anda lakukan adalah terus menggunakan elemen berukuran otomatis dan panel tata letak dinamis seperti yang selalu Anda miliki. Juga akan ada beberapa kasus di mana Anda akan mengatur properti elemen UI Anda ke ukuran tetap dalam markup XAML. Faktor skala secara otomatis diterapkan ke aplikasi Anda tergantung pada perangkat apa yang dijalankannya dan pengaturan tampilan yang dibuat oleh pengguna. Dan faktor skala tersebut berfungsi untuk menjaga elemen UI apa pun dengan ukuran tetap yang menyajikan target sentuhan (dan membaca) berukuran lebih atau kurang konstan kepada pengguna di berbagai ukuran layar. Dan bersama dengan tata letak dinamis, UI Anda tidak akan hanya secara optik menskalakan pada perangkat yang berbeda. Ini akan melakukan apa yang diperlukan agar sesuai dengan jumlah konten yang sesuai ke dalam ruang yang tersedia.

Sehingga aplikasi Anda memiliki pengalaman terbaik di semua tampilan, kami sarankan Anda membuat setiap aset bitmap dalam berbagai ukuran, masing-masing cocok untuk faktor skala tertentu. Menyediakan aset pada skala 100%, skala 200%, dan skala 400%(dalam urutan prioritas itu) akan memberi Anda hasil yang sangat baik dalam banyak kasus di semua faktor skala menengah.

Catatan Jika, karena alasan apa pun, Anda tidak dapat membuat aset dalam lebih dari satu ukuran, maka buat aset berskala 100%. Di Microsoft Visual Studio, templat proyek default untuk aplikasi UWP menyediakan aset branding (gambar petak peta dan logo) hanya dalam satu ukuran, tetapi tidak berskala 100%. Saat menulis aset untuk aplikasi Anda sendiri, ikuti panduan di bagian ini dan berikan ukuran 100%, 200%, dan 400%, dan gunakan paket aset.

Jika Anda memiliki karya seni yang rumit, maka Anda mungkin ingin memberikan aset Anda dalam ukuran yang lebih besar. Jika Anda memulai dengan seni vektor, maka relatif mudah untuk menghasilkan aset berkualitas tinggi pada faktor skala apa pun.

Kami tidak menyarankan Anda mencoba mendukung semua faktor skala, tetapi daftar lengkap faktor skala untuk aplikasi Windows 10 adalah 100%, 125%, 150%, 200%, 250%, 300%, dan 400%. Jika Anda menyediakannya, Store akan memilih aset berukuran benar untuk setiap perangkat, dan hanya aset tersebut yang akan diunduh. Penyimpanan memilih aset yang akan diunduh berdasarkan DPI perangkat. Anda dapat menggunakan kembali aset dari aplikasi Windows Runtime 8.x pada faktor skala seperti 140% dan 220%, tetapi aplikasi Anda akan berjalan di salah satu faktor skala baru sehingga beberapa penskalaan bitmap tidak akan dapat dihilangkan. Uji aplikasi Anda di berbagai perangkat untuk melihat apakah Anda senang dengan hasilnya dalam kasus Anda.

Anda mungkin menggunakan kembali markup XAML dari aplikasi Windows Runtime 8.x di mana nilai dimensi harfiah digunakan dalam markup (mungkin untuk mengukur bentuk atau elemen lain, mungkin untuk tipografi). Tetapi, dalam beberapa kasus, faktor skala yang lebih besar digunakan pada perangkat untuk aplikasi Windows 10 daripada untuk aplikasi Universal 8.1 (misalnya, 150% digunakan di mana 140% sebelumnya, dan 200% digunakan di mana 180% berada). Jadi, jika Anda menemukan bahwa nilai-nilai harfiah ini sekarang terlalu besar pada Windows 10, maka coba kalikan dengan 0,8. Untuk informasi selengkapnya, lihat Desain responsif 101 untuk aplikasi UWP.

Perubahan GridView dan ListView

Beberapa perubahan telah dilakukan pada setter gaya default untuk GridView untuk membuat gulir kontrol secara vertikal (bukan horizontal, seperti yang dilakukan sebelumnya secara default). Jika Anda mengedit salinan gaya default dalam proyek Anda, salinan Anda tidak akan memiliki perubahan ini, jadi Anda harus membuatnya secara manual. Berikut adalah daftar perubahan.

Setter untuk ScrollViewer.HorizontalScrollBarVisibility telah berubah dari Otomatis ke Dinonaktifkan.
Setter untuk ScrollViewer.VerticalScrollBarVisibility telah berubah dari Dinonaktifkan menjadi Otomatis.
Setter untuk ScrollViewer.HorizontalScrollMode telah berubah dari Diaktifkan menjadi Dinonaktifkan.
Setter untuk ScrollViewer.VerticalScrollMode telah berubah dari Dinonaktifkan menjadi Diaktifkan.
Dalam setter untuk ItemsPanel, nilai ItemsWrapGrid.Orientation telah berubah dari Vertikal ke Horizontal.

Jika perubahan terakhir itu (perubahan pada Orientasi) tampak kontradiktif, ingatlah bahwa kita berbicara tentang kisi pembungkus. Kisi pembungkus yang berorientasi horizontal (nilai baru) mirip dengan sistem penulisan di mana teks mengalir secara horizontal dan memecah ke baris berikutnya ke bawah di akhir halaman. Halaman teks seperti itu menggulir secara vertikal. Sebaliknya, kisi pembungkus berorientasi vertikal (nilai sebelumnya) mirip dengan sistem penulisan di mana teks mengalir secara vertikal dan karenanya menggulir secara horizontal.

Berikut adalah aspek GridView dan ListView yang memiliki perubahan atau tidak didukung di Windows 10.

Properti IsSwipeEnabled (hanya aplikasi Windows Runtime 8.x) tidak didukung untuk aplikasi Windows 10. API masih ada, tetapi pengaturannya tidak berpengaruh. Semua gerakan pilihan sebelumnya didukung kecuali geser ke bawah (yang tidak didukung karena data menunjukkan bahwa itu tidak dapat ditemukan) dan klik kanan (yang dicadangkan untuk menampilkan menu konteks).
Properti ReorderMode (hanya aplikasi Windows Phone Store) tidak didukung untuk aplikasi Windows 10. API masih ada, tetapi pengaturannya tidak berpengaruh. Sebagai gantinya, atur AllowDrop dan CanReorderItems ke true di GridView atau ListView Anda lalu pengguna akan dapat menyusun ulang menggunakan gerakan tekan dan tahan (atau klik dan seret).
Saat mengembangkan untuk Windows 10, gunakan ListViewItemPresenter alih-alih GridViewItemPresenter dalam gaya kontainer item Anda, baik untuk ListView maupun untuk GridView. Jika Anda mengedit salinan gaya kontainer item default, maka Anda akan mendapatkan jenis yang benar.
Visual pilihan telah berubah untuk aplikasi Windows 10. Jika Anda mengatur SelectionMode ke Multipel, maka secara default, kotak centang dirender untuk setiap item. Pengaturan default untuk item ListView berarti bahwa kotak centang ditata sebaris di samping item, dan akibatnya, ruang yang ditempati oleh item lainnya akan sedikit berkurang dan bergeser. Untuk item GridView , kotak centang dilapisi di atas item secara default. Tetapi, dalam kedua kasus, Anda dapat mengontrol tata letak (Sebaris atau Overlay) dari kotak centang (dengan properti CheckMode ) dan apakah mereka ditampilkan sama sekali (dengan properti SelectionCheckMarkVisualEnabled ) pada elemen ListViewItemPresenter di dalam gaya kontainer item Anda seperti pada contoh di bawah ini.
Dalam Windows 10, peristiwa ContainerContentChanging dinaikkan dua kali per item selama virtualisasi UI: sekali untuk klaim ulang, dan sekali untuk penggunaan kembali. Jika nilai InRecycleQueuebenar dan Anda tidak memiliki pekerjaan klaim ulang khusus yang harus dilakukan, maka Anda dapat segera keluar dari penanganan aktivitas Anda dengan jaminan bahwa itu akan dimasukkan kembali ketika item yang sama digunakan kembali (pada saat itu InRecycleQueue akan salah).

<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

kotak centang listviewitempresenter dengan sebaris

Kotak centang ListViewItemPresenter dengan sebaris

kotak centang listviewitempresenter dengan overlaid

Kotak centang ListViewItemPresenter dengan overlaid

Dengan penghapusan geser ke bawah dan gerakan klik kanan untuk pemilihan (karena alasan yang diberikan di atas), model interaksi telah berubah, salah satu konsekuensinya adalah bahwa peristiwa ItemClick dan SelectionChanged tidak lagi saling eksklusif. Untuk aplikasi Windows 10 Anda, tinjau skenario Anda dan putuskan apakah akan mengadopsi model interaksi "seleksi" atau "panggil". Untuk detailnya, lihat Cara mengubah mode interaksi.
Ada beberapa perubahan pada properti yang Anda gunakan untuk menata ListViewItemPresenter. Properti yang baru adalah CheckBoxBrush, PressedBackground, SelectedPressedBackground, dan FocusSecondaryBorderBrush. Properti yang diabaikan untuk aplikasi Windows 10 adalah Padding (gunakan ContentMargin sebagai gantinya), CheckHintBrush, CheckSelectingBrush, PointerOverBackgroundMargin, ReorderHintOffset, SelectedBorderThickness, dan SelectedPointerOverBorderBrush.

Tabel ini menjelaskan perubahan pada status visual dan grup status visual di templat kontrol ListViewItem dan GridViewItem .

8.1	Status fitur	Windows 10/11	Status fitur
CommonStates		CommonStates
	Normal		Normal
	PointerOver		PointerOver
	Ditekan		Ditekan
	PointerOverPressed		[Tidak tersedia]
	Nonaktif		[Tidak tersedia]
	[Tidak tersedia]		PointerOverSelected
	[Tidak tersedia]		Dipilih
	[Tidak tersedia]		DitekanPilih
[Tidak tersedia]		DisabledStates
	[Tidak tersedia]		Nonaktif
	[Tidak tersedia]		Aktif
SelectionHintStates		[Tidak tersedia]
	VertikalSelectionHint		[Tidak tersedia]
	HorizontalSelectionHint		[Tidak tersedia]
	NoSelectionHint		[Tidak tersedia]
[Tidak tersedia]		MultiSelectStates
	[Tidak tersedia]		MultiSelectDisabled
	[Tidak tersedia]		MultiSelectEnabled
SelectionStates		[Tidak tersedia]
	Batal memilih		[Tidak tersedia]
	Tidak Dipilih		[Tidak tersedia]
	UnselectedPointerOver		[Tidak tersedia]
	UnselectedSwiping		[Tidak tersedia]
	Memilih		[Tidak tersedia]
	Dipilih		[Tidak tersedia]
	Penyisipan Terpilih		[Tidak tersedia]
	DipilihTidak fokus		[Tidak tersedia]

Jika Anda memiliki templat kontrol ListViewItem atau GridViewItem kustom, tinjau sesuai dengan perubahan di atas. Kami menyarankan agar Anda memulai kembali dengan mengedit salinan templat default baru dan menerapkan kembali penyesuaian Anda ke templat tersebut. Jika, karena alasan apa pun, Anda tidak dapat melakukannya dan Anda perlu mengedit templat yang ada, maka berikut adalah beberapa panduan umum tentang bagaimana Anda mungkin melakukan itu.

Tambahkan grup status visual MultiSelectStates baru.
Tambahkan status visual MultiSelectDisabled baru.
Tambahkan status visual MultiSelectEnabled baru.
Tambahkan grup status visual DisabledStates baru.
Tambahkan status visual Aktif baru.
Di grup status visual CommonStates, hapus status visual PointerOverPressed.
Pindahkan status visual Dinonaktifkan ke grup status visual DisabledStates.
Tambahkan status visual PointerOverSelected baru.
Tambahkan status visual PressedSelected baru.
Hapus grup status visual SelectedHintStates.
Di grup status visual SelectionStates, pindahkan status visual Terpilih ke grup status visual CommonStates.
Hapus seluruh grup status visual SelectionStates.

Pelokalan dan globalisasi

Anda dapat menggunakan kembali file Resources.resw dari proyek Universal 8.1 di proyek aplikasi UWP Anda. Setelah menyalin file, tambahkan ke proyek dan atur Tindakan Build ke PRIResource dan Salin ke Direktori Output ke Jangan salin. Topik ResourceContext.QualifierValues menjelaskan cara memuat sumber daya khusus keluarga perangkat berdasarkan faktor pemilihan sumber daya keluarga perangkat.

Putar Ke

API di namespace Windows.Media.PlayTo tidak digunakan lagi untuk aplikasi Windows 10 demi API Windows.Media.Casting.

Kunci sumber daya, dan ukuran gaya TextBlock

Bahasa desain telah berkembang untuk Windows 10 dan akibatnya gaya sistem tertentu telah berubah. Dalam beberapa kasus, Anda ingin mengunjungi kembali desain visual tampilan Anda sehingga selaras dengan properti gaya yang telah berubah.

Dalam kasus lain, kunci sumber daya tidak lagi didukung. Editor markup XAML di Visual Studio menyoroti referensi ke kunci sumber daya yang tidak dapat diselesaikan. Misalnya, editor markup XAML akan menggaris bawahi referensi ke kunci ListViewItemTextBlockStyle gaya dengan berlekuk merah. Jika itu tidak dikoreksi, aplikasi akan segera berakhir saat Anda mencoba menyebarkannya ke emulator atau perangkat. Jadi, penting untuk menghadiri kebenaran markup XAML. Dan Anda akan menemukan Visual Studio untuk menjadi alat yang bagus untuk menangkap masalah tersebut.

Untuk kunci yang masih didukung, perubahan bahasa desain berarti bahwa properti yang diatur oleh beberapa gaya telah berubah. Misalnya, TitleTextBlockStyle mengatur FontSize ke 14.667px dalam aplikasi Windows Runtime 8.x dan 18.14px di aplikasi Windows Phone Store. Tapi, gaya yang sama mengatur FontSize ke 24px yang jauh lebih besar dalam aplikasi Windows 10. Tinjau desain dan tata letak Anda dan gunakan gaya yang sesuai di tempat yang tepat. Untuk informasi selengkapnya, lihat Panduan untuk font dan Mendesain aplikasi UWP.

Ini adalah daftar lengkap kunci yang tidak lagi didukung.

CheckBoxAndRadioButtonMinWidthSize
CheckBoxAndRadioButtonTextPaddingThickness
ComboBoxFlyoutListPlaceholderTextOpacity
ComboBoxFlyoutListPlaceholderTextThemeMargin
ComboBoxHighlightedBackgroundThemeBrush
ComboBoxHighlightedBorderThemeBrush
ComboBoxHighlightedForegroundThemeBrush
ComboBoxInlinePlaceholderTextForegroundThemeBrush
ComboBoxInlinePlaceholderTextThemeFontWeight
ComboBoxItemDisabledThemeOpacity
ComboBoxItemHighContrastBackgroundThemeMargin
ComboBoxItemMinHeightThemeSize
ComboBoxPlaceholderTextBlockStyle
ComboBoxPlaceholderTextThemeMargin
CommandBarBackgroundThemeBrush
CommandBarForegroundThemeBrush
ContentDialogButton1HostPadding
ContentDialogButton2HostPadding
ContentDialogButtonsMinHeight
ContentDialogContentLandscapeWidth
ContentDialogContentMinHeight
ContentDialogDimmingColor
ContentDialogTitleMinHeight
ControlContextualInfoTextBlockStyle
ControlHeaderContentPresenterStyle
ControlHeaderTextBlockStyle
FlyoutContentPanelLandscapeThemeMargin
FlyoutContentPanelPortraitThemeMargin
GrabberMargin
GridViewItemMargin
GridViewItemPlaceholderBackgroundThemeBrush
GroupHeaderTextBlockStyle
HeaderContentPresenterStyle
HighContrastBlack
HighContrastWhite
HubHeaderCharacterSpacing
HubHeaderFontSize
HubHeaderMarginThickness
HubSectionHeaderCharacterSpacing
HubSectionHeaderFontSize
HubSectionHeaderMarginThickness
HubSectionMarginThickness
InlineWindowPlayPauseMargin
ItemTemplate
LeftFullWindowMargin
LeftMargin
ListViewEmptyStaticTextBlockStyle
ListViewItemContentTextBlockStyle
ListViewItemContentTranslateX
ListViewItemMargin
ListViewItemMultiselectCheckBoxMargin
ListViewItemSubheaderTextBlockStyle
ListViewItemTextBlockStyle
MediaControlPanelAudioThemeBrush
MediaControlPanelPhoneVideoThemeBrush
MediaControlPanelVideoThemeBrush
MediaControlPanelVideoThemeColor
MediaControlPlayPauseThemeBrush
MediaControlTimeRowThemeBrush
MediaControlTimeRowThemeColor
MediaDownloadProgressIndicatorThemeBrush
MediaErrorBackgroundThemeBrush
MediaTextThemeBrush
MenuFlyoutBackgroundThemeBrush
MenuFlyoutBorderThemeBrush
MenuFlyoutLandscapeThemePadding
MenuFlyoutLeftLandscapeBorderThemeThickness
MenuFlyoutPortraitBorderThemeThickness
MenuFlyoutPortraitThemePadding
MenuFlyoutRightLandscapeBorderThemeThickness
MessageDialogContentStyle
MessageDialogTitleStyle
MinimalWindowMargin
PasswordBoxCheckBoxThemeMargin
PhoneAccentBrush
PhoneBackgroundBrush
PhoneBackgroundColor
PhoneBaseBlackColor
PhoneBaseHighColor
PhoneBaseLowColor
PhoneBaseLowSolidColor
PhoneBaseMediumHighColor
PhoneBaseMediumMidColor
PhoneBaseMediumMidSolidColor
PhoneBaseMidColor
PhoneBaseWhiteColor
PhoneBorderThickness
PhoneButtonBasePressedForegroundBrush
PhoneButtonContentPadding
PhoneButtonFontWeight
PhoneButtonMinHeight
PhoneButtonMinWidth
PhoneChromeBrush
PhoneChromeColor
PhoneControlBackgroundColor
PhoneControlDisabledColor
PhoneControlForegroundColor
PhoneDisabledBrush
PhoneDisabledColor
PhoneFontFamilyLight
PhoneFontFamilySemiBold
PhoneForegroundBrush
PhoneForegroundColor
PhoneHighContrastSelectedBackgroundThemeBrush
PhoneHighContrastSelectedForegroundThemeBrush
PhoneImagePlaceholderColor
PhoneLowBrush
PhoneMidBrush
PhonePageBackgroundColor
PhonePivotLockedTranslation
PhonePivotUnselectedItemOpacity
PhoneRadioCheckBoxBorderBrush
PhoneRadioCheckBoxBrush
PhoneRadioCheckBoxCheckBrush
PhoneRadioCheckBoxPressedBrush
PhoneStrokeThickness
PhoneTextHighColor
PhoneTextLowColor
PhoneTextMidColor
PhoneTextOverAccentColor
PhoneTouchTargetLargeOverhang
PhoneTouchTargetOverhang
PivotHeaderItemPadding
PlaceholderContentPresenterStyle
ProgressBarHighContrastAccentBarThemeBrush
ProgressBarIndeterminateRectagleThemeSize
ProgressBarRectangleStyle
ProgressRingActiveBackgroundOpacity
ProgressRingElipseThemeMargin
ProgressRingelipseThemesize
ProgressRingTextForegroundThemeBrush
ProgressRingxtThemeMargin
ProgressRingThemeSize
RichEditBoxTextThemeMargin
RightFullWindowMargin
RightMargin
ScrollBarMinThemeHeight
ScrollBarMinThemeWidth
ScrollBarPanningThumbThemeHeight
ScrollBarPanningThumbThemeWidth
SliderThumbDisabledBorderThemeBrush
SliderTrackBorderThemeBrush
SliderTrackDisabledBorderThemeBrush
TextBoxBackgroundColor
TextBoxBorderColor
TextBoxDisabledHeaderForegroundThemeBrush
TextBoxFocusedBackgroundThemeBrush
TextBoxForegroundColor
TextBoxPlaceholderColor
TextControlHeaderMarginThemeThickness
TextControlHeaderMinHeightSize
TextStyleExtraExtraLargeFontSize
TextStyleExtraLargePlusFontSize
TextStyleMediumFontSize
TextStyleSmallFontSize
TimeRemainingElementMargin

Meskipun SearchBox diimplementasikan dalam keluarga perangkat Universal, itu tidak berfungsi penuh pada perangkat seluler. Gunakan AutoSuggestBox untuk pengalaman pencarian universal Anda. Berikut adalah cara Anda biasanya menerapkan pengalaman pencarian dengan AutoSuggestBox.

Setelah pengguna mulai mengetik, peristiwa TextChanged dinaikkan , dengan alasan UserInput. Anda kemudian mengisi daftar saran dan mengatur ItemsSource dari AutoSuggestBox. Saat pengguna menavigasi daftar, acara SuggestionChosen dinaikkan (dan jika Anda telah mengatur TextMemberDisplayPath, kotak teks diisi secara otomatis dengan properti yang ditentukan). Saat pengguna mengirimkan pilihan dengan kunci Enter, peristiwa QuerySubmitted dinaikkan , di mana Anda dapat mengambil tindakan pada saran tersebut (dalam hal ini, kemungkinan besar menavigasi ke halaman lain dengan detail selengkapnya tentang konten yang ditentukan). Perhatikan bahwa properti LinguisticDetails dan Language dari SearchBoxQuerySubmittedEventArgs tidak lagi didukung (ada API yang setara untuk mendukung fungsionalitas tersebut). Dan KeyModifiers tidak lagi didukung.

AutoSuggestBox juga memiliki dukungan untuk editor metode input (IMEs). Dan, jika Anda ingin menampilkan ikon "temukan", maka Anda juga dapat melakukannya (berinteraksi dengan ikon akan menyebabkan peristiwa QuerySubmitted dinaikkan ).

   <AutoSuggestBox ... >
        <AutoSuggestBox.QueryIcon>
            <SymbolIcon Symbol="Find"/>
        </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>

Selain itu, lihat sampel porting AutoSuggestBox.

Perubahan SemantikZoom

Gerakan memperkecil tampilan untuk SemanticZoom telah terkonvergensi pada model Windows Phone, yaitu mengetuk atau mengklik header grup (jadi, pada komputer desktop, kesempurnaan tombol minus untuk memperkecil tampilan tidak lagi ditampilkan). Sekarang, kita mendapatkan perilaku yang sama, konsisten, gratis di semua perangkat. Salah satu perbedaan kosmetik dari model Windows Phone adalah bahwa tampilan yang diperkecil (jump list) menggantikan tampilan yang diperbesar dan bukan melapisinya. Untuk alasan ini, Anda dapat menghapus latar belakang semi buram dari tampilan yang diperkecil.

Di aplikasi Windows Phone Store, tampilan zoomed-out diperluas ke ukuran layar. Di aplikasi Windows Runtime 8.x, dan di aplikasi Windows 10, ukuran tampilan yang diperkecil dibatasi ke batas kontrol SemanticZoom.

Di aplikasi Windows Phone Store, konten di balik tampilan yang diperkecil (dalam urutan z) menunjukkan apakah tampilan yang diperkecil memiliki transparansi di latar belakangnya. Di aplikasi Windows Runtime 8.x, dan di aplikasi Windows 10, tidak ada yang terlihat di balik tampilan yang diperkecil.

Di aplikasi Windows Runtime 8.x, saat aplikasi dinonaktifkan dan diaktifkan kembali, tampilan yang diperkecil akan dimatikan (jika ditampilkan) dan tampilan yang diperbesar ditampilkan sebagai gantinya. Di aplikasi Windows Phone Store, dan di aplikasi Windows 10, tampilan yang diperkecil akan tetap ditampilkan jika ditampilkan.

Di aplikasi Windows Phone Store, dan di aplikasi Windows 10, tampilan yang diperkecil akan dimatikan saat tombol belakang ditekan. Untuk aplikasi Windows Runtime 8.x, tidak ada pemrosesan tombol kembali bawaan, sehingga pertanyaan tidak berlaku.

Pengaturan

Kelas Windows Runtime 8.x SettingsPane tidak sesuai untuk Windows 10. Sebagai gantinya, selain membuat halaman Pengaturan, Anda harus memberi pengguna Anda cara untuk mengaksesnya dari dalam aplikasi Anda. Kami menyarankan agar Anda mengekspos halaman Pengaturan aplikasi ini di tingkat atas, sebagai item terakhir yang disematkan di panel navigasi Anda, tetapi berikut adalah kumpulan lengkap opsi Anda.

Panel navigasi. Pengaturan harus menjadi item terakhir dalam daftar pilihan navigasi, dan disematkan ke bagian bawah.
Appbar/toolbar (dalam tampilan tab atau tata letak pivot). Pengaturan harus menjadi item terakhir di appbar atau flyout menu toolbar. Tidak disarankan agar Pengaturan menjadi salah satu item tingkat atas dalam navigasi.
Hub. Pengaturan harus terletak di dalam flyout menu (bisa dari menu bilah aplikasi atau menu toolbar dalam tata letak Hub).

Disarankan juga untuk mengubur Pengaturan dalam panel detail master.

Halaman Pengaturan Anda harus mengisi seluruh jendela aplikasi Anda, dan halaman Pengaturan Anda juga merupakan tempat Tentang dan Umpan Balik seharusnya. Untuk panduan tentang desain halaman Pengaturan Anda, lihat Panduan untuk pengaturan aplikasi.

Teks

Teks (atau tipografi) adalah aspek penting dari aplikasi UWP dan, saat porting, Anda mungkin ingin mengunjungi kembali desain visual tampilan Anda sehingga selaras dengan bahasa desain baru. Gunakan ilustrasi ini untuk menemukan gaya sistem TextBlock Platform Windows Universal (UWP) yang tersedia. Temukan yang sesuai dengan gaya Windows Phone Silverlight yang Anda gunakan. Atau, Anda dapat membuat gaya universal Anda sendiri dan menyalin properti dari gaya sistem Windows Phone Silverlight ke dalamnya.

gaya blok teks sistem untuk aplikasi windows 10
Gaya TextBlock Sistem untuk aplikasi Windows 10

Di aplikasi Windows Runtime 8.x dan aplikasi Windows Phone Store, keluarga font default adalah Antarmuka Pengguna Global. Dalam aplikasi Windows 10, keluarga font default adalah Segoe UI. Akibatnya, metrik font di aplikasi Anda mungkin terlihat berbeda. Jika ingin mereproduksi tampilan teks 8.1, Anda dapat mengatur metrik Anda sendiri menggunakan properti seperti LineHeight dan LineStackingStrategy.

Di aplikasi Windows Runtime 8.x dan aplikasi Windows Phone Store, bahasa default untuk teks diatur ke bahasa build, atau untuk en-us. Di aplikasi Windows 10, bahasa default diatur ke bahasa aplikasi teratas (fallback font). Anda dapat mengatur FrameworkElement.Language secara eksplisit, tetapi Anda akan menikmati perilaku fallback font yang lebih baik jika Anda tidak menetapkan nilai untuk properti tersebut.

Untuk informasi selengkapnya, lihat Panduan untuk font dan Mendesain aplikasi UWP. Selain itu, lihat bagian Kontrol di atas untuk perubahan pada kontrol teks.

Perubahan tema

Untuk aplikasi Universal 8.1, tema defaultnya gelap secara default. Untuk perangkat Windows 10, tema default telah berubah, tetapi Anda dapat mengontrol tema yang digunakan dengan mendeklarasikan tema yang diminta di App.xaml. Misalnya, untuk menggunakan tema gelap di semua perangkat, tambahkan RequestedTheme="Dark" ke elemen Aplikasi akar.

Petak peta dan roti panggang

Untuk petak peta dan toast, templat yang saat ini Anda gunakan akan terus berfungsi di aplikasi Windows 10 Anda. Tetapi, ada templat adaptif baru yang tersedia untuk Anda gunakan, dan ini dijelaskan dalam Pemberitahuan, petak peta, roti panggang, dan lencana.

Sebelumnya, pada komputer desktop, pemberitahuan toast adalah pesan transitory. Itu akan hilang, dan tidak lagi dapat diambil, setelah terlewatkan atau diabaikan. Pada Windows Phone, jika pemberitahuan toast diabaikan atau diberhentikan sementara, pemberitahuan akan masuk ke Pusat Tindakan. Sekarang, Pusat Tindakan tidak lagi terbatas pada keluarga perangkat Seluler.

Untuk mengirim pemberitahuan toast, tidak perlu lagi mendeklarasikan kemampuan.

Ukuran jendela

Untuk aplikasi Universal 8.1, elemen manifes aplikasi ApplicationView digunakan untuk mendeklarasikan lebar jendela minimum. Di aplikasi UWP, Anda dapat menentukan ukuran minimum (lebar dan tinggi) dengan kode imperatif. Ukuran minimum default adalah 500x320epx, dan itu juga ukuran minimum terkecil yang diterima. Ukuran minimum terbesar yang diterima adalah 500x500epx.

   Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

Topik berikutnya adalah Porting untuk I/O, perangkat, dan model aplikasi.

Bagikan melalui

Porting Windows Runtime 8.x XAML dan UI ke UWP

Kode imperatif

UI adaptif/responsif

Penanganan tombol kembali

Pesona

Kontrol, serta gaya kontrol dan templat

Bahasa desain dalam Windows 10

Piksel, jarak tampilan, dan faktor skala yang efektif

Perubahan GridView dan ListView

Pelokalan dan globalisasi

Putar Ke

Kunci sumber daya, dan ukuran gaya TextBlock

Perubahan SemantikZoom

Pengaturan

Teks

Perubahan tema

Petak peta dan roti panggang

Ukuran jendela

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Porting Windows Runtime 8.x XAML dan UI ke UWP

Kode imperatif

UI adaptif/responsif

Penanganan tombol kembali

Pesona

Kontrol, serta gaya kontrol dan templat

Bahasa desain dalam Windows 10

Piksel, jarak tampilan, dan faktor skala yang efektif

Perubahan GridView dan ListView

Pelokalan dan globalisasi

Putar Ke

Kunci sumber daya, dan ukuran gaya TextBlock

SearchBox tidak digunakan lagi demi AutoSuggestBox

Perubahan SemantikZoom

Pengaturan

Teks

Perubahan tema

Petak peta dan roti panggang

Ukuran jendela

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: