Studi kasus Windows Phone Silverlight ke UWP: Bookstore1
Topik ini menyajikan studi kasus tentang porting aplikasi Windows Phone Silverlight yang sangat sederhana ke aplikasi Windows 10 Platform Windows Universal (UWP). Dengan Windows 10, Anda dapat membuat paket aplikasi tunggal yang dapat diinstal pelanggan Anda ke berbagai perangkat, dan itulah yang akan kami lakukan dalam studi kasus ini. Lihat Panduan untuk aplikasi UWP.
Aplikasi yang akan kita port terdiri dari ListBox yang terikat ke model tampilan. Model tampilan memiliki daftar buku yang menampilkan judul, penulis, dan sampul buku. Gambar sampul buku memiliki Tindakan Build yang diatur ke Konten dan Salin ke Direktori Output diatur ke Jangan salin.
Topik sebelumnya di bagian ini menjelaskan perbedaan antara platform, dan mereka memberikan detail dan panduan tentang proses porting untuk berbagai aspek aplikasi dari markup XAML, melalui pengikatan ke model tampilan, hingga mengakses data. Studi kasus bertujuan untuk melengkapi panduan itu dengan menunjukkannya dalam tindakan dalam contoh nyata. Studi kasus mengasumsikan Anda telah membaca panduan, yang tidak mereka ulangi.
Catatan Saat membuka Bookstore1Universal_10 di Visual Studio, jika Anda melihat pesan "Pembaruan Visual Studio diperlukan", maka ikuti langkah-langkah untuk memilih Penerapan Versi Platform Target di TargetPlatformVersion.
Unduhan
Unduh aplikasi Bookstore1WPSL8 Windows Phone Silverlight.
Unduh aplikasi Windows 10 Bookstore1Universal_10.
Aplikasi Windows Phone Silverlight
Inilah yang terlihat seperti Bookstore1WPSL8—aplikasi yang akan kita port—. Ini hanya kotak daftar buku yang menggulir vertikal di bawah judul nama aplikasi dan judul halaman.
Porting ke proyek Windows 10
Ini adalah tugas yang sangat cepat untuk membuat proyek baru di Visual Studio, menyalin file ke sana dari Bookstore1WPSL8, dan menyertakan file yang disalin dalam proyek baru. Mulailah dengan membuat proyek Aplikasi Kosong (Windows Universal) baru. Beri nama Bookstore1Universal_10. Ini adalah file yang akan disalin dari Bookstore1WPSL8 ke Bookstore1Universal_10.
- Salin folder yang berisi file PNG gambar sampul buku (foldernya adalah \Assets\CoverImages). Setelah menyalin folder, di Penjelajah Solusi, pastikan Tampilkan Semua File diaktifkan. Klik kanan folder yang Anda salin dan klik Sertakan Dalam Proyek. Perintah itu adalah apa yang kita maksud dengan "menyertakan" file atau folder dalam proyek. Setiap kali Anda menyalin file atau folder, klik Refresh di Penjelajah Solusi lalu sertakan file atau folder dalam proyek. Tidak perlu melakukan ini untuk file yang Anda ganti di tujuan.
- Salin folder yang berisi file sumber model tampilan (foldernya adalah \ViewModel).
- Salin MainPage.xaml dan ganti file di tujuan.
Kita dapat menyimpan App.xaml, dan App.xaml.cs yang dihasilkan Visual Studio untuk kita dalam proyek Windows 10.
Edit kode sumber dan file markup yang baru saja Anda salin dan ubah referensi apa pun ke namespace Bookstore1WPSL8 ke Bookstore1Universal_10. Cara cepat untuk melakukannya adalah dengan menggunakan fitur Replace In Files . Dalam kode imperatif dalam file sumber model tampilan, perubahan porting ini diperlukan:
- Ubah
System.ComponentModel.DesignerProperties
keDesignMode
lalu gunakan perintah Atasi di atasnya.IsInDesignTool
Hapus properti dan gunakan IntelliSense untuk menambahkan nama properti yang benar:DesignModeEnabled
. - Gunakan perintah Atasi pada
ImageSource
. - Gunakan perintah Atasi pada
BitmapImage
. - Hapus menggunakan
System.Windows.Media;
danusing System.Windows.Media.Imaging;
. - Ubah nilai yang dikembalikan oleh properti Bookstore1Universal_10.BookstoreViewModel.AppName dari "BOOKSTORE1WPSL8" menjadi "BOOKSTORE1UNIVERSAL".
Di MainPage.xaml, perubahan porting ini diperlukan:
- Ubah
phone:PhoneApplicationPage
kePage
(jangan lupa kemunculan dalam sintaks elemen properti). phone
Hapus deklarasi awalan namespace danshell
.- Ubah "clr-namespace" menjadi "using" dalam deklarasi awalan namespace yang tersisa.
Kita dapat memilih untuk memperbaiki kesalahan kompilasi markup dengan sangat murah jika kita ingin melihat hasil paling cepat, bahkan jika itu berarti menghapus markup untuk sementara. Tapi, mari kita catat utang yang kita perkuat dengan melakukannya. Ini dia dalam kasus ini.
- Di elemen Halaman akar di MainPage.xaml, hapus
SupportedOrientations="Portrait"
. - Di elemen Halaman akar di MainPage.xaml, hapus
Orientation="Portrait"
. - Di elemen Halaman akar di MainPage.xaml, hapus
shell:SystemTray.IsVisible="True"
. BookTemplate
Dalam templat data, hapus referensi kePhoneTextExtraLargeStyle
gaya TextBlock danPhoneTextSubtleStyle
.TitlePanel
Di StackPanel, hapus referensi kePhoneTextNormalStyle
gaya TextBlock danPhoneTextTitle1Style
.
Mari kita kerjakan UI untuk keluarga perangkat seluler terlebih dahulu, dan kita dapat mempertimbangkan faktor bentuk lain setelah itu. Anda dapat membuat dan menjalankan aplikasi sekarang. Berikut tampilannya di emulator seluler.
Tampilan dan model tampilan bekerja sama dengan benar, dan ListBox berfungsi. Kita sebagian besar hanya perlu memperbaiki gaya dan mendapatkan gambar untuk muncul.
Melunasi barang utang, dan beberapa gaya awal
Secara default, semua orientasi didukung. Aplikasi Windows Phone Silverlight secara eksplisit membatasi dirinya untuk hanya potret, sehingga item utang #1 dan #2 dibayarkan dengan masuk ke manifes paket aplikasi dalam proyek baru dan memeriksa Potret di bawah Orientasi yang didukung.
Untuk aplikasi ini, item #3 bukan utang karena bilah status (sebelumnya disebut baki sistem) ditampilkan secara default. Untuk item #4 dan #5, kita perlu menemukan empat gaya TextBlock Platform Windows Universal (UWP) yang sesuai dengan gaya Windows Phone Silverlight yang kita gunakan. Anda dapat menjalankan aplikasi Windows Phone Silverlight di emulator dan membandingkannya secara berdampingan dengan ilustrasi di bagian Teks . Dari melakukan itu, dan dari melihat properti gaya sistem Windows Phone Silverlight, kita dapat membuat tabel ini.
Kunci gaya Windows Phone Silverlight | Kunci gaya UWP |
---|---|
PhoneTextExtraLargeStyle | TitleTextBlockStyle |
PhoneTextSubtleStyle | SubtitleTextBlockStyle |
PhoneTextNormalStyle | CaptionTextBlockStyle |
PhoneTextTitle1Style | HeaderTextBlockStyle |
Untuk mengatur gaya tersebut, Anda cukup mengetikkannya ke editor markup atau Anda dapat menggunakan Alat Visual Studio XAML dan mengaturnya tanpa mengetik sesuatu. Untuk melakukannya, Anda mengklik kanan TextBlock dan klik Edit Gaya>Terapkan Sumber Daya. Untuk melakukannya dengan TextBlockdi templat item, klik kanan Kotak Daftar dan klik Edit Templat>Tambahan Edit Item yang Dihasilkan (ItemTemplate).
Ada latar belakang putih buram 80% di belakang item, karena gaya default kontrol ListBox mengatur latar belakangnya ke ListBoxBackgroundThemeBrush
sumber daya sistem. Atur Background="Transparent"
pada ListBox untuk menghapus latar belakang tersebut. Untuk meratakan kiri TextBlockdi templat item, edit lagi dengan cara yang sama seperti yang dijelaskan di atas dan atur Margin "9.6,0"
pada kedua TextBlocks.
Setelah itu selesai, karena perubahan yang terkait dengan melihat piksel, kita perlu melalui dan mengalikan dimensi ukuran tetap apa pun yang belum kita ubah (margin, lebar, tinggi, dll) sebesar 0,8. Jadi, misalnya, gambar harus berubah dari 70x70px menjadi 56x56px.
Tapi, mari kita dapatkan gambar-gambar tersebut untuk dirender sebelum kita menunjukkan hasil gaya kita.
Mengikat Gambar ke model tampilan
Di Bookstore1WPSL8, kami melakukan ini:
// this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));
Di Bookstore1Universal, kami menggunakan skema URI ms-appx. Sehingga kita dapat menjaga sisa kode kita tetap sama, kita dapat menggunakan kelebihan beban yang berbeda dari konstruktor System.Uri untuk menempatkan skema URI ms-appx dalam URI dasar dan menambahkan sisa jalur ke dalamnya. Seperti ini:
// this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));
Gaya universal
Sekarang, kita hanya perlu membuat beberapa tweak gaya akhir dan mengonfirmasi bahwa aplikasi terlihat bagus di desktop (dan lainnya) faktor bentuk serta seluler. Langkah-langkahnya ada di bawah ini. Dan Anda dapat menggunakan tautan di bagian atas topik ini untuk mengunduh proyek dan melihat hasil semua perubahan antara di sini dan akhir studi kasus.
- Untuk memperketat penspasian antar item, temukan
BookTemplate
templat data di MainPage.xaml dan hapusMargin
atribut dari Root Grid. - Jika Anda ingin memberi judul halaman sedikit lebih banyak ruang pernapasan, Anda dapat mengatur ulang margin
-5.6
bawah ke0
pada judul halaman TextBlock. - Sekarang, kita perlu mengatur
LayoutRoot
Latar Belakang ke nilai default yang benar sehingga aplikasi terlihat sesuai saat berjalan di semua perangkat apa pun temanya. Ubah dari"Transparent"
ke"{ThemeResource ApplicationPageBackgroundThemeBrush}"
.
Dengan aplikasi yang lebih canggih, ini akan menjadi titik di mana kami akan menggunakan panduan dalam Porting untuk faktor bentuk dan pengalaman pengguna dan benar-benar memanfaatkan faktor bentuk yang optimal dari masing-masing dari banyak perangkat yang sekarang dapat dijalankan aplikasi. Tapi, untuk aplikasi sederhana ini, kita dapat berhenti di sini dan melihat bagaimana aplikasi terlihat setelah urutan terakhir operasi gaya tersebut. Ini sebenarnya terlihat sama pada perangkat seluler dan desktop, meskipun tidak memanfaatkan ruang dengan baik pada faktor bentuk yang luas (tetapi kami akan menyelidiki cara melakukannya dalam studi kasus selanjutnya).
Lihat Perubahan tema untuk melihat cara mengontrol tema aplikasi Anda.
Aplikasi Windows 10 port yang berjalan di perangkat Seluler
Penyesuaian opsional ke kotak daftar untuk perangkat Seluler
Saat aplikasi berjalan di perangkat Seluler, latar belakang kotak daftar terang secara default di kedua tema. Itu mungkin gaya yang Anda sukai dan, jika demikian, maka tidak ada lagi yang harus dilakukan. Tapi, kontrol dirancang sehingga Anda dapat menyesuaikan tampilannya sambil membiarkan perilaku mereka tidak terpengaruh. Jadi, jika Anda ingin kotak daftar gelap dalam tema gelap—cara aplikasi asli terlihat—maka ikuti petunjuk ini di bawah "Penyesuaian opsional".
Kesimpulan
Studi kasus ini menunjukkan proses porting aplikasi yang sangat sederhana—bisa dibilang yang sederhana secara tidak realistis. Misalnya, kontrol daftar dapat digunakan untuk pemilihan atau untuk membuat konteks untuk navigasi; aplikasi menavigasi ke halaman dengan detail selengkapnya tentang item yang diketuk. Aplikasi khusus ini tidak melakukan apa pun dengan pilihan pengguna, dan tidak memiliki navigasi. Meskipun demikian, studi kasus berfungsi untuk memecahkan es, untuk memperkenalkan proses porting, dan untuk menunjukkan teknik penting yang dapat Anda gunakan di aplikasi UWP nyata.
Studi kasus berikutnya adalah Bookstore2, di mana kita melihat mengakses dan menampilkan data yang dikelompokkan.