Estudo de caso Windows Phone Silverlight para UWP: Bookstore1Windows Phone Silverlight to UWP case study: Bookstore1

Este tópico apresenta um estudo de caso de portabilidade de um aplicativo Windows Phone Silverlight muito simples para um aplicativo Plataforma Universal do Windows (UWP) do 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. Com o Windows 10, é possível criar um único pacote do aplicativo que os clientes podem instalar em uma ampla variedade de dispositivos, e é isso o que faremos neste estudo de caso.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. Consulte Guia para aplicativos UWP.See Guide to UWP apps.

O aplicativo que portaremos consiste em uma ListBox associada a um modelo de exibição.The app we'll port consists of a ListBox bound to a view model. O modelo de exibição tem uma lista de livros que mostra o título, o autor e a capa do livro.The view model has a list of books that shows title, author, and book cover. As imagens da capa do livro têm Build Action definida como Content e Copy to Output Directory definida como Do not copy.The book cover images have Build Action set to Content and Copy to Output Directory set to Do not copy.

Os tópicos anteriores desta seção descrevem as diferenças entre as plataformas, e eles fornecem detalhes e orientações sobre o processo de portabilidade de vários aspectos de um aplicativo de marcação XAML, através da associação a um modelo de exibição, para acessar dados.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. Um estudo de caso visa complementar essa orientação, mostrando-o em ação em um exemplo real.A case study aims to complement that guidance by showing it in action in a real example. Os estudos de caso pressupõem que você tenha lido as orientações, já que elas não serão repetidas aqui.The case studies assume you've read the guidance, which they do not repeat.

Observação    Ao abrir _ o Bookstore1Universal 10 no Visual Studio, se você vir a mensagem "atualização do Visual Studio necessária", siga as etapas para selecionar um controle de versão da plataforma de destino em 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.

DownloadsDownloads

Baixe o app Windows Phone Silverlight Bookstore1WPSL8.Download the Bookstore1WPSL8 Windows Phone Silverlight app.

Baixe o _ aplicativo Bookstore1Universal 10 Windows 10.Download the Bookstore1Universal_10 Windows 10 app.

O aplicativo Windows Phone SilverlightThe Windows Phone Silverlight app

Aqui está a aparência do Bookstore1WPSL8, o aplicativo que vamos portar.Here’s what Bookstore1WPSL8—the app that we're going to port—looks like. Trata-se apenas de uma caixa de listagem de livros com rolagem vertical abaixo do cabeçalho do nome do aplicativo e do título da página.It's just a vertically-scrolling list box of books beneath the heading of the app's name and page title.

aparência do Bookstore1WPSL8

Portando para um projeto do Windows 10Porting to a Windows 10 project

É uma tarefa muito rápida criar um novo projeto no Visual Studio, copiar arquivos para ele a partir do Bookstore1WPSL8 e incluir os arquivos copiados no novo projeto.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. Comece criando um novo projeto Aplicativo em Branco (Universal do Windows).Start by creating a new Blank Application (Windows Universal) project. Nomeie-o Bookstore1Universal como _ 10.Name it Bookstore1Universal_10. Esses são os arquivos a serem copiados de Bookstore1WPSL8 para Bookstore1Universal _ 10.These are the files to copy over from Bookstore1WPSL8 to Bookstore1Universal_10.

  • Copie a pasta que contém a imagem da capa do livro arquivos PNG (a pasta é \ assets \ CoverImages).Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). Depois de copiar a pasta, no Gerenciador de Soluções, verifique se Mostrar Todos os Arquivos está ativada.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. Clique com o botão direito do mouse na pasta que você copiou e clique em Incluir no Projeto.Right-click the folder that you copied and click Include In Project. Esse comando é o que chamamos de "incluir" arquivos ou pastas em um projeto.That command is what we mean by "including" files or folders in a project. Sempre que você copia um arquivo ou uma pasta, clique em Atualizar no Gerenciador de Soluções e inclua o arquivo ou a pasta no projeto.Each time you copy a file or folder, click Refresh in Solution Explorer and then include the file or folder in the project. Não é preciso fazer isso para os arquivos que você está substituindo no destino.There's no need to do this for files that you're replacing in the destination.
  • Copie a pasta que contém o arquivo de origem do modelo de exibição (a pasta é \ ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • Copie MainPage.xaml e substitua o arquivo no destino.Copy MainPage.xaml and replace the file in the destination.

Podemos manter os arquivos App.xaml e App.xaml.cs que o Visual Studio gerou para nós no projeto do Windows 10.We can keep the App.xaml, and App.xaml.cs that Visual Studio generated for us in the Windows 10 project.

Edite o código-fonte e os arquivos de marcação que você acabou de copiar e altere todas as referências para o namespace Bookstore1WPSL8 para Bookstore1Universal _ 10.Edit the source code and markup files that you just copied and change any references to the Bookstore1WPSL8 namespace to Bookstore1Universal_10. Uma maneira rápida de fazer isso é usar o recurso Substituir nos Arquivos.A quick way to do that is to use the Replace In Files feature. No código imperativo no arquivo de origem do modelo de exibição, são necessárias estas alterações de portabilidade:In the imperative code in the view model source file, these porting changes are needed:

  • Mude System.ComponentModel.DesignerProperties para DesignMode e, em seguida, use o comando Resolver.Change System.ComponentModel.DesignerProperties to DesignMode and then use the Resolve command on it. Exclua a propriedade IsInDesignTool e use o IntelliSense para adicionar o nome de propriedade correto: DesignModeEnabled.Delete the IsInDesignTool property and use IntelliSense to add the correct property name: DesignModeEnabled.
  • Use o comando Resolver em ImageSource.Use the Resolve command on ImageSource.
  • Use o comando Resolver em BitmapImage.Use the Resolve command on BitmapImage.
  • Exclua using System.Windows.Media; e using System.Windows.Media.Imaging;.Delete using System.Windows.Media; and using System.Windows.Media.Imaging;.
  • Altere o valor retornado pela propriedade Bookstore1Universal _ 10. BookstoreViewModel. AppName de "BOOKSTORE1WPSL8" para "Bookstore1Universal".Change the value returned by the Bookstore1Universal_10.BookstoreViewModel.AppName property from "BOOKSTORE1WPSL8" to "BOOKSTORE1UNIVERSAL".

No MainPage.xaml, são necessárias estas alterações de portabilidade:In MainPage.xaml, these porting changes are needed:

  • Altere phone:PhoneApplicationPage para Page (não se esqueça das ocorrências na sintaxe do elemento de propriedade).Change phone:PhoneApplicationPage to Page (don't forget the occurrences in property element syntax).
  • Exclua as declarações de prefixo de namespace phone e shell.Delete the phone and shell namespace prefix declarations.
  • Mude "clr-namespace" para "using" na declaração de prefixo de namespace restante.Change "clr-namespace" to "using" in the remaining namespace prefix declaration.

Podemos optar por corrigir erros de compilação de marcação de maneira bem barata caso queiramos ver os resultados o mais cedo possível, mesmo que isso signifique remover temporariamente a marcação.We can choose to correct markup compilation errors very cheaply if we want to see results soonest, even if that means temporarily removing markup. Porém, vamos manter um registro do débito que acumulamos fazendo isso.But, let's keep a record of the debt we accrue by doing so. Aqui está ele neste caso.Here it is in this case.

  1. No elemento raiz Página em MainPage.xaml, exclua SupportedOrientations="Portrait".In the root Page element in MainPage.xaml, delete SupportedOrientations="Portrait".
  2. No elemento raiz Página em MainPage.xaml, exclua Orientation="Portrait".In the root Page element in MainPage.xaml, delete Orientation="Portrait".
  3. No elemento raiz Página em MainPage.xaml, exclua shell:SystemTray.IsVisible="True".In the root Page element in MainPage.xaml, delete shell:SystemTray.IsVisible="True".
  4. No modelo de dados BookTemplate, exclua as referências aos estilos  TextBlockPhoneTextExtraLargeStyle e PhoneTextSubtleStyle.In the BookTemplate data template, delete the references to the PhoneTextExtraLargeStyle and PhoneTextSubtleStyleTextBlock styles.
  5. No TitlePanelStackPanel, exclua as referências aos estilos  TextBlockPhoneTextNormalStyle e PhoneTextTitle1Style.In the TitlePanelStackPanel, delete the references to the PhoneTextNormalStyle and PhoneTextTitle1StyleTextBlock styles.

Vamos trabalhar na interface do usuário para a família de dispositivos móveis primeiro, depois podemos considerar outros fatores forma.Let's work on the UI for the mobile device family first, and we can consider other form factors after that. Você pode compilar e executar o aplicativo agora.You can build and run the app now. Veja como é a aparência no emulador do dispositivo móvel.Here's how it looks on the mobile emulator.

o aplicativo UWP no dispositivo móvel com as alterações de código-fonte iniciais

O modo de exibição e o modelo de exibição estão funcionando corretamente juntos, e ListBox está funcionando.The view and the view model are working together correctly, and the ListBox is functioning. Basicamente precisamos corrigir o estilo e fazer com que as imagens apareçam.We mostly just need to fix the styling and get the images to show up.

Saldando os itens de débito e alguns estilos iniciaisPaying off the debt items, and some initial styling

Por padrão, todas as orientações têm suporte.By default, all orientations are supported. O Windows Phone aplicativo do Silverlight se restringe explicitamente a apenas retrato, no entanto, os itens # de débito 1 e # 2 são pagos ao entrar no manifesto do pacote do aplicativo no novo projeto e verificar retrato em orientações com suporte.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.

Para este aplicativo, o item # 3 não é um débito, pois a barra de status (anteriormente chamada de bandeja do sistema) é mostrada por padrão.For this app, item #3 is not a debt since the status bar (formerly called the system tray) is shown by default. Para os itens # 4 e # 5, precisamos encontrar quatro plataforma universal do Windows (UWP) estilos TextBlock que correspondam aos estilos Windows Phone Silverlight que estávamos usando.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. É possível executar o aplicativo do Windows Phone Silverlight no emulador e compará-lo lado a lado com a ilustração na seção Texto.You can run the Windows Phone Silverlight app in the emulator and compare it side-by-side with the illustration in the Text section. Ao fazer isso e examinar as propriedades dos estilos de sistema do Windows Phone Silverlight, podemos criar esta tabela.From doing that, and from looking at the properties of the Windows Phone Silverlight system styles, we can make this table.

| Chave de estilo do Windows Phone SilverlightWindows Phone Silverlight style key | Chave de estilo da UWPUWP style key | |-------------------------------------|------------------------| | PhoneTextExtraLargeStylePhoneTextExtraLargeStyle | TitleTextBlockStyleTitleTextBlockStyle | | PhoneTextSubtleStylePhoneTextSubtleStyle | SubtitleTextBlockStyleSubtitleTextBlockStyle | | PhoneTextNormalStylePhoneTextNormalStyle | CaptionTextBlockStyleCaptionTextBlockStyle | | PhoneTextTitle1StylePhoneTextTitle1Style | HeaderTextBlockStyleHeaderTextBlockStyle |   Para definir esses estilos, basta digitá-los no editor de marcação ou usar as ferramentas de XAML do Visual Studio e defini-los sem digitar nada.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. Para fazer isso, clique com o botão direito do mouse em um TextBlock e clique em Editar Estilo > Aplicar Recurso.To do that, you right-click a TextBlock and click Edit Style > Apply Resource. Para fazer isso com os TextBlocks no modelo de item, clique com o botão direito do mouse em ListBox, depois clique em Edit Additional Templates > Edit Generated Items (ItemTemplate).To do that with the TextBlocks in the item template, right click the ListBox and click Edit Additional Templates > Edit Generated Items (ItemTemplate).

Existe uma tela de fundo branca 80% opaca atrás dos itens, pois o estilo padrão do controle ListBox define sua tela de fundo como o recurso do 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. Defina Background="Transparent" na ListBox para limpar a tela de fundo.Set Background="Transparent" on the ListBox to clear that background. Para alinhar à esquerda os TextBlocks no modelo de item, edite-o novamente conforme descrito acima e defina uma Margin de "9.6,0" em ambos os TextBlocks.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.

Depois disso, como muda em relação aos pixels de visualização, precisamos avançar e multiplicar qualquer dimensão de tamanho fixo que ainda não tenha sido alterada (margens, largura, altura etc.) por 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. Assim, por exemplo, as imagens devem ser alteradas de 70x70 px para 56x56 px.So, for example, the images should change from 70x70px to 56x56px.

Porém, renderizemos essas imagens antes de mostrar os resultados do nosso estilo.But, let’s get those images to render before we show the results of our styling.

Associando uma imagem a um modelo de exibiçãoBinding an Image to a view model

Em Bookstore1WPSL8, fizemos isto: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));

No Bookstore1Universal, usamos o esquema de URI ms-appx.In Bookstore1Universal, we use the ms-appx URI scheme. Assim, podemos manter o restante do código, usar uma sobrecarga diferente do construtor System.Uri para colocar o esquema URI ms-appx em um URI base e acrescentar o restante do caminho a ele.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. Dessa forma: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));

Estilo universalUniversal styling

Agora só precisamos fazer alguns ajustes no estilo final e confirmar se a aparência do aplicativo está boa nos fatores forma do desktop e do dispositivo móvel (e outros).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. As etapas estão abaixo.The steps are below. E você pode usar os links do início deste tópico para baixar os projetos e ver os resultados de todas as alterações feitas aqui até o fim do estudo de caso.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.

  • Para restringir o espaçamento entre os itens, localize o modelo de dados BookTemplate em MainPage.xaml e exclua o atributo Margin da Grid raiz.To tighten up the spacing between items, find the BookTemplate data template in MainPage.xaml and delete the Margin attribute from the root Grid.
  • Caso queira dar ao título da página um pouco mais de espaço, você pode redefinir a margem inferior de -5.6 para 0 no TextBlock do título da página.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.
  • Agora precisamos definir o plano de fundo de LayoutRoot como o valor padrão correto de maneira que o aplicativo tenha a aparência apropriada quando for executado em todos os dispositivos, independentemente do 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. Altere-o de "Transparent" para "{ThemeResource ApplicationPageBackgroundThemeBrush}".Change it from "Transparent" to "{ThemeResource ApplicationPageBackgroundThemeBrush}".

Com um aplicativo mais sofisticado, esse seria o momento em que usaríamos as orientações em Portabilidade para o fator forma e a experiência do usuário e realmente usaríamos da maneira ideal o fator forma de cada um dos muitos dispositivos em que o aplicativo pode ser executado agora.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. Porém, para esse aplicativo simples, podemos parar aqui e ver a aparência dele após essa última sequência de operações de estilo.But, for this simple app, we can stop here and see how the app looks after that last sequence of styling operations. Na verdade, ele tem a mesma aparência em dispositivos móveis e de desktop, embora não esteja fazendo o melhor uso do espaço em fatores forma grandes (mas vamos investigar como fazer isso em um estudo de caso posterior).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).

Consulte Alterações de tema para ver como controlar o tema do seu aplicativo.See Theme changes to see how to control the theme of your app.

o aplicativo do windows 10 portado

O aplicativo do Windows 10 portado em execução em um dispositivo móvelThe ported Windows 10 app running on a Mobile device

Um ajuste opcional na caixa de listagem de dispositivos móveisAn optional adjustment to the list box for Mobile devices

Quando o aplicativo é executado em um dispositivo móvel, o plano de fundo de uma caixa de listagem fica claro por padrão em ambos os temas.When the app is running on a Mobile device, the background of a list box is light by default in both themes. Esse pode ser o estilo de sua preferência e, em caso positivo, não há mais nada a fazer.That may be the style that you prefer and, if so, then there's nothing more to do. Porém, os controles são projetados de maneira que seja possível personalizar a aparência deles sem afetar o comportamento.But, controls are designed so that you can customize their look while leaving their behavior unaffected. Portanto, se você quiser que a caixa de listagem fique escura no tema escuro, a aparência que o app original tinha, siga estas instruções em "Um ajuste opcional".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".

ConclusãoConclusion

Este estudo de caso mostrou o processo de portabilidade de um app muito simples, sem dúvida nenhuma, um app inacreditavelmente simples.This case study showed the process of porting a very simple app—arguably an unrealistically simple one. Por exemplo, controles de lista podem ser usados para a seleção ou para o estabelecimento de um contexto de navegação; o aplicativo navega até uma página com mais detalhes sobre o item que foi tocado.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. Este aplicativo específico não faz nada com a seleção do usuário, e ele não tem navegação.This particular app does nothing with the user's selection, and it has no navigation. Mesmo assim, o estudo de caso serviu para quebrar o gelo, apresentar o processo de portabilidade e demonstrar técnicas importantes que podem ser usadas em aplicativos UWP reais.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.

O próximo estudo de caso é o Bookstore2, no qual analisaremos o acesso e a exibição de dados agrupados.The next case study is Bookstore2, in which we look at accessing and displaying grouped data.