Case study della conversione da Silverlight per Windows Phone a UWP: Bookstore1Windows Phone Silverlight to UWP case study: Bookstore1

Questo argomento presenta un case study sulla conversione di un’app di Silverlight per Windows Phone molto semplice in app UWP (Universal Windows Platform) di Windows 10.This topic presents a case study of porting a very simple Windows Phone Silverlight app to a Windows 10 Universal Windows Platform (UWP) app. Con Windows 10 puoi creare un unico pacchetto dell'app che i clienti potranno installare in una vasta gamma di dispositivi. Questo è ciò che faremo nel case study.With Windows 10, you can create a single app package that your customers can install onto a wide range of devices, and that's what we'll do in this case study. Vedi la guida alle app UWP.See Guide to UWP apps.

L’app che convertiremo è costituita da un elemento ListBox associato a un modello di visualizzazione.The app we'll port consists of a ListBox bound to a view model. Il modello di visualizzazione include un elenco di libri che mostra il titolo, l'autore e la copertina.The view model has a list of books that shows title, author, and book cover. Per le immagini delle copertine dei libri l’opzione Azione di compilazione è impostata su Contenuto e l’opzione Copia in directory di output è impostata su Non copiare.The book cover images have Build Action set to Content and Copy to Output Directory set to Do not copy.

Gli argomenti precedenti in questa sezione descrivono le differenze tra le piattaforme e forniscono dettagli e indicazioni sul processo di conversione per vari aspetti di un'app dal markup XAML, all'associazione a un modello di visualizzazione, fino all'accesso ai dati.The previous topics in this section describe the differences between the platforms, and they give details and guidance on the porting process for various aspects of an app from XAML markup, through binding to a view model, down to accessing data. Lo scopo di un case study è integrare queste indicazioni mostrandone l'applicazione concreta in un esempio reale.A case study aims to complement that guidance by showing it in action in a real example. Nei case study partiamo dal presupposto che tu abbia già letto queste indicazioni, che non verranno ripetute.The case studies assume you've read the guidance, which they do not repeat.

Nota    Quando si apre Bookstore1Universal _ 10 in Visual Studio, se viene visualizzato il messaggio "aggiornamento di Visual Studio richiesto", seguire i passaggi per selezionare un controllo delle versioni della piattaforma di destinazione in TargetPlatformVersion.Note   When opening Bookstore1Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps for selecting a Target Platform Versioning in TargetPlatformVersion.

DownloadDownloads

Scarica l’app di Silverlight per Windows Phone Bookstore1WPSL8.Download the Bookstore1WPSL8 Windows Phone Silverlight app.

Scaricare l' _ app Bookstore1Universal 10 Windows 10.Download the Bookstore1Universal_10 Windows 10 app.

App di Silverlight per Windows PhoneThe Windows Phone Silverlight app

Ecco che aspetto ha l'app Bookstore1WPSL8 di cui eseguiremo la conversione.Here’s what Bookstore1WPSL8—the app that we're going to port—looks like. È una semplice casella di riepilogo a scorrimento verticale sotto l'intestazione con il nome dell'app e il titolo della pagina.It's just a vertically-scrolling list box of books beneath the heading of the app's name and page title.

aspetto di bookstore1wpsl8

Conversione in un progetto di Windows 10Porting to a Windows 10 project

È molto veloce creare un nuovo progetto in Visual Studio. Basta copiare i file da Bookstore1WPSL8 e includere i file copiati nel nuovo progetto.It's a very quick task to create a new project in Visual Studio, copy files over to it from Bookstore1WPSL8, and include the copied files in the new project. Per iniziare, crea un progetto App vuota (Windows universale).Start by creating a new Blank Application (Windows Universal) project. Denominarlo Bookstore1Universal _ 10.Name it Bookstore1Universal_10. Questi sono i file da copiare da Bookstore1WPSL8 a Bookstore1Universal _ 10.These are the files to copy over from Bookstore1WPSL8 to Bookstore1Universal_10.

  • Copiare la cartella che contiene i file PNG dell'immagine del libro Cover (la cartella è \ assets \ CoverImages).Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). Dopo aver copiato la cartella, in Esplora soluzioni assicurati che Mostra tutti i file sia attivato.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. Fai clic con il pulsante destro del mouse sulla cartella che hai copiato e scegli Includi nel progetto.Right-click the folder that you copied and click Include In Project. Questo comando ti consente di includere file o cartelle in un progetto.That command is what we mean by "including" files or folders in a project. Ogni volta che copi un file o una cartella, fai clic su Aggiorna in Esplora soluzioni e quindi includi il file o la cartella nel progetto.Each time you copy a file or folder, click Refresh in Solution Explorer and then include the file or folder in the project. Non è necessario eseguire questa operazione per i file sostituiti nella destinazione.There's no need to do this for files that you're replacing in the destination.
  • Copiare la cartella contenente il file di origine del modello di visualizzazione (la cartella è \ ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • Copia MainPage.xaml e sostituisci il file nella destinazione.Copy MainPage.xaml and replace the file in the destination.

Possiamo mantenere il file App.xaml e il file App.xaml.cs generati da Visual Studio nel progetto di Windows 10.We can keep the App.xaml, and App.xaml.cs that Visual Studio generated for us in the Windows 10 project.

Modificare il codice sorgente e i file di markup appena copiati e modificare i riferimenti allo spazio dei nomi Bookstore1WPSL8 in Bookstore1Universal _ 10.Edit the source code and markup files that you just copied and change any references to the Bookstore1WPSL8 namespace to Bookstore1Universal_10. Per eseguire rapidamente questa operazione, usa la funzionalità Sostituisci nei file.A quick way to do that is to use the Replace In Files feature. Nel codice imperativo del file di origine del modello di visualizzazione sono necessarie queste modifiche per la conversione:In the imperative code in the view model source file, these porting changes are needed:

  • Sostituisci System.ComponentModel.DesignerProperties con DesignMode e quindi usa il comando Risolvi su di esso.Change System.ComponentModel.DesignerProperties to DesignMode and then use the Resolve command on it. Elimina la proprietà IsInDesignTool e usa IntelliSense per aggiungere il nome di proprietà corretto: DesignModeEnabled.Delete the IsInDesignTool property and use IntelliSense to add the correct property name: DesignModeEnabled.
  • Usa il comando Risolvi su ImageSource.Use the Resolve command on ImageSource.
  • Usa il comando Risolvi su BitmapImage.Use the Resolve command on BitmapImage.
  • Elimina using System.Windows.Media; e using System.Windows.Media.Imaging;.Delete using System.Windows.Media; and using System.Windows.Media.Imaging;.
  • Modificare il valore restituito dalla proprietà Bookstore1Universal _ 10. BookstoreViewModel. appName da "BOOKSTORE1WPSL8" a "Bookstore1Universal".Change the value returned by the Bookstore1Universal_10.BookstoreViewModel.AppName property from "BOOKSTORE1WPSL8" to "BOOKSTORE1UNIVERSAL".

In MainPage.xaml sono necessarie queste modifiche per la conversione:In MainPage.xaml, these porting changes are needed:

  • Cambia phone:PhoneApplicationPage in Page (non dimenticare le occorrenze nella sintassi dell'elemento proprietà).Change phone:PhoneApplicationPage to Page (don't forget the occurrences in property element syntax).
  • Elimina le dichiarazioni di prefisso dello spazio dei nomi phone e shell.Delete the phone and shell namespace prefix declarations.
  • Cambia "clr-namespace" in "using" nella dichiarazione del prefisso dello spazio dei nomi rimanente.Change "clr-namespace" to "using" in the remaining namespace prefix declaration.

Possiamo scegliere di correggere molto velocemente gli errori di compilazione del markup se vogliamo visualizzare i risultati al più presto, anche se ciò comporta la rimozione temporanea del markup.We can choose to correct markup compilation errors very cheaply if we want to see results soonest, even if that means temporarily removing markup. Ma teniamo traccia di cosa lasciamo indietro procedendo in questo modo.But, let's keep a record of the debt we accrue by doing so. In questo caso:Here it is in this case.

  1. Nell’elemento radice Page in MainPage.xaml elimina SupportedOrientations="Portrait".In the root Page element in MainPage.xaml, delete SupportedOrientations="Portrait".
  2. Nell’elemento radice Page in MainPage.xaml elimina Orientation="Portrait".In the root Page element in MainPage.xaml, delete Orientation="Portrait".
  3. Nell’elemento radice Page in MainPage.xaml elimina shell:SystemTray.IsVisible="True".In the root Page element in MainPage.xaml, delete shell:SystemTray.IsVisible="True".
  4. Nel modello di dati BookTemplate elimina i riferimenti agli stili  TextBlockPhoneTextExtraLargeStyle e PhoneTextSubtleStyle.In the BookTemplate data template, delete the references to the PhoneTextExtraLargeStyle and PhoneTextSubtleStyleTextBlock styles.
  5. In  StackPanelTitlePanel elimina i riferimenti agli stili  TextBlockPhoneTextNormalStyle e PhoneTextTitle1Style.In the TitlePanelStackPanel, delete the references to the PhoneTextNormalStyle and PhoneTextTitle1StyleTextBlock styles.

Lavoriamo prima di tutto all'interfaccia utente per la famiglia di dispositivi mobili. Possiamo poi considerare gli altri fattori di forma.Let's work on the UI for the mobile device family first, and we can consider other form factors after that. A questo punto puoi compilare ed eseguire l'app.You can build and run the app now. Ecco l'aspetto dell'app nell'emulatore di dispositivo mobile.Here's how it looks on the mobile emulator.

app uwp in un dispositivo mobile con le modifiche al codice sorgente iniziali

La visualizzazione e il modello di visualizzazione collaborano correttamente e il controllo ListBox funziona.The view and the view model are working together correctly, and the ListBox is functioning. Ci rimane fondamentalmente da mettere a punto gli stili e fare in modo che le immagini vengano visualizzate.We mostly just need to fix the styling and get the images to show up.

Risolvere i sospesi e interventi iniziali sugli stiliPaying off the debt items, and some initial styling

Per impostazione predefinita, sono supportati tutti gli orientamenti.By default, all orientations are supported. Il Windows Phone applicazione Silverlight è vincolato in modo esplicito solo al solo verticale, quindi gli elementi del debito # 1 e # 2 vengono pagati entrando nel manifesto del pacchetto dell'applicazione nel nuovo progetto e controllando il ritratto sotto gli orientamenti supportati.The Windows Phone Silverlight app explicitly constrains itself to portrait-only, though, so debt items #1 and #2 are paid off by going into the app package manifest in the new project and checking Portrait under Supported orientations.

Per questa app, # l'elemento 3 non è un debito poiché la barra di stato (in precedenza denominata barra di sistema) viene visualizzata per impostazione predefinita.For this app, item #3 is not a debt since the status bar (formerly called the system tray) is shown by default. Per gli elementi # 4 e # 5, è necessario trovare quattro stili di TEXTBLOCK piattaforma UWP (Universal Windows Platform) (UWP) che corrispondono agli stili di Windows Phone Silverlight utilizzati.For items #4 and #5, we need to find four Universal Windows Platform (UWP) TextBlock styles that correspond to the Windows Phone Silverlight styles that we were using. Puoi eseguire l’app di Silverlight per Windows Phone nell’emulatore e confrontarla in modalità affiancata con l’illustrazione nella sezione Testo.You can run the Windows Phone Silverlight app in the emulator and compare it side-by-side with the illustration in the Text section. Da questa operazione ed esaminando le proprietà degli stili di sistema di Silverlight per Windows Phone, possiamo ricavare questa tabella.From doing that, and from looking at the properties of the Windows Phone Silverlight system styles, we can make this table.

| Chiave di stile di Silverlight per Windows PhoneWindows Phone Silverlight style key | Chiave di stile UWPUWP style key | |-------------------------------------|------------------------| | PhoneTextExtraLargeStylePhoneTextExtraLargeStyle | TitleTextBlockStyleTitleTextBlockStyle | | PhoneTextSubtleStylePhoneTextSubtleStyle | SubtitleTextBlockStyleSubtitleTextBlockStyle | | PhoneTextNormalStylePhoneTextNormalStyle | CaptionTextBlockStyleCaptionTextBlockStyle | | PhoneTextTitle1StylePhoneTextTitle1Style | HeaderTextBlockStyleHeaderTextBlockStyle |   Per impostare questi stili puoi semplicemente digitarli nell'editor di markup o usare gli strumenti XAML di Visual Studio e impostarli senza digitare.To set those styles, you can just type them into the markup editor or you can use the Visual Studio XAML Tools and set them without typing a thing. A tale scopo, fai clic con il pulsante destro del mouse su un TextBlock e scegli Modifica stile > Applica risorsa.To do that, you right-click a TextBlock and click Edit Style > Apply Resource. Per eseguire questa operazione con i TextBlock nel modello di elemento, fai clic con il pulsante destro del mouse su ListBox e scegli Modifica Modelli aggiuntivi > Modifica Elementi generati (ItemTemplate).To do that with the TextBlocks in the item template, right click the ListBox and click Edit Additional Templates > Edit Generated Items (ItemTemplate).

Dietro gli elementi c'è uno sfondo bianco opaco all'80%, perché lo stile predefinito del controllo ListBox imposta lo sfondo sulla risorsa di sistema ListBoxBackgroundThemeBrush.There is an 80% opaque white background behind the items, because the default style of the ListBox control sets its background to the ListBoxBackgroundThemeBrush system resource. Per cancellare lo sfondo, imposta Background="Transparent" per ListBox.Set Background="Transparent" on the ListBox to clear that background. Per allineare a sinistra i TextBlock nel modello di elemento, modificalo ancora una volta come in precedenza e imposta Margin su "9.6,0" in entrambi i TextBlock.To left-align the TextBlocks in the item template, edit it again the same way as described above and set a Margin of "9.6,0" on both TextBlocks.

Al termine di questa operazione, a causa di modifiche correlate ai pixel di visualizzazione, dobbiamo individuare ogni dimensione fissa che non abbiamo modificato (margini, larghezza, altezza e così via) e moltiplicarla per 0,8.After that is done, because of changes related to view pixels, we need to go through and multiply any fixed size dimension that we haven’t yet changed (margins, width, height, etc) by 0.8. Le immagini, ad esempio, devono essere modificate da 70x70 pixel a 56x56 pixel.So, for example, the images should change from 70x70px to 56x56px.

Facciamo però in modo di eseguire il rendering di queste immagini prima di mostrare il risultato dei nostri interventi sugli stili.But, let’s get those images to render before we show the results of our styling.

Associazione di un'immagine a un modello di visualizzazioneBinding an Image to a view model

In Bookstore1WPSL8, funzionava così:In Bookstore1WPSL8, we did this:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

In Bookstore1Universal usiamo lo schema URI ms-appx.In Bookstore1Universal, we use the ms-appx URI scheme. Per riuscire a mantenere invariato il resto del codice, possiamo usare un overload diverso del costruttore System.Uri per inserire lo schema URI ms-appx in un URI di base e aggiungervi il resto del percorso.So that we can keep the rest of our code the same, we can use a different overload of the System.Uri constructor to put the ms-appx URI scheme in a base URI and append the rest of the path onto that. nel modo seguente:Like this:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

Applicazione di stili universaliUniversal styling

Ora è sufficiente apportare alcuni aggiustamenti di stile finali e verificare che l'app abbia un aspetto ottimale anche nei desktop e in altri fattori di forma, oltre ai dispositivi mobili.Now, we just need to make some final styling tweaks and confirm that the app looks good on desktop (and other) form factors as well as mobile. I passaggi sono elencati i seguito.The steps are below. Puoi anche usare i collegamenti all'inizio di questo argomento per scaricare i progetti e visualizzare i risultati di tutte le modifiche tra questo momento e la fine del case study.And you can use the links at the top of this topic to download the projects and see the results of all the changes between here and the end of the case study.

  • Per ridurre lo spazio tra gli elementi, trova il modello di dati BookTemplate in MainPage.xaml ed elimina l’attributo Margin dalla radice Grid.To tighten up the spacing between items, find the BookTemplate data template in MainPage.xaml and delete the Margin attribute from the root Grid.
  • Se vuoi lasciare un po’ più di spazio per il titolo della pagina, puoi reimpostare il margine inferiore di -5.6 su 0 nel titolo della pagina TextBlock.If you want to give the page title a little more breathing room, you can reset the bottom margin of -5.6 to 0 on the page title TextBlock.
  • Ora dobbiamo impostare lo sfondo di LayoutRoot sul valore predefinito corretto in modo che l’app abbia l’aspetto appropriato quando viene eseguita su tutti i dispositivi indipendentemente dal tema.Now, we need to set LayoutRoot's Background to the correct default value so that the app looks appropriate when running on all devices no matter what the theme is. Modifica lo sfondo da "Transparent" a "{ThemeResource ApplicationPageBackgroundThemeBrush}".Change it from "Transparent" to "{ThemeResource ApplicationPageBackgroundThemeBrush}".

Con un’app più sofisticata, questo sarebbe il punto in cui dovremmo fare riferimento alle indicazioni in Conversione per fattore di forma ed esperienza utente per un uso ottimale dei fattori di forma di ognuno dei tanti dispositivi su cui può essere eseguita l’app.With a more sophisticated app, this would be the point at which we'd use the guidance in Porting for form factor and user experience and really make optimal use of the form factor of each of the many devices the app can now run on. Per questa semplice app possiamo però fermarci qui e vedere quale aspetto ha l'app dopo l'ultima sequenza di operazioni per gli stili.But, for this simple app, we can stop here and see how the app looks after that last sequence of styling operations. In effetti ha lo stesso aspetto su dispositivi mobili e desktop, anche se non usa lo spazio in modo ottimale nei fattori di forma larghi (ma vedremo come intervenire in un case study successivo).It actually looks the same on mobile and desktop devices, although it's not making best use of space on wide form factors (but we'll investigate how to do that in a later case study).

Vedi Modifiche dei temi per scoprire come controllare il tema della tua app.See Theme changes to see how to control the theme of your app.

app di Windows 10 convertita

App di Windows 10 convertita su un dispositivo mobileThe ported Windows 10 app running on a Mobile device

Adattamento facoltativo per l'elenco a discesa per i dispositivi mobiliAn optional adjustment to the list box for Mobile devices

Quando l'app viene eseguita in un dispositivo mobile, lo sfondo di un elenco a discesa è chiaro per impostazione predefinita in entrambi i temi.When the app is running on a Mobile device, the background of a list box is light by default in both themes. Questo potrebbe essere lo stile che preferisci e, in questo caso, non c'è molto altro da fare.That may be the style that you prefer and, if so, then there's nothing more to do. I controlli, però, sono progettati in modo che sia possibile personalizzarne l'aspetto senza influire sul comportamento.But, controls are designed so that you can customize their look while leaving their behavior unaffected. Quindi, se vuoi che la casella di riepilogo sia scura nel tema scuro, come nell'app originale, segui queste istruzioni nella sezione relativa all'adattamento facoltativo.So, if you want the list box to be dark in the dark theme—the way the original app looked—then follow these instructions under "An optional adjustment".

ConclusioneConclusion

Questo case study illustra il processo di conversione di un'app molto semplice, talmente semplice da essere probabilmente poco realistica.This case study showed the process of porting a very simple app—arguably an unrealistically simple one. Ad esempio, i controlli elenco possono essere usati per la selezione o per stabilire un contesto per gli spostamenti: l'app passa a una pagina con altri dettagli relativi all'elemento toccato.For instance, list controls can be used for selection or for establishing a context for navigation; the app navigates to a page with more details about the item that was tapped. Questa specifica app non fa nulla con la selezione dell'utente e non prevede elementi di navigazione.This particular app does nothing with the user's selection, and it has no navigation. Anche così, il case study serve comunque a rompere il ghiaccio, come introduzione al processo di conversione e per dimostrare le tecniche importanti che puoi usare nelle app UWP reali.Even so, the case study served to break the ice, to introduce the porting process, and to demonstrate important techniques that you can use in real UWP apps.

Il case study successivo è Bookstore2, nel quale vedremo come accedere a dati raggruppati e visualizzarli.The next case study is Bookstore2, in which we look at accessing and displaying grouped data.