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 satu paket aplikasi 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 Bookstore1Universal_10 Windows 10.

Aplikasi Windows Phone Silverlight

Seperti inilah Bookstore1WPSL8—aplikasi yang akan di-port—terlihat seperti ini. Ini hanyalah kotak daftar buku yang menggulir secara vertikal di bawah judul nama dan judul halaman aplikasi.

Memindahkan ke proyek Windows 10

Ini adalah tugas yang sangat cepat untuk membuat proyek baru di Visual Studio, menyalin file ke dalamnya 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 untuk 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 Perlihatkan 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 port ini diperlukan:

• Ubah System.ComponentModel.DesignerProperties ke DesignMode 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; dan using 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 ke Page (jangan lupa kemunculan dalam sintaks elemen properti).
• phone Hapus deklarasi awalan namespace dan shell .
• 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 waktu. Tapi, mari kita catat utang yang kita timbulkan dengan melakukannya. Ini dia dalam kasus ini.

1. Di elemen Halaman akar di MainPage.xaml, hapus SupportedOrientations="Portrait".
2. Di elemen Halaman akar di MainPage.xaml, hapus Orientation="Portrait".
3. Di elemen Halaman akar di MainPage.xaml, hapus shell:SystemTray.IsVisible="True".
4. BookTemplate Dalam templat data, hapus referensi ke PhoneTextExtraLargeStyle gaya TextBlock dan PhoneTextSubtleStyle .
5. TitlePanel Di StackPanel, hapus referensi ke PhoneTextNormalStyle gaya TextBlock dan PhoneTextTitle1Style .

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. Kami sebagian besar hanya perlu memperbaiki gaya dan mendapatkan gambar untuk muncul.

Melunasi item 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 kami 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.

Tombol gaya Windows Phone Silverlight	Kunci gaya UWP
PhoneTextExtraLargeStyle	TitleTextBlockStyle
PhoneTextSubtleStyle	SubtitleTextBlockStyle
PhoneTextNormalStyle	KeteranganTextBlockStyle
PhoneTextTitle1Style	HeaderTextBlockStyle

Untuk mengatur gaya tersebut, Anda cukup mengetiknya ke editor markup atau Anda dapat menggunakan Alat XAML Visual Studio dan mengaturnya tanpa mengetik apa pun. Untuk melakukannya, Anda mengklik kanan TextBlock dan klik Edit Gaya>Terapkan Sumber Daya. Untuk melakukannya dengan TextBlocks di templat item, klik kanan ListBox dan klik Edit Templat> TambahanEdit 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 TextBlockdalam 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 tampilan piksel, kita perlu melalui dan mengalikan dimensi ukuran tetap 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 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 hapus Margin atribut dari Grid akar.
• Jika Anda ingin memberikan judul halaman sedikit lebih banyak ruang pernapasan, Anda dapat mengatur ulang margin -5.6 bawah ke 0 pada judul halaman TextBlock.
• Sekarang, kita perlu mengatur LayoutRootLatar 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 cara terbaik 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 yang di-port berjalan di perangkat Seluler

Penyesuaian opsional pada 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. Namun, kontrol dirancang agar Anda dapat menyesuaikan tampilannya sambil membiarkan perilakunya tidak terpengaruh. Jadi, jika Anda ingin kotak daftar gelap dalam tema gelap—tampilan aplikasi asli—maka ikuti instruksi ini di bawah "Penyesuaian opsional".

Kesimpulan

Studi kasus ini menunjukkan proses porting aplikasi yang sangat sederhana — bisa dibilang yang tidak realistis sederhana. 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 ini 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.