Crear una aplicación para Plataforma universal de Windows del lector de blogs (C++)

Aquí tienes una explicación completa de cómo usar C++ y XAML para desarrollar una aplicación para Plataforma universal de Windows (UWP) que se puede implementar en Windows 10. La aplicación puede leer blogs de fuentes RSS 2.0 o Atom 1.0.

Este tutorial supone que ya estás familiarizado con los conceptos de la sección Crear la primera aplicación de la Tienda Windows con C++.

Para estudiar la versión acabada de esta aplicación, puedes descargarla del sitio web de la Galería de código de MSDN.

En este tutorial usaremos Visual Studio Community 2015 o posterior. Si usas otra edición de Visual Studio, los comandos de menú podrían ser ligeramente diferentes.

Para acceder a tutoriales en otros lenguajes de programación, consulta:

• Crear una aplicación "Hello World" (JavaScript)

• Crear una aplicación "Hello World" (C#/VB)

Objetivos

Este tutorial está diseñado para que aprendas cómo crear aplicaciones de la Tienda Windows de varias páginas y cómo y cuándo usar las extensiones de componente de Visual C++ (C++/CX) para simplificar el trabajo de codificación en función de Windows Runtime. También aprenderás a usar la clase concurrency::task para consumir API de Windows Runtime asincrónicas.

La aplicación SimpleBlogReader tiene estas características:

• Accede a datos de fuentes RSS y Atom a través de Internet.
• Muestra una lista de fuentes y títulos de fuentes.
• Proporciona dos formas de leer una publicación: como texto simple o como página web.
• Admite la Administración del ciclo de vida de los procesos (PLM), y guarda y vuelve a cargar correctamente su estado si el sistema la apaga mientras hay otra tarea en primer plano.
• Se adapta a los diferentes tamaños de ventana y orientaciones de dispositivo (horizontal o vertical).
• Los usuarios pueden agregar y quitar las fuentes.

Parte 1: configurar el proyecto

Para empezar, usaremos la plantilla de aplicación vacía (Windows universal) de C++ para crear un proyecto.

Para crear un proyecto

• En Visual Studio, elige Archivo > Nuevo > Proyecto, selecciona Instalado > Visual C++ > Windows > Universal. En el panel central, elige y luego selecciona la plantilla Aplicación vacía (Windows universal). Pon el nombre "SimpleBlogReader" a la solución. Para obtener instrucciones más detalladas, consulta Crear una aplicación "Hello, world" (C++).

Empecemos por agregar todas las páginas. Es más fácil agregarlas todas a la vez ya que, al empezar a escribir el código, cada página debe tener una directiva #include con la página a la que navega.

Agregar las páginas de la aplicación de Windows

1. En realidad, el primer paso es destruir. Haz clic con el botón derecho en MainPage.xaml y elige Quitar. A continuación, haz clic en Eliminar para eliminar permanentemente el archivo y los archivos de código subyacente. Se trata de un tipo de página en blanco que no admite la navegación que necesitamos. Ahora haz clic con el botón secundario en el nodo de proyecto y elige Agregar > Nuevo elemento.
2. En el panel izquierdo elige XAML y en el panel central elige Página de elementos. Llámalo MainPage.xaml y haz clic en Aceptar. Verás un cuadro de mensaje en el que se te pregunta si estás de acuerdo en agregar archivos nuevos al proyecto. Haz clic en Sí. En el código de inicio debemos hacer referencia a las clases SuspensionManager y NavigationHelper que están definidas en esos archivos, y que Visual Studio pone en una nueva carpeta común.
3. Agrega un SplitPage y acepta el nombre predeterminado.
4. Agrega un BasicPage y llámalo WebViewerPage.

Más tarde agregaremos los elementos de interfaz de usuario a esas páginas.

Agregar las páginas de la aplicación para Windows Phone

1. En el Explorador de soluciones, expande el proyecto de Windows Phone 8.1. Haz clic con el botón secundario en MainPage.xaml, elige Quitar > Eliminar permanentemente.
2. Agrega un nuevo XAML de Página básica y llámalo MainPage.xaml. Haz clic en Sí al igual que en el proyecto de Windows.
3. Observarás que la variedad de plantillas de página es más limitada en el proyecto del teléfono; esto se debe a que en esta aplicación solamente utilizamos las páginas básicas. Agrega otras tres páginas básicas y llámalas FeedPage, TextViewerPage y WebViewerPage.

Parte 2: Crear un modelo de datos

Las aplicaciones de la Tienda basadas en plantillas de Visual Studio encarnan en cierto modo una arquitectura MVVM. En nuestra aplicación, el modelo se compone de clases que encapsulan las fuentes del blog. Cada página XAML de la aplicación representa una vista particular de los datos. Asimismo, cada clase de página tiene su propio modelo de vista, que es una propiedad denominada DefaultViewModel y de tipo Map<String^,Object^>. Esta asignación almacena los datos a los que están enlazados los controles XAML de la página y actúa como contexto de datos de la página.

Nuestro modelo consta de tres clases. La clase FeedData representa el URI de nivel superior y los metadatos para una fuente de blog. La fuente de https://blogs.windows.com/windows/b/buildingapps/rss.aspx es un ejemplo de lo que se encapsula en un FeedData. Una fuente tiene una lista de entradas de blog, representadas como objetos FeedItem. Cada FeedItem representa una entrada y contiene el título, el contenido, el URI y otros metadatos. La entrada que aparece en https://blogs.windows.com/windows/b/buildingapps/archive/2014/05/28/using-the-windows-phone-emulator-for-testing-apps-with-geofencing.aspx es un ejemplo de FeedItem. La primera página de nuestra aplicación es una vista de las fuentes, la segunda página es una vista de los FeedItems de una única fuente y las dos últimas páginas ofrecen vistas diferentes de una sola entrada: como texto sin formato o como página web.

La clase FeedDataSource contiene una colección de elementos FeedData junto con métodos para descargarlos.

En resumen:

• FeedData contiene información sobre una fuente Atom o RSS.

• FeedItem contiene información sobre las entradas de blog individuales en la fuente.

• FeedDataSource contiene métodos para descargar las fuentes e inicializar nuestras clases de datos.

Definimos estas clases como clases de referencia pública (public ref class) que habilitan el enlace de datos, ya que los controles XAML no pueden interactuar con clases C++ estándar. El atributo Bindable lo utilizamos para indicarle al compilador XAML que queremos enlazar de forma dinámica con instancias de esos tipos. En una clase de referencia pública, los miembros de datos públicos se exponen como propiedades. Las propiedades que no tienen lógica especial no necesitan un getter ni un setter especificado por el usuario; el compilador los proporcionará. En la clase FeedData, observe cómo se utiliza Windows::Foundation::Collections::IVector para exponer un tipo de colección pública. Usamos la clase Platform::Collections::Vector de forma interna como el tipo determinado que implementa IVector.

Tanto el proyecto de Windows como el de Windows Phone utilizarán el mismo modelo de datos, así que pondremos las clases en el proyecto compartido.

Para crear clases de datos personalizadas

1. En el Explorador de soluciones, accede al menú contextual del nodo de proyecto SimpleBlogReader.Shared y elige Agregar > Nuevo elemento. Selecciona la opción Archivo de encabezado (.h) y asígnale el nombre FeedData.h.

2. Abre FeedData.h y pega en su interior el siguiente código. Observa la directiva #include de "pch.h": es nuestro encabezado precompilado y ahí pondremos los encabezados de sistema que prácticamente no cambian. De forma predeterminada, pch.h incluye collection.h, que es necesario para el tipo Platform::Collections::Vector, y ppltasks.h, que es necesario para concurrency::task y los tipos relacionados. Estos encabezados incluyen los <string> y <vector> necesarios para la aplicación, así que no tenemos que incluirlos explícitamente.

   //feeddata.h
   
   #pragma once
   #include "pch.h"
   
   namespace SimpleBlogReader
   {
   
       namespace WFC = Windows::Foundation::Collections;
       namespace WF = Windows::Foundation;
       namespace WUIXD = Windows::UI::Xaml::Documents;
       namespace WWS = Windows::Web::Syndication;
   
   
       /// <summary>
       /// To be bindable, a class must be defined within a namespace
       /// and a bindable attribute needs to be applied.
       /// A FeedItem represents a single blog post.
       /// </summary>
       [Windows::UI::Xaml::Data::Bindable]
       public ref class FeedItem sealed
       {
       public:
           property Platform::String^ Title;
           property Platform::String^ Author;
           property Platform::String^ Content;
           property Windows::Foundation::DateTime PubDate;
           property Windows::Foundation::Uri^ Link;
   
       private:
           ~FeedItem(void){}
       };
   
       /// <summary>
       /// A FeedData object represents a feed that contains 
       /// one or more FeedItems. 
       /// </summary>
       [Windows::UI::Xaml::Data::Bindable]
       public ref class FeedData sealed
       {
       public:
           FeedData(void)
           {
               m_items = ref new Platform::Collections::Vector<FeedItem^>();
           }
   
           // The public members must be Windows Runtime types so that
           // the XAML controls can bind to them from a separate .winmd.
           property Platform::String^ Title;
           property WFC::IVector<FeedItem^>^ Items
           {
               WFC::IVector<FeedItem^>^ get() { return m_items; }
           }
   
           property Platform::String^ Description;
           property Windows::Foundation::DateTime PubDate;
           property Platform::String^ Uri;
   
       private:
           ~FeedData(void){}
           Platform::Collections::Vector<FeedItem^>^ m_items;
       };
   }
   

   Las clases son ref porque las clases XAML de Windows en tiempo de ejecución necesitan interactuar con ellas para enlazar datos a la interfaz de usuario. El atributo [Bindable] de esas clases también es necesario para el enlace de datos. Sin ese atributo, el mecanismo de enlace no las verá.

Parte 3: Descargar los datos

La clase FeedDataSource contiene los métodos que descargan las fuentes y tiene además otros métodos auxiliares. También contiene la colección de las fuentes descargadas que se agrega al valor "Items" en el DefaultViewModel de la página de la aplicación principal. FeedDataSource utiliza la clase Windows::Web::Syndication::SyndicationClient para realizar la descarga. Dado que las operaciones de red pueden llevar bastante tiempo, estas operaciones son asincrónicas. Cuando haya finalizado la descarga de una fuente, el objeto FeedData se inicializa y se agrega a la colección FeedDataSource::Feeds. Este es un IObservable<T>, lo que significa que la interfaz de usuario recibirá una notificación cuando se agregue un elemento y mostrará dicho elemento en la página principal. Para las operaciones asincrónicas utilizamos la clase concurrency::task, las clases relacionadas y los métodos de ppltasks.h. La función create_task se utiliza para encapsular las llamadas de función IAsyncOperation e IAsyncAction en la API de Windows. La función miembro task::then se utiliza para ejecutar código que debe esperar hasta que se complete la tarea.

Una característica interesante de la aplicación es que los usuarios no tienen que esperar a que todas las fuentes se descarguen. Pueden hacer clic en una fuente tan pronto como aparece e ir a una nueva página que muestra todos los elementos de esa fuente. Este ejemplo de interfaz de usuario "rápida y fluida" es posible gracias a que una gran parte del trabajo se realiza en subprocesos en segundo plano. La veremos en acción después de agregar la página XAML principal.

No obstante, las operaciones asincrónicas son más complejas: la rapidez y la fluidez no son "gratuitas". Si has leído los tutoriales anteriores, sabrás que el sistema puede finalizar una aplicación que no está activa con el fin de liberar memoria y luego restaurarla cuando el usuario vuelve a ella. Cuando cerramos nuestra aplicación no guardamos todos los datos de fuentes, ya que esto ocuparía mucho almacenamiento y podrían acumularse datos obsoletos. Por ello, siempre descargamos las fuentes al iniciar. Sin embargo, eso nos obliga a tener en cuenta el escenario en el que la aplicación se reanuda e intenta mostrar de inmediato un objeto FeedData que todavía no ha acabado de descargarse. Tenemos que asegurarnos que no se intentan mostrar datos hasta que no están disponibles. En este caso no podemos usar el método then, pero sí un task_completed_event. Este evento evitará que el código trate de acceder a un objeto FeedData hasta que ese objeto se haya cargado por completo.

1. Agregar la clase FeedDataSource a FeedData.h., como parte del espacio de nombres SimpleBlogReader:

       /// <summary>
       /// A FeedDataSource represents a collection of FeedData objects
       /// and provides the methods to retrieve the stores URLs and download 
       /// the source data from which FeedData and FeedItem objects are constructed.
       /// This class is instantiated at startup by this declaration in the 
       /// ResourceDictionary in app.xaml: <local:FeedDataSource x:Key="feedDataSource" /> 
       /// </summary>
       [Windows::UI::Xaml::Data::Bindable]
       public ref class FeedDataSource sealed
       {
       private:
           Platform::Collections::Vector<FeedData^>^ m_feeds;
           FeedData^ GetFeedData(Platform::String^ feedUri, WWS::SyndicationFeed^ feed);
           concurrency::task<WFC::IVector<Platform::String^>^> GetUserURLsAsync();
           void DeleteBadFeedHandler(Windows::UI::Popups::UICommand^ command);
   
       public:
           FeedDataSource();
           property Windows::Foundation::Collections::IObservableVector<FeedData^>^ Feeds
           {
               Windows::Foundation::Collections::IObservableVector<FeedData^>^ get()
               {
                   return this->m_feeds;
               }
           }
           property Platform::String^ CurrentFeedUri;
           void InitDataSource();        
   
       internal:
           // This is used to prevent SplitPage from prematurely loading the last viewed page on resume.
           concurrency::task_completion_event<FeedData^> m_LastViewedFeedEvent;
           concurrency::task<void> RetrieveFeedAndInitData(Platform::String^ url, WWS::SyndicationClient^ client);
       };
   

2. Ahora crea un archivo llamado FeedData.cpp en el proyecto compartido y pégalo en este código:

   #include "pch.h"
   #include "FeedData.h"
   
   using namespace std;
   using namespace concurrency;
   using namespace SimpleBlogReader;
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::Web::Syndication;
   using namespace Windows::Storage;
   using namespace Windows::Storage::Streams;
   
   FeedDataSource::FeedDataSource()
   {
          m_feeds = ref new Vector<FeedData^>();
          CurrentFeedUri = "";
   }
   
   ///<summary>
   /// Uses SyndicationClient to get the top-level feed object, then initializes 
   /// the app's data structures. In the case of a bad feed URL, the exception is 
   /// caught and the user can permanently delete the feed.
   ///</summary>
   task<void> FeedDataSource::RetrieveFeedAndInitData(String^ url, SyndicationClient^ client)
   {
          // Create the async operation. feedOp is an 
          // IAsyncOperationWithProgress<SyndicationFeed^, RetrievalProgress>^
          auto feedUri = ref new Uri(url);
          auto feedOp = client->RetrieveFeedAsync(feedUri);
   
          // Create the task object and pass it the async operation.
          // SyndicationFeed^ is the type of the return value that the feedOp 
          // operation will pass to the continuation. The continuation can run
          // on any thread.
          return create_task(feedOp).then([this, url](SyndicationFeed^ feed) -> FeedData^
          {
                 return GetFeedData(url, feed);
          }, concurrency::task_continuation_context::use_arbitrary())
   
                 // Append the initialized FeedData object to the items collection.
                 // This has to happen on the UI thread. By default, a .then
                 // continuation runs in the same apartment that it was called on.
                 // We can append safely to the Vector from multiple threads
                 // without taking an explicit lock.
                 .then([this, url](FeedData^ fd)
          {
                 if (fd->Uri == CurrentFeedUri)
                 {
                        // By setting the event we tell the resuming SplitPage the data
                        // is ready to be consumed.
                        m_LastViewedFeedEvent.set(fd);
                 }
   
                 m_feeds->Append(fd);
   
          })
   
                 // The last continuation serves as an error handler.
                 // get() will surface any unhandled exceptions in this task chain.
                 .then([this, url](task<void> t)
          {
                 try
                 {
                        t.get();
                 }
   
                 catch (Platform::Exception^ e)
                 {
                        // Sometimes a feed URL changes(I'm talking to you, Windows blogs!)
                        // When that happens, or when the users pastes in an invalid URL or a 
                        // URL is valid but the content is malformed somehow, an exception is 
                        // thrown in the task chain before the feed is added to the Feeds 
                        // collection. The only recourse is to stop trying to read the feed.
                        // That means deleting it from the feeds.txt file in local settings.
                        SyndicationErrorStatus status = SyndicationError::GetStatus(e->HResult);
                        String^ msgString;
   
                        // Define the action that will occur when the user presses the popup button.
                        auto handler = ref new Windows::UI::Popups::UICommandInvokedHandler(
                              [this, url](Windows::UI::Popups::IUICommand^ command)
                        {
                              auto app = safe_cast<App^>(App::Current);
                              app->DeleteUrlFromFeedFile(url);
                        });
   
                        // Display a message that hopefully is helpful.
                        if (status == SyndicationErrorStatus::InvalidXml)
                        {
                              msgString = "There seems to be a problem with the formatting in this feed: ";
                        }
   
                        if (status == SyndicationErrorStatus::Unknown)
                        {
                              msgString = "I can't load this feed (is the URL correct?): ";
                        }
   
                        // Show the popup.
                        auto msg = ref new Windows::UI::Popups::MessageDialog(
                              msgString + url);
                        auto cmd = ref new Windows::UI::Popups::UICommand(
                              ref new String(L"Forget this feed."), handler, 1);
                        msg->Commands->Append(cmd);
                        msg->ShowAsync();
                 }
          }); //end task chain
   }
   
   ///<summary>
   /// Retrieve the data for each atom or rss feed and put it into our custom data structures.
   ///</summary>
   void FeedDataSource::InitDataSource()
   {
          // Hard code some feeds for now. Later in the tutorial we'll improve this.
          auto urls = ref new Vector<String^>();
          urls->Append(L"http://sxp.microsoft.com/feeds/3.0/devblogs");
          urls->Append(L"https://blogs.windows.com/windows/b/bloggingwindows/rss.aspx");
          urls->Append(L"https://azure.microsoft.com/blog/feed");
   
          // Populate the list of feeds.
          SyndicationClient^ client = ref new SyndicationClient();
          for (auto url : urls)
          {
                 RetrieveFeedAndInitData(url, client);
          }
   }
   
   ///<summary>
   /// Creates our app-specific representation of a FeedData.
   ///</summary>
   FeedData^ FeedDataSource::GetFeedData(String^ feedUri, SyndicationFeed^ feed)
   {
          FeedData^ feedData = ref new FeedData();
   
          // Store the Uri now in order to map completion_events 
          // when resuming from termination.
          feedData->Uri = feedUri;
   
          // Get the title of the feed (not the individual posts).
          // auto app = safe_cast<App^>(App::Current);
          TextHelper^ helper = ref new TextHelper();
   
          feedData->Title = helper->UnescapeText(feed->Title->Text);
          if (feed->Subtitle != nullptr)
          {
                 feedData->Description = helper->UnescapeText(feed->Subtitle->Text);
          }
   
          // Occasionally a feed might have no posts, so we guard against that here.
          if (feed->Items->Size > 0)
          {
                 // Use the date of the latest post as the last updated date.
                 feedData->PubDate = feed->Items->GetAt(0)->PublishedDate;
   
                 for (auto item : feed->Items)
                 {
                        FeedItem^ feedItem;
                        feedItem = ref new FeedItem();
                        feedItem->Title = helper->UnescapeText(item->Title->Text);
                        feedItem->PubDate = item->PublishedDate;
   
                        //Only get first author in case of multiple entries.
                        item->Authors->Size > 0 ? feedItem->Author =
                              item->Authors->GetAt(0)->Name : feedItem->Author = L"";
   
                        if (feed->SourceFormat == SyndicationFormat::Atom10)
                        {
                              // Sometimes a post has only the link to the web page
                              if (item->Content != nullptr)
                              {
                                     feedItem->Content = helper->UnescapeText(item->Content->Text);
                              }
                              feedItem->Link = ref new Uri(item->Id);
                        }
                        else
                        {
                              feedItem->Content = item->Summary->Text;
                              feedItem->Link = item->Links->GetAt(0)->Uri;
                        }
                        feedData->Items->Append(feedItem);
                 };
          }
          else
          {
                 feedData->Description = "NO ITEMS AVAILABLE." + feedData->Description;
          }
   
          return feedData;
   
   } //end GetFeedData
   

3. Ahora pongamos una instancia de FeedDataSource en nuestra aplicación. En app.xaml.h, agrega una directiva #include para FeedData.h para que los tipos sean visibles.

       #include "FeedData.h"
   

   • En el proyecto compartido, en App.xaml, agrega un nodo Application.Resources e incluye en él una referencia a FeedDataSource de forma que la página tenga esta apariencia:

         <Application
             x:Class="SimpleBlogReader.App"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:SimpleBlogReader">
     
             <Application.Resources>
                 <local:FeedDataSource x:Key="feedDataSource" />    
             </Application.Resources>
     </Application>
     

     Este marcado hará que, al iniciarse la aplicación, se cree un objeto FeedDataSource al que se puede acceder desde cualquier página de la aplicación. Cuando se genere el evento OnLaunched, el objeto de aplicación llamará a InitDataSource para que la instancia de feedDataSource comience a descargar todos sus datos.

     El proyecto no se compilará todavía porque necesitamos agregar algunas definiciones de clase adicionales.

Parte 4: Controlar la sincronización de datos al reanudar la aplicación tras una finalización

Cuando la aplicación se inicia por vez primera y mientras el usuario navega por las páginas, no es necesario sincronizar el acceso a datos. Las fuentes solo aparecen en la primera página una vez que se inicializan y las otras páginas nunca intentan acceder a los datos hasta que el usuario hace clic en una fuente visible. Después de eso, todo el acceso es de solo lectura y nunca modificamos los datos de origen. Sin embargo, hay un escenario en el que se requiere sincronización: si la aplicación finaliza mientras está activa una página basada en una fuente concreta, esa página tendrá que volver a enlazar a los datos de la fuente cuando se reanude la aplicación. En este caso es posible que una página intente acceder a datos que aún no existen. Por lo tanto, necesitamos forzar de algún modo la página para que espere a que los datos estén listos.

Las siguientes funciones permiten a la aplicación recordar la fuente a la que estaba mirando. El método SetCurrentFeed almacena la fuente en la configuración local, de donde se puede recuperar incluso después de que la aplicación salga de la memoria. El método GetCurrentFeedAsync es el que nos interesa, porque tenemos que asegurarnos de que cuando volvemos y queremos volver a cargar la última fuente, no tratemos de hacerlo antes de esa fuente se haya recargado. Más adelante hablaremos de este código. Vamos a agregar el código a la clase App porque la llamaremos desde ambas aplicaciones, la de Windows y la del teléfono.

1. En app.xaml.h agrega estas firmas de método. La accesibilidad interna significa que solo se pueden consumir desde otro código C++ en el mismo espacio de nombres.

       internal:
       concurrency::task<FeedData^> GetCurrentFeedAsync();
       void SetCurrentFeed(FeedData^ feed); 
       FeedItem^ GetFeedItem(FeedData^ fd, Platform::String^ uri);
       void AddFeed(Platform::String^ feedUri);
       void RemoveFeeds(Platform::Collections::Vector<FeedData^>^ feedsToDelete);
       void DeleteUrlFromFeedFile(Platform::String^ s);
   

2. A continuación, en app.xaml.cpp, agrega las siguientes instrucciones using en la parte superior:

       using namespace concurrency;
       using namespace Platform::Collections;
       using namespace Windows::Storage;
   

   Debes tener el espacio de nombres de simultaneidad para tarea, el espacio de nombres Platform::Collections para Vector y el espacio de nombres Windows::Storage para ApplicationData.

   Y, además, agrega estas líneas en la parte inferior:

   ///<summary>
   /// Grabs the URI that the user entered, then inserts it into the in-memory list
   /// and retrieves the data. Then adds the new feed to the data file so it's 
   /// there the next time the app starts up.
   ///</summary>
   void App::AddFeed(String^ feedUri)
   {
       auto feedDataSource =
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
       auto client = ref new Windows::Web::Syndication::SyndicationClient();
   
       // The UI is data-bound to the items collection and will update automatically
       // after we append to the collection.
       create_task(feedDataSource->RetrieveFeedAndInitData(feedUri, client))
           .then([this, feedUri] {
   
           // Add the uri to the roaming data. The API requires an IIterable so we have to 
           // put the uri in a Vector.
           Vector<String^>^ vec = ref new Vector<String^>();
           vec->Append(feedUri);
           concurrency::create_task(ApplicationData::Current->LocalFolder->
               CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
               .then([vec](StorageFile^ file)
           {
               FileIO::AppendLinesAsync(file, vec);
           });
       });
   }
   
   /// <summary>
   /// Called when the user chooses to remove some feeds which otherwise
   /// are valid Urls and currently are displaying in the UI, and are stored in 
   /// the Feeds collection as well as in the feeds.txt file.
   /// </summary>
   void App::RemoveFeeds(Vector<FeedData^>^ feedsToDelete)
   {
       // Create a new list of feeds, excluding the ones the user selected.
       auto feedDataSource =
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));  
   
       // If we delete the "last viewed feed" we need to also remove the reference to it
       // from local settings.
       ApplicationDataContainer^ localSettings = ApplicationData::Current->LocalSettings;
       String^ lastViewed;
   
       if (localSettings->Values->HasKey("LastViewedFeed"))
       {
           lastViewed =
               safe_cast<String^>(localSettings->Values->Lookup("LastViewedFeed"));
       }
   
       // When performance is an issue, consider using Vector::ReplaceAll
       for (const auto& item : feedsToDelete)
       {
           unsigned int index = -1;
           bool b = feedDataSource->Feeds->IndexOf(item, &index);
           if (index >= 0)
           {
               feedDataSource->Feeds->RemoveAt(index);           
           }
   
           // Prevent ourself from trying later to reference 
           // the page we just deleted.
           if (lastViewed != nullptr && lastViewed == item->Title)
           {
               localSettings->Values->Remove("LastViewedFeed");
           }
       }
   
       // Re-initialize feeds.txt with the new list of URLs.
       Vector<String^>^ newFeedList = ref new Vector<String^>();
       for (const auto& item : feedDataSource->Feeds)
       {
           newFeedList->Append(item->Uri);
       }
   
       // Overwrite the old data file with the new list.
       create_task(ApplicationData::Current->LocalFolder->
           CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
           .then([newFeedList](StorageFile^ file)
       {
           FileIO::WriteLinesAsync(file, newFeedList);
       });
   }
   
   
   ///<summary>
   /// This function enables the user to back out after
   /// entering a bad url in the "Add Feed" text box, for example pasting in a 
   /// partial address. This function will also be called if a URL that was previously 
   /// formatted correctly one day starts returning malformed XML when we try to load it.
   /// In either case, the FeedData was not added to the Feeds collection, and so 
   /// we only need to delete the URL from the data file.
   /// </summary>
   void App::DeleteUrlFromFeedFile(Platform::String^ s)
   {
       // Overwrite the old data file with the new list.
       create_task(ApplicationData::Current->LocalFolder->
           CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
           .then([this](StorageFile^ file)
       {
           return FileIO::ReadLinesAsync(file);
       }).then([this, s](IVector<String^>^ lines)
       {
           for (unsigned int i = 0; i < lines->Size; ++i)
           {
               if (lines->GetAt(i) == s)
               {
                   lines->RemoveAt(i);
               }
           }
           return lines;
       }).then([this](IVector<String^>^ lines)
       {
           create_task(ApplicationData::Current->LocalFolder->
               CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
               .then([this, lines](StorageFile^ file)
           {
               FileIO::WriteLinesAsync(file, lines);
           });
       });
   }
   
   ///<summary>
   /// Returns the feed that the user last selected from MainPage.
   ///<summary>
   task<FeedData^> App::GetCurrentFeedAsync()
   {
       FeedDataSource^ feedDataSource = 
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
       return create_task(feedDataSource->m_LastViewedFeedEvent);
   }
   
   ///<summary>
   /// So that we can always get the current feed in the same way, we call this 
   // method from ItemsPage when we change the current feed. This way the caller 
   // doesn't care whether we're resuming from termination or new navigating.
   // The only other place we set the event is in InitDataSource in FeedData.cpp 
   // when resuming from termination.
   ///</summary>
   
   void App::SetCurrentFeed(FeedData^ feed)
   {
       // Enable any pages waiting on the FeedData to continue
       FeedDataSource^ feedDataSource = 
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
       feedDataSource->m_LastViewedFeedEvent = task_completion_event<FeedData^>();
       feedDataSource->m_LastViewedFeedEvent.set(feed);
   
       // Store the current URI so that we can look up the correct feedData object on resume.
       ApplicationDataContainer^ localSettings = 
           ApplicationData::Current->LocalSettings;
       auto values = localSettings->Values;
       values->Insert("LastViewedFeed", 
           dynamic_cast<PropertyValue^>(PropertyValue::CreateString(feed->Uri)));
   }
   
   // We stored the string ID when the app was suspended
   // because storing the FeedItem itself would have required
   // more custom serialization code. Here is where we retrieve
   // the FeedItem based on its string ID.
   FeedItem^ App::GetFeedItem(FeedData^ fd, String^ uri)
   {
       auto items = fd->Items;
       auto itEnd = end(items);
       auto it = std::find_if(begin(items), itEnd,
           [uri](FeedItem^ fi)
       {
           return fi->Link->AbsoluteUri == uri;
       });
   
       if (it != itEnd)
           return *it;
   
       return nullptr;
   }
   

Parte 5: convertir los datos en formularios que se puedan usar

Los datos sin procesar no tienen por qué estar necesariamente en un formulario utilizable. Una fuente RSS o Atom expresa su fecha de publicación como un valor numérico de RFC 822. Necesitamos una forma de convertir eso en texto que tenga sentido para el usuario. Para ello, vamos a crear una clase personalizada que implementa IValueConverter y acepta un valor de RFC833 como cadenas de entrada y salida para cada componente de la fecha. Más tarde, en el código XAML que muestra los datos, estableceremos un enlace al resultado de la clase DateConverter en vez de al formato de datos sin procesar.

Agregar un convertidor de fecha

1. En el proyecto común, crea un nuevo archivo .h y agrega este código:

   //DateConverter.h
   
   #pragma once
   #include <string> //for wcscmp
   #include <regex>
   
   namespace SimpleBlogReader
   {
       namespace WGDTF = Windows::Globalization::DateTimeFormatting;
   
       /// <summary>
       /// Implements IValueConverter so that we can convert the numeric date
       /// representation to a set of strings.
       /// </summary>
       public ref class DateConverter sealed : 
           public Windows::UI::Xaml::Data::IValueConverter
       {
       public:
           virtual Platform::Object^ Convert(Platform::Object^ value,
               Windows::UI::Xaml::Interop::TypeName targetType,
               Platform::Object^ parameter,
               Platform::String^ language)
           {
               if (value == nullptr)
               {
                   throw ref new Platform::InvalidArgumentException();
               }
               auto dt = safe_cast<Windows::Foundation::DateTime>(value);
               auto param = safe_cast<Platform::String^>(parameter);
               Platform::String^ result;
               if (param == nullptr)
               {
                   auto dtf = WGDTF::DateTimeFormatter::ShortDate::get();
                   result = dtf->Format(dt);
               }
               else if (wcscmp(param->Data(), L"month") == 0)
               {
                   auto formatter =
                       ref new WGDTF::DateTimeFormatter("{month.abbreviated(3)}");
                   result = formatter->Format(dt);
               }
               else if (wcscmp(param->Data(), L"day") == 0)
               {
                   auto formatter =
                       ref new WGDTF::DateTimeFormatter("{day.integer(2)}");
                   result = formatter->Format(dt);
               }
               else if (wcscmp(param->Data(), L"year") == 0)
               {
                   auto formatter =
                       ref new WGDTF::DateTimeFormatter("{year.full}");
                   auto tempResult = formatter->Format(dt); //e.g. "2014"
   
                   // Insert a hard return after second digit to get the rendering 
                   // effect we want
                   std::wregex r(L"(\\d\\d)(\\d\\d)");
                   result = ref new Platform::String(
                       std::regex_replace(tempResult->Data(), r, L"$1\n$2").c_str());
               }
               else
               {
                   // We don't handle other format types currently.
                   throw ref new Platform::InvalidArgumentException();
               }
   
               return result;
           }
   
           virtual Platform::Object^ ConvertBack(Platform::Object^ value,
               Windows::UI::Xaml::Interop::TypeName targetType,
               Platform::Object^ parameter,
               Platform::String^ language)
           {
               // Not needed in SimpleBlogReader. Left as an exercise.
               throw ref new Platform::NotImplementedException();
           }
       };
   }
   

2. Ahora inclúyelo en una directiva #include en App.xaml.h:

   #include "DateConverter.h"
   

3. Y crea una instancia de él en App.xaml en el nodo Application.Resources:

   <local:DateConverter x:Key="dateConverter" />
   

El contenido de la fuente se transmite por la red como texto en formato HTML o, en algunos casos, en formato XML. Para visualizar este contenido en un RichTextBlock, tenemos que convertirlo en texto enriquecido. La clase siguiente utiliza la función de Windows HtmlUtilities para analizar el código HTML y, a continuación, usa funciones <regex> para dividirlo en párrafos con el fin de que podamos compilar objetos de texto enriquecido. No podemos usar el enlace de datos en este escenario, así que no hay necesidad de que la clase implemente IValueConverter. Simplemente crearemos instancias locales del mismo en las páginas donde lo necesitamos.

Agregar un convertidor de texto

1. En el proyecto compartido, agrega un nuevo archivo .h, asígnale el nombre TextHelper.h y agrega este código:

   #pragma once
   
   namespace SimpleBlogReader
   {
       namespace WFC = Windows::Foundation::Collections;
       namespace WF = Windows::Foundation;
       namespace WUIXD = Windows::UI::Xaml::Documents;
   
       public ref class TextHelper sealed
       {
       public:
           TextHelper();
           WFC::IVector<WUIXD::Paragraph^>^ CreateRichText(
               Platform::String^ fi,
               WF::TypedEventHandler < WUIXD::Hyperlink^,
               WUIXD::HyperlinkClickEventArgs^ > ^ context);
   
           Platform::String^ UnescapeText(Platform::String^ inStr);
   
       private:
   
           std::vector<std::wstring> SplitContentIntoParagraphs(const std::wstring& s, 
               const std::wstring& rgx);
           std::wstring UnescapeText(const std::wstring& input);
   
           // Maps some HTML entities that we'll use to replace the escape sequences
           // in the call to UnescapeText when we create feed titles and render text. 
           std::map<std::wstring, std::wstring> entities;
       };
   }
   

2. Ahora agrega TextHelper.cpp:

   #include "pch.h"
   #include "TextHelper.h"
   
   using namespace std;
   using namespace SimpleBlogReader;
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   
   using namespace Windows::Data::Html;
   using namespace Windows::UI::Xaml::Documents;
   
   /// <summary>
   /// Note that in this example we don't map all the possible HTML entities. Feel free to improve this.
   /// Also note that we initialize the map like this because VS2013 Udpate 3 does not support list
   /// initializers in a member declaration.
   /// </summary>
   TextHelper::TextHelper() : entities(
       {
           { L"&#60;", L"<" }, { L"&#62;", L">" }, { L"&#38;", L"&" }, { L"&#162;", L"¢" }, 
           { L"&#163;", L"£" }, { L"&#165;", L"¥" }, { L"&#8364;", L"€" }, { L"&#8364;", L"©" },
           { L"&#174;", L"®" }, { L"&#8220;", L"“" }, { L"&#8221;", L"”" }, { L"&#8216;", L"‘" },
           { L"&#8217;", L"’" }, { L"&#187;", L"»" }, { L"&#171;", L"«" }, { L"&#8249;", L"‹" },
           { L"&#8250;", L"›" }, { L"&#8226;", L"•" }, { L"&#176;", L"°" }, { L"&#8230;", L"…" },
           { L"&#160;", L" " }, { L"&quot;", LR"(")" }, { L"&apos;", L"'" }, { L"&lt;", L"<" },
           { L"&gt;", L">" }, { L"&rsquo;", L"’" }, { L"&nbsp;", L" " }, { L"&amp;", L"&" }
       })
   {  
   }
   
   ///<summary>
   /// Accepts the Content property from a Feed and returns rich text
   /// paragraphs that can be passed to a RichTextBlock.
   ///</summary>
   String^ TextHelper::UnescapeText(String^ inStr)
   {
       wstring input(inStr->Data());
       wstring result = UnescapeText(input);
       return ref new Platform::String(result.c_str());
   }
   
   ///<summary>
   /// Create a RichText block from the text retrieved by the HtmlUtilies object. 
   /// For a more full-featured app, you could parse the content argument yourself and
   /// add the page's images to the inlines collection.
   ///</summary>
   IVector<Paragraph^>^ TextHelper::CreateRichText(String^ content,
       TypedEventHandler<Hyperlink^, HyperlinkClickEventArgs^>^ context)
   {
       std::vector<Paragraph^> blocks; 
   
       auto text = HtmlUtilities::ConvertToText(content);
       auto parts = SplitContentIntoParagraphs(wstring(text->Data()), LR"(\r\n)");
   
       // Add the link at the top. Don't set the NavigateUri property because 
       // that causes the link to open in IE even if the Click event is handled. 
       auto hlink = ref new Hyperlink();
       hlink->Click += context;
       auto linkText = ref new Run();
       linkText->Foreground = 
           ref new Windows::UI::Xaml::Media::SolidColorBrush(Windows::UI::Colors::DarkRed);
       linkText->Text = "Link";
       hlink->Inlines->Append(linkText);
       auto linkPara = ref new Paragraph();
       linkPara->Inlines->Append(hlink);
       blocks.push_back(linkPara);
   
       for (auto part : parts)
       {
           auto p = ref new Paragraph();
           p->TextIndent = 10;
           p->Margin = (10, 10, 10, 10);
           auto r = ref new Run();
           r->Text = ref new String(part.c_str());
           p->Inlines->Append(r);
           blocks.push_back(p);
       }
   
       return ref new Vector<Paragraph^>(blocks);
   }
   
   ///<summary>
   /// Split an input string which has been created by HtmlUtilities::ConvertToText
   /// into paragraphs. The rgx string we use here is LR("\r\n") . If we ever use
   /// other means to grab the raw text from a feed, then the rgx will have to recognize
   /// other possible new line formats. 
   ///</summary>
   vector<wstring> TextHelper::SplitContentIntoParagraphs(const wstring& s, const wstring& rgx)
   {    
       const wregex r(rgx);
       vector<wstring> result;
   
       // the -1 argument indicates that the text after this match until the next match
       // is the "capture group". In other words, this is how we match on what is between the tokens.
       for (wsregex_token_iterator rit(s.begin(), s.end(), r, -1), end; rit != end; ++rit)
       {
           if (rit->length() > 0)
           {
               result.push_back(*rit);
           }
       }
       return result;  
   }
   
   ///<summary>
   /// This is used to unescape html entities that occur in titles, subtitles, etc.
   //  entities is a map<wstring, wstring> with key-values like this: { L"&#60;", L"<" },
   /// CAUTION: we must not unescape any content that gets sent to the webView.
   ///</summary>
   wstring TextHelper::UnescapeText(const wstring& input)
   {
       wsmatch match;
   
       // match L"&#60;" as well as "&nbsp;"
       const wregex rgx(LR"(&#?\w*?;)");
       wstring result;
   
       // itrEnd needs to be visible outside the loop
       wsregex_iterator itrEnd, itrRemainingText;
   
       // Iterate over input and build up result as we go along
       // by first appending what comes before the match, then the 
       // unescaped replacement for the HTML entity which is the match,
       // then once at the end appending what comes after the last match.
   
       for (wsregex_iterator itr(input.cbegin(), input.cend(), rgx); itr != itrEnd; ++itr)    
       {
           wstring entity = itr->str();
           map<wstring, wstring>::const_iterator mit = entities.find(entity);
           if (mit != end(entities))
           {
               result.append(itr->prefix());
               result.append(mit->second); // mit->second is the replacement text
               itrRemainingText = itr;
           }
           else 
           {
               // we found an entity that we don't explitly map yet so just 
               // render it in raw form. Exercise for the user: add
               // all legal entities to the entities map.   
               result.append(entity);
               continue; 
           }        
       }
   
       // If we didn't find any entities to escape
       // then (a) don't try to dereference itrRemainingText
       // and (b) return input because result is empty!
       if (itrRemainingText == itrEnd)
       {
           return input;
       }
       else
       {
           // Add any text between the last match and end of input string.
           result.append(itrRemainingText->suffix());
           return result;
       }
   }
   

   Observa que nuestra clase TextHelper personalizada muestra algunas de las formas en que puedes utilizar ISO C++ (std::map, std::regex, std::wstring) de manera interna en una aplicación C++/CX. Vamos a crear instancias de esta clase de forma local en las páginas que la utilizan. Tan solo tenemos que incluirla una vez, en App.xaml.h:

   #include "TextHelper.h"
   

3. Ahora ya podrás compilar y ejecutar la aplicación, pero sin demasiadas expectativas por el momento.

Parte 6: iniciar, suspender y reanudar la aplicación

El evento App::OnLaunched se desencadena cuando el usuario inicia la aplicación al presionar o hacer clic en su icono y también cuando el usuario vuelve a la aplicación después de que el sistema la haya finalizado para liberar y asignar memoria a otras aplicaciones. En cualquier caso, siempre acudimos a Internet y recargamos los datos en respuesta a este evento. Sin embargo, hay otras acciones que solo necesitan invocarse en un caso u otro. Podemos deducir estos estados si observamos el rootFrame en combinación con el argumento LaunchActivatedEventArgs que se pasa a la función y luego hacemos lo correcto. Afortunadamente, la clase SuspensionManager que se agregó automáticamente con MainPage realiza la mayor parte del trabajo de guardar y restaurar el estado de la aplicación cuando esta se suspende y se reinicia. Nosotros simplemente tenemos que llamar a sus métodos.

1. Agrega los archivos de código de SuspensionManager a la carpeta Common del proyecto. Agrega SuspensionManager.h y copia el siguiente código en él:

   //
   // SuspensionManager.h
   // Declaration of the SuspensionManager class
   //
   
   #pragma once
   
   namespace SimpleBlogReader
   {
       namespace Common
       {
           /// <summary>
           /// SuspensionManager captures global session state to simplify process lifetime management
           /// for an application.  Note that session state will be automatically cleared under a variety
           /// of conditions and should only be used to store information that would be convenient to
           /// carry across sessions, but that should be disacarded when an application crashes or is
           /// upgraded.
           /// </summary>
           class SuspensionManager sealed
           {
           public:
               static void RegisterFrame(Windows::UI::Xaml::Controls::Frame^ frame, Platform::String^ sessionStateKey, Platform::String^ sessionBaseKey = nullptr);
               static void UnregisterFrame(Windows::UI::Xaml::Controls::Frame^ frame);
               static concurrency::task<void> SaveAsync();
               static concurrency::task<void> RestoreAsync(Platform::String^ sessionBaseKey = nullptr);
               static Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ SessionState();
               static Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ SessionStateForFrame(
                   Windows::UI::Xaml::Controls::Frame^ frame);
   
           private:
               static void RestoreFrameNavigationState(Windows::UI::Xaml::Controls::Frame^ frame);
               static void SaveFrameNavigationState(Windows::UI::Xaml::Controls::Frame^ frame);
   
               static Platform::Collections::Map<Platform::String^, Platform::Object^>^ _sessionState;
               static const wchar_t* sessionStateFilename;
   
               static std::vector<Platform::WeakReference> _registeredFrames;
               static Windows::UI::Xaml::DependencyProperty^ FrameSessionStateKeyProperty;
               static Windows::UI::Xaml::DependencyProperty^ FrameSessionBaseKeyProperty;
               static Windows::UI::Xaml::DependencyProperty^ FrameSessionStateProperty;
           };
       }
   }
   

2. Agrega el archivo de código SuspensionManager.cpp y copia el siguiente código en él:

   //
   // SuspensionManager.cpp
   // Implementation of the SuspensionManager class
   //
   
   #include "pch.h"
   #include "SuspensionManager.h"
   
   #include <algorithm>
   
   using namespace SimpleBlogReader::Common;
   
   using namespace concurrency;
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::Storage;
   using namespace Windows::Storage::FileProperties;
   using namespace Windows::Storage::Streams;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Interop;
   
   Map<String^, Object^>^ SuspensionManager::_sessionState = ref new Map<String^, Object^>();
   
   const wchar_t* SuspensionManager::sessionStateFilename = L"_sessionState.dat";
   
   std::vector<WeakReference> SuspensionManager::_registeredFrames;
   
   DependencyProperty^ SuspensionManager::FrameSessionStateKeyProperty =
       DependencyProperty::RegisterAttached("_FrameSessionStateKeyProperty",
       TypeName(String::typeid), TypeName(SuspensionManager::typeid), nullptr);
   
   DependencyProperty^ SuspensionManager::FrameSessionBaseKeyProperty =
       DependencyProperty::RegisterAttached("_FrameSessionBaseKeyProperty",
       TypeName(String::typeid), TypeName(SuspensionManager::typeid), nullptr);
   
   DependencyProperty^ SuspensionManager::FrameSessionStateProperty =
       DependencyProperty::RegisterAttached("_FrameSessionStateProperty",
       TypeName(IMap<String^, Object^>::typeid), TypeName(SuspensionManager::typeid), nullptr);
   
   class ObjectSerializeHelper
   {
   public:
       // Codes used for identifying serialized types
       enum StreamTypes {
           NullPtrType = 0,
   
           // Supported IPropertyValue types
           UInt8Type, UInt16Type, UInt32Type, UInt64Type, Int16Type, Int32Type, Int64Type,
           SingleType, DoubleType, BooleanType, Char16Type, GuidType, StringType,
   
           // Additional supported types
           StringToObjectMapType,
   
           // Marker values used to ensure stream integrity
           MapEndMarker
       };
       static String^ ReadString(DataReader^ reader);
       static IMap<String^, Object^>^ ReadStringToObjectMap(DataReader^ reader);
       static Object^ ReadObject(DataReader^ reader);
       static void WriteString(DataWriter^ writer, String^ string);
       static void WriteProperty(DataWriter^ writer, IPropertyValue^ propertyValue);
       static void WriteStringToObjectMap(DataWriter^ writer, IMap<String^, Object^>^ map);
       static void WriteObject(DataWriter^ writer, Object^ object);
   };
   
   /// <summary>
   /// Provides access to global session state for the current session.  This state is serialized by
   /// <see cref="SaveAsync"/> and restored by <see cref="RestoreAsync"/> which require values to be
   /// one of the following: boxed values including integers, floating-point singles and doubles,
   /// wide characters, boolean, Strings and Guids, or Map<String^, Object^> where map values are
   /// subject to the same constraints.  Session state should be as compact as possible.
   /// </summary>
   IMap<String^, Object^>^ SuspensionManager::SessionState()
   {
       return _sessionState;
   }
   
   /// <summary>
   /// Registers a <see cref="Frame"/> instance to allow its navigation history to be saved to
   /// and restored from <see cref="SessionState"/>.  Frames should be registered once
   /// immediately after creation if they will participate in session state management.  Upon
   /// registration if state has already been restored for the specified key
   /// the navigation history will immediately be restored.  Subsequent invocations of
   /// <see cref="RestoreAsync(String)"/> will also restore navigation history.
   /// </summary>
   /// <param name="frame">An instance whose navigation history should be managed by
   /// <see cref="SuspensionManager"/></param>
   /// <param name="sessionStateKey">A unique key into <see cref="SessionState"/> used to
   /// store navigation-related information.</param>
   /// <param name="sessionBaseKey">An optional key that identifies the type of session.
   /// This can be used to distinguish between multiple application launch scenarios.</param>
   void SuspensionManager::RegisterFrame(Frame^ frame, String^ sessionStateKey, String^ sessionBaseKey)
   {
       if (frame->GetValue(FrameSessionStateKeyProperty) != nullptr)
       {
           throw ref new FailureException("Frames can only be registered to one session state key");
       }
   
       if (frame->GetValue(FrameSessionStateProperty) != nullptr)
       {
           throw ref new FailureException("Frames must be either be registered before accessing frame session state, or not registered at all");
       }
   
       if (sessionBaseKey != nullptr)
       {
           frame->SetValue(FrameSessionBaseKeyProperty, sessionBaseKey);
           sessionStateKey = sessionBaseKey + "_" + sessionStateKey;
       }
   
       // Use a dependency property to associate the session key with a frame, and keep a list of frames whose
       // navigation state should be managed
       frame->SetValue(FrameSessionStateKeyProperty, sessionStateKey);
       _registeredFrames.insert(_registeredFrames.begin(), WeakReference(frame));
   
       // Check to see if navigation state can be restored
       RestoreFrameNavigationState(frame);
   }
   
   /// <summary>
   /// Disassociates a <see cref="Frame"/> previously registered by <see cref="RegisterFrame"/>
   /// from <see cref="SessionState"/>.  Any navigation state previously captured will be
   /// removed.
   /// </summary>
   /// <param name="frame">An instance whose navigation history should no longer be
   /// managed.</param>
   void SuspensionManager::UnregisterFrame(Frame^ frame)
   {
       // Remove session state and remove the frame from the list of frames whose navigation
       // state will be saved (along with any weak references that are no longer reachable)
       auto key = safe_cast<String^>(frame->GetValue(FrameSessionStateKeyProperty));
       if (SessionState()->HasKey(key))
       {
           SessionState()->Remove(key);
       }
       _registeredFrames.erase(
           std::remove_if(_registeredFrames.begin(), _registeredFrames.end(), [=](WeakReference& e)
       {
           auto testFrame = e.Resolve<Frame>();
           return testFrame == nullptr || testFrame == frame;
       }),
           _registeredFrames.end()
           );
   }
   
   /// <summary>
   /// Provides storage for session state associated with the specified <see cref="Frame"/>.
   /// Frames that have been previously registered with <see cref="RegisterFrame"/> have
   /// their session state saved and restored automatically as a part of the global
   /// <see cref="SessionState"/>.  Frames that are not registered have transient state
   /// that can still be useful when restoring pages that have been discarded from the
   /// navigation cache.
   /// </summary>
   /// <remarks>Apps may choose to rely on <see cref="NavigationHelper"/> to manage
   /// page-specific state instead of working with frame session state directly.</remarks>
   /// <param name="frame">The instance for which session state is desired.</param>
   /// <returns>A collection of state subject to the same serialization mechanism as
   /// <see cref="SessionState"/>.</returns>
   IMap<String^, Object^>^ SuspensionManager::SessionStateForFrame(Frame^ frame)
   {
       auto frameState = safe_cast<IMap<String^, Object^>^>(frame->GetValue(FrameSessionStateProperty));
   
       if (frameState == nullptr)
       {
           auto frameSessionKey = safe_cast<String^>(frame->GetValue(FrameSessionStateKeyProperty));
           if (frameSessionKey != nullptr)
           {
               // Registered frames reflect the corresponding session state
               if (!_sessionState->HasKey(frameSessionKey))
               {
                   _sessionState->Insert(frameSessionKey, ref new Map<String^, Object^>());
               }
               frameState = safe_cast<IMap<String^, Object^>^>(_sessionState->Lookup(frameSessionKey));
           }
           else
           {
               // Frames that aren't registered have transient state
               frameState = ref new Map<String^, Object^>();
           }
           frame->SetValue(FrameSessionStateProperty, frameState);
       }
       return frameState;
   }
   
   void SuspensionManager::RestoreFrameNavigationState(Frame^ frame)
   {
       auto frameState = SessionStateForFrame(frame);
       if (frameState->HasKey("Navigation"))
       {
           frame->SetNavigationState(safe_cast<String^>(frameState->Lookup("Navigation")));
       }
   }
   
   void SuspensionManager::SaveFrameNavigationState(Frame^ frame)
   {
       auto frameState = SessionStateForFrame(frame);
       frameState->Insert("Navigation", frame->GetNavigationState());
   }
   
   /// <summary>
   /// Save the current <see cref="SessionState"/>.  Any <see cref="Frame"/> instances
   /// registered with <see cref="RegisterFrame"/> will also preserve their current
   /// navigation stack, which in turn gives their active <see cref="Page"/> an opportunity
   /// to save its state.
   /// </summary>
   /// <returns>An asynchronous task that reflects when session state has been saved.</returns>
   task<void> SuspensionManager::SaveAsync(void)
   {
       // Save the navigation state for all registered frames
       for (auto && weakFrame : _registeredFrames)
       {
           auto frame = weakFrame.Resolve<Frame>();
           if (frame != nullptr) SaveFrameNavigationState(frame);
       }
   
       // Serialize the session state synchronously to avoid asynchronous access to shared
       // state
       auto sessionData = ref new InMemoryRandomAccessStream();
       auto sessionDataWriter = ref new DataWriter(sessionData->GetOutputStreamAt(0));
       ObjectSerializeHelper::WriteObject(sessionDataWriter, _sessionState);
   
       // Once session state has been captured synchronously, begin the asynchronous process
       // of writing the result to disk
       return task<unsigned int>(sessionDataWriter->StoreAsync()).then([=](unsigned int)
       {
           return ApplicationData::Current->LocalFolder->CreateFileAsync(StringReference(sessionStateFilename),
               CreationCollisionOption::ReplaceExisting);
       })
           .then([=](StorageFile^ createdFile)
       {
           return createdFile->OpenAsync(FileAccessMode::ReadWrite);
       })
           .then([=](IRandomAccessStream^ newStream)
       {
           return RandomAccessStream::CopyAsync(
               sessionData->GetInputStreamAt(0), newStream->GetOutputStreamAt(0));
       })
           .then([=](UINT64 copiedBytes)
       {
           (void) copiedBytes; // Unused parameter
           return;
       });
   }
   
   /// <summary>
   /// Restores previously saved <see cref="SessionState"/>.  Any <see cref="Frame"/> instances
   /// registered with <see cref="RegisterFrame"/> will also restore their prior navigation
   /// state, which in turn gives their active <see cref="Page"/> an opportunity restore its
   /// state.
   /// </summary>
   /// <param name="sessionBaseKey">An optional key that identifies the type of session.
   /// This can be used to distinguish between multiple application launch scenarios.</param>
   /// <returns>An asynchronous task that reflects when session state has been read.  The
   /// content of <see cref="SessionState"/> should not be relied upon until this task
   /// completes.</returns>
   task<void> SuspensionManager::RestoreAsync(String^ sessionBaseKey)
   {
       _sessionState->Clear();
   
       task<StorageFile^> getFileTask(ApplicationData::Current->LocalFolder->GetFileAsync(StringReference(sessionStateFilename)));
       return getFileTask.then([=](StorageFile^ stateFile)
       {
           task<BasicProperties^> getBasicPropertiesTask(stateFile->GetBasicPropertiesAsync());
           return getBasicPropertiesTask.then([=](BasicProperties^ stateFileProperties)
           {
               auto size = unsigned int(stateFileProperties->Size);
               if (size != stateFileProperties->Size) throw ref new FailureException("Session state larger than 4GB");
               task<IRandomAccessStreamWithContentType^> openReadTask(stateFile->OpenReadAsync());
               return openReadTask.then([=](IRandomAccessStreamWithContentType^ stateFileStream)
               {
                   auto stateReader = ref new DataReader(stateFileStream);
                   return task<unsigned int>(stateReader->LoadAsync(size)).then([=](unsigned int bytesRead)
                   {
                       (void) bytesRead; // Unused parameter
                       // Deserialize the Session State
                       Object^ content = ObjectSerializeHelper::ReadObject(stateReader);
                       _sessionState = (Map<String^, Object^>^)content;
   
                       // Restore any registered frames to their saved state
                       for (auto && weakFrame : _registeredFrames)
                       {
                           auto frame = weakFrame.Resolve<Frame>();
                           if (frame != nullptr && safe_cast<String^>(frame->GetValue(FrameSessionBaseKeyProperty)) == sessionBaseKey)
                           {
                               frame->ClearValue(FrameSessionStateProperty);
                               RestoreFrameNavigationState(frame);
                           }
                       }
                   }, task_continuation_context::use_current());
               });
           });
       });
   }
   
   #pragma region Object serialization for a known set of types
   
   void ObjectSerializeHelper::WriteString(DataWriter^ writer, String^ string)
   {
       writer->WriteByte(StringType);
       writer->WriteUInt32(writer->MeasureString(string));
       writer->WriteString(string);
   }
   
   void ObjectSerializeHelper::WriteProperty(DataWriter^ writer, IPropertyValue^ propertyValue)
   {
       switch (propertyValue->Type)
       {
       case PropertyType::UInt8:
           writer->WriteByte(StreamTypes::UInt8Type);
           writer->WriteByte(propertyValue->GetUInt8());
           return;
       case PropertyType::UInt16:
           writer->WriteByte(StreamTypes::UInt16Type);
           writer->WriteUInt16(propertyValue->GetUInt16());
           return;
       case PropertyType::UInt32:
           writer->WriteByte(StreamTypes::UInt32Type);
           writer->WriteUInt32(propertyValue->GetUInt32());
           return;
       case PropertyType::UInt64:
           writer->WriteByte(StreamTypes::UInt64Type);
           writer->WriteUInt64(propertyValue->GetUInt64());
           return;
       case PropertyType::Int16:
           writer->WriteByte(StreamTypes::Int16Type);
           writer->WriteUInt16(propertyValue->GetInt16());
           return;
       case PropertyType::Int32:
           writer->WriteByte(StreamTypes::Int32Type);
           writer->WriteUInt32(propertyValue->GetInt32());
           return;
       case PropertyType::Int64:
           writer->WriteByte(StreamTypes::Int64Type);
           writer->WriteUInt64(propertyValue->GetInt64());
           return;
       case PropertyType::Single:
           writer->WriteByte(StreamTypes::SingleType);
           writer->WriteSingle(propertyValue->GetSingle());
           return;
       case PropertyType::Double:
           writer->WriteByte(StreamTypes::DoubleType);
           writer->WriteDouble(propertyValue->GetDouble());
           return;
       case PropertyType::Boolean:
           writer->WriteByte(StreamTypes::BooleanType);
           writer->WriteBoolean(propertyValue->GetBoolean());
           return;
       case PropertyType::Char16:
           writer->WriteByte(StreamTypes::Char16Type);
           writer->WriteUInt16(propertyValue->GetChar16());
           return;
       case PropertyType::Guid:
           writer->WriteByte(StreamTypes::GuidType);
           writer->WriteGuid(propertyValue->GetGuid());
           return;
       case PropertyType::String:
           WriteString(writer, propertyValue->GetString());
           return;
       default:
           throw ref new InvalidArgumentException("Unsupported property type");
       }
   }
   
   void ObjectSerializeHelper::WriteStringToObjectMap(DataWriter^ writer, IMap<String^, Object^>^ map)
   {
       writer->WriteByte(StringToObjectMapType);
       writer->WriteUInt32(map->Size);
       for (auto && pair : map)
       {
           WriteObject(writer, pair->Key);
           WriteObject(writer, pair->Value);
       }
       writer->WriteByte(MapEndMarker);
   }
   
   void ObjectSerializeHelper::WriteObject(DataWriter^ writer, Object^ object)
   {
       if (object == nullptr)
       {
           writer->WriteByte(NullPtrType);
           return;
       }
   
       auto propertyObject = dynamic_cast<IPropertyValue^>(object);
       if (propertyObject != nullptr)
       {
           WriteProperty(writer, propertyObject);
           return;
       }
   
       auto mapObject = dynamic_cast<IMap<String^, Object^>^>(object);
       if (mapObject != nullptr)
       {
           WriteStringToObjectMap(writer, mapObject);
           return;
       }
   
       throw ref new InvalidArgumentException("Unsupported data type");
   }
   
   String^ ObjectSerializeHelper::ReadString(DataReader^ reader)
   {
       int length = reader->ReadUInt32();
       String^ string = reader->ReadString(length);
       return string;
   }
   
   IMap<String^, Object^>^ ObjectSerializeHelper::ReadStringToObjectMap(DataReader^ reader)
   {
       auto map = ref new Map<String^, Object^>();
       auto size = reader->ReadUInt32();
       for (unsigned int index = 0; index < size; index++)
       {
           auto key = safe_cast<String^>(ReadObject(reader));
           auto value = ReadObject(reader);
           map->Insert(key, value);
       }
       if (reader->ReadByte() != StreamTypes::MapEndMarker)
       {
           throw ref new InvalidArgumentException("Invalid stream");
       }
       return map;
   }
   
   Object^ ObjectSerializeHelper::ReadObject(DataReader^ reader)
   {
       auto type = reader->ReadByte();
       switch (type)
       {
       case StreamTypes::NullPtrType:
           return nullptr;
       case StreamTypes::UInt8Type:
           return reader->ReadByte();
       case StreamTypes::UInt16Type:
           return reader->ReadUInt16();
       case StreamTypes::UInt32Type:
           return reader->ReadUInt32();
       case StreamTypes::UInt64Type:
           return reader->ReadUInt64();
       case StreamTypes::Int16Type:
           return reader->ReadInt16();
       case StreamTypes::Int32Type:
           return reader->ReadInt32();
       case StreamTypes::Int64Type:
           return reader->ReadInt64();
       case StreamTypes::SingleType:
           return reader->ReadSingle();
       case StreamTypes::DoubleType:
           return reader->ReadDouble();
       case StreamTypes::BooleanType:
           return reader->ReadBoolean();
       case StreamTypes::Char16Type:
           return (char16_t) reader->ReadUInt16();
       case StreamTypes::GuidType:
           return reader->ReadGuid();
       case StreamTypes::StringType:
           return ReadString(reader);
       case StreamTypes::StringToObjectMapType:
           return ReadStringToObjectMap(reader);
       default:
           throw ref new InvalidArgumentException("Unsupported property type");
       }
   }
   
   #pragma endregion
   

3. En app.xaml.cpp agrega esta directiva include:

   #include "Common\SuspensionManager.h"
   

4. Agrega la directiva de espacio de nombres:

   using namespace SimpleBlogReader::Common;
   

5. Ahora reemplaza la función existente con este código:

   void App::OnLaunched(LaunchActivatedEventArgs^ e)
   {
   
   #if _DEBUG
       if (IsDebuggerPresent())
       {
           DebugSettings->EnableFrameRateCounter = true;
       }
   #endif
   
       auto rootFrame = dynamic_cast<Frame^>(Window::Current->Content);
   
       // Do not repeat app initialization when the Window already has content,
       // just ensure that the window is active.
       if (rootFrame == nullptr)
       {
           // Create a Frame to act as the navigation context and associate it with
           // a SuspensionManager key
           rootFrame = ref new Frame();
           SuspensionManager::RegisterFrame(rootFrame, "AppFrame");
   
           // Initialize the Atom and RSS feed objects with data from the web
           FeedDataSource^ feedDataSource = 
               safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
           if (feedDataSource->Feeds->Size == 0)
           {
               if (e->PreviousExecutionState == ApplicationExecutionState::Terminated)
               {
                   // On resume FeedDataSource needs to know whether the app was on a
                   // specific FeedData, which will be the unless it was on MainPage
                   // when it was terminated.
                   ApplicationDataContainer^ localSettings = ApplicationData::Current->LocalSettings;
                   auto values = localSettings->Values;
                   if (localSettings->Values->HasKey("LastViewedFeed"))
                   {
                       feedDataSource->CurrentFeedUri = 
                           safe_cast<String^>(localSettings->Values->Lookup("LastViewedFeed"));
                   }
               }
   
               feedDataSource->InitDataSource();
           }
   
           // We have 4 pages in the app
           rootFrame->CacheSize = 4;
           auto prerequisite = task<void>([](){});
           if (e->PreviousExecutionState == ApplicationExecutionState::Terminated)
           {
               // Now restore the pages if we are resuming
               prerequisite = Common::SuspensionManager::RestoreAsync();
           }
   
           // if we're starting fresh, prerequisite will execute immediately.
           // if resuming from termination, prerequisite will wait until RestoreAsync() completes.
           prerequisite.then([=]()
           {
               if (rootFrame->Content == nullptr)
               {
                   if (!rootFrame->Navigate(MainPage::typeid, e->Arguments))
                   {
                       throw ref new FailureException("Failed to create initial page");
                   }
               }
               // Place the frame in the current Window
               Window::Current->Content = rootFrame;
               Window::Current->Activate();
           }, task_continuation_context::use_current());
       }
   
       // There is a frame, but is has no content, so navigate to main page
       // and activate the window.
       else if (rootFrame->Content == nullptr)
       {
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
           // Removes the turnstile navigation for startup.
           if (rootFrame->ContentTransitions != nullptr)
           {
               _transitions = ref new TransitionCollection();
               for (auto transition : rootFrame->ContentTransitions)
               {
                   _transitions->Append(transition);
               }
           }
   
           rootFrame->ContentTransitions = nullptr;
           _firstNavigatedToken = rootFrame->Navigated += 
               ref new NavigatedEventHandler(this, &App::RootFrame_FirstNavigated);
   
   
   #endif
           // When the navigation stack isn't restored navigate to the first page,
           // configuring the new page by passing required information as a navigation
           // parameter.
           if (!rootFrame->Navigate(MainPage::typeid, e->Arguments))
           {
               throw ref new FailureException("Failed to create initial page");
           }
   
           // Ensure the current window is active in this code path.
           // we also called this inside the task for the other path.
           Window::Current->Activate();
       }
   }
   

   Ten en cuenta que la clase App está en el proyecto compartido, así que el código que escribimos aquí se ejecutará tanto en la aplicación de Windows como en la de teléfono, salvo si se ha definido la macro WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP.

6. El controlador OnSuspending es más simple. Se llama cuando el sistema cierra la aplicación, no cuando la cierra el usuario. Simplemente dejamos que SuspensionManager se encargue. Llamará al controlador de eventos SaveState en cada página de la aplicación y serializará todos los objetos que tengamos almacenados en el objeto PageState de cada. Luego, cuando se reanude la aplicación, restaurará los valores en las páginas. Mira SuspensionManager.cpp si quieres ver el código.

   Reemplaza el cuerpo actual de la función OnSuspending con este código:

   void App::OnSuspending(Object^ sender, SuspendingEventArgs^ e)
   {
       (void)sender;   // Unused parameter
       (void)e;        // Unused parameter
   
       // Save application state and stop any background activity
       auto deferral = e->SuspendingOperation->GetDeferral();
       create_task(Common::SuspensionManager::SaveAsync())
           .then([deferral]()
       {
           deferral->Complete();
       });
   }
   

En este punto podríamos iniciar la aplicación y descargar los datos de fuentes, pero no podríamos mostrarlos al usuario. Hagamos algo al respecto.

Parte 7: Agregar la primera página de interfaz de usuario (una lista de fuentes)

Cuando se abre la aplicación, queremos mostrar al usuario una colección de nivel superior de todas las fuentes que se han descargado. Los usuarios pueden hacer clic o presionar sobre un elemento de la colección para navegar a una fuente en particular que contendrá una colección de las entradas o los elementos de fuente. Ya hemos agregado las páginas. En la aplicación de Windows es una página de elementos que muestra un control GridView cuando el dispositivo está en horizontal y un control ListView cuando el dispositivo está en vertical. Los proyectos de teléfono no tienen una página de elementos, así que disponemos de una página básica a la que le agregamos un control ListView manualmente. La vista de lista se ajustará automáticamente cuando cambie la orientación del dispositivo.

Generalmente, en todas las páginas hay que realizar las mismas tareas básicas:

• Agregar el marcado XAML que describe la interfaz de usuario y enlaza los datos
• Agregar código personalizado a las funciones miembro LoadState y SaveState
• Controlar los eventos (al menos uno de ellos suele tener código que navega a la página siguiente)

Lo haremos por orden, empezando por el proyecto de Windows:

Agregar el marcado XAML (MainPage)

La página principal presenta cada uno de los objetos FeedData en un control GridView. Para describir la apariencia que deben tener los datos, creamos un DataTemplate, que es un árbol XAML que se va a usar para presentar cada elemento. La única limitación a las posibilidades de DataTemplates en cuanto a diseños, fuentes, colores, etc. son tu imaginación y sensibilidad estilística. En esta página usaremos una plantilla sencilla que, presentada, tendrá la apariencia siguiente:

1. Un estilo XAML es como un estilo en Microsoft Word: una manera práctica de agrupar un conjunto de valores de propiedad en un elemento XAML, el "TargetType". Un estilo puede basarse en otro estilo. El atributo "x: Key" especifica el nombre que utilizamos para referirnos al estilo cuando lo utilizamos.

   Coloca esta plantilla y sus estilos auxiliares en el nodo Page.Resources de MainPage.xaml (Windows 8.1). Solo se utilizan en MainPage.

   <Style x:Key="GridTitleTextStyle" TargetType="TextBlock" 
           BasedOn="{StaticResource BaseTextBlockStyle}">
       <Setter Property="FontSize" Value="26.667"/>
       <Setter Property="Margin" Value="12,0,12,2"/>
   </Style>
   
   <Style x:Key="GridDescriptionTextStyle" TargetType="TextBlock" 
           BasedOn="{StaticResource BaseTextBlockStyle}">
       <Setter Property="VerticalAlignment" Value="Bottom"/>
       <Setter Property="Margin" Value="12,0,12,60"/>
   </Style>
   
   <DataTemplate x:Key="DefaultGridItemTemplate">
       <Grid HorizontalAlignment="Left" Width="250" Height="250"
           Background="{StaticResource BlockBackgroundBrush}" >
           <StackPanel Margin="0,22,16,0">
               <TextBlock Text="{Binding Title}" 
                           Style="{StaticResource GridTitleTextStyle}" 
                           Margin="10,10,10,10"/>
               <TextBlock Text="{Binding Description}" 
                           Style="{StaticResource GridDescriptionTextStyle}"
                           Margin="10,10,10,10" />
           </StackPanel>
           <Border BorderBrush="DarkRed" BorderThickness="4" VerticalAlignment="Bottom">
               <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" 
                           Background="{StaticResource GreenBlockBackgroundBrush}">
                   <TextBlock Text="Last Updated" FontWeight="Bold" Margin="12,4,0,8" 
                               Height="42"/>
                   <TextBlock Text="{Binding PubDate, Converter={StaticResource dateConverter}}" 
                               FontWeight="ExtraBold" Margin="4,4,12,8" Height="42" Width="88"/>
               </StackPanel>
           </Border>
       </Grid>
   </DataTemplate>
   

   Verás una línea ondulada roja debajo de GreenBlockBackgroundBrush de la que nos ocuparemos más tarde.

2. Todavía en MainPage.xaml (Windows 8.1), elimina el elemento AppName local de la página para que no oculte el elemento global que vamos a agregar en el ámbito App.

3. Agrega un CollectionViewSource en el nodo Page.Resources. Este objeto conecta nuestro control ListView con el modelo de datos:

   <!-- Collection of items displayed by this page -->
           <CollectionViewSource
           x:Name="itemsViewSource"
           Source="{Binding Items}"/>
   

   Ten en cuenta que el elemento Page ya tiene un atributo DataContext establecido en la propiedad DefaultViewModel de la clase MainPage. Esa propiedad la establecemos para que sea un FeedDataSource, con lo que CollectionViewSource busca y encuentra allí una colección Items.

4. En App.xaml vamos a agregar una cadena de recurso global para el nombre de la aplicación, junto con algunos recursos adicionales a los que se hará referencia desde varias páginas de la aplicación. Al colocar aquí los recursos, no necesitamos definirlos por separado en cada página. Agrega estos elementos al nodo Resources en App.xaml:

           <x:String x:Key="AppName">Simple Blog Reader</x:String>        
   
           <SolidColorBrush x:Key="WindowsBlogBackgroundBrush" Color="#FF0A2562"/>
           <SolidColorBrush x:Key="GreenBlockBackgroundBrush" Color="#FF6BBD46"/>
           <Style x:Key="WindowsBlogLayoutRootStyle" TargetType="Panel">
               <Setter Property="Background" 
                       Value="{StaticResource WindowsBlogBackgroundBrush}"/>
           </Style>
   
           <!-- Green square in all ListViews that displays the date -->
           <ControlTemplate x:Key="DateBlockTemplate">
               <Viewbox Stretch="Fill">
                   <Canvas Height="86" Width="86"  Margin="4,0,4,4" 
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                       <TextBlock TextTrimming="WordEllipsis" 
                                  Padding="0,0,0,0"
                                  TextWrapping="NoWrap" 
                                  Width="Auto"
                                  Height="Auto" 
                                  FontSize="32" 
                                  FontWeight="Bold">
                           <TextBlock.Text>
                               <Binding Path="PubDate" 
                                        Converter="{StaticResource dateConverter}"
                                        ConverterParameter="month"/>
                           </TextBlock.Text>
                       </TextBlock>
   
                       <TextBlock TextTrimming="WordEllipsis" 
                                  TextWrapping="Wrap" 
                                  Width="Auto" 
                                  Height="Auto" 
                                  FontSize="32" 
                                  FontWeight="Bold" 
                                  Canvas.Top="36">
                           <TextBlock.Text>
                               <Binding Path="PubDate"  
                                        Converter="{StaticResource dateConverter}"
                                        ConverterParameter="day"/>
                           </TextBlock.Text>
                       </TextBlock>
   
                       <Line Stroke="White" 
                             StrokeThickness="2" X1="50" Y1="46" X2="50" Y2="80" />
   
                       <TextBlock TextWrapping="Wrap"  
                                  Height="Auto"  
                                  FontSize="18" 
                                  FontWeight="Bold"
                            FontStretch="Condensed"
                                  LineHeight="18"
                                  LineStackingStrategy="BaselineToBaseline"
                                  Canvas.Top="38" 
                                  Canvas.Left="56">
                           <TextBlock.Text>
                               <Binding Path="PubDate" 
                                        Converter="{StaticResource dateConverter}"
                                        ConverterParameter="year"  />
                           </TextBlock.Text>
                       </TextBlock>
                   </Canvas>
               </Viewbox>
           </ControlTemplate>
   
           <!-- Describes the layout for items in all ListViews -->
           <DataTemplate x:Name="ListItemTemplate">
               <Grid Margin="5,0,0,0">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="72"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Grid.RowDefinitions>
                       <RowDefinition MaxHeight="54"></RowDefinition>
                   </Grid.RowDefinitions>
                   <!-- Green date block -->
                   <Border Background="{StaticResource GreenBlockBackgroundBrush}"
                           VerticalAlignment="Top">
                       <ContentControl Template="{StaticResource DateBlockTemplate}" />
                   </Border>
                   <TextBlock Grid.Column="1"
                              Text="{Binding Title}"
                              Margin="10,0,0,0" FontSize="20" 
                              TextWrapping="Wrap"
                              MaxHeight="72" 
                              Foreground="#FFFE5815" />
               </Grid>
           </DataTemplate>
   

MainPage muestra una lista de las fuentes. Cuando el dispositivo tenga orientación horizontal, usaremos un control GridView, que permite el desplazamiento horizontal. En orientación vertical usaremos un control ListView, que permite el desplazamiento vertical. Queremos que el usuario pueda utilizar la aplicación en cualquier orientación. Es relativamente fácil implementar compatibilidad para cambios de orientación:

• Agrega ambos controles a la página y establece ItemSource en el mismo collectionViewSource. Establece la propiedad Visibility de ListView en Collapsed para que no esté visible de forma predeterminada.
• Crea un conjunto de dos objetos VisualState, uno que describa el comportamiento de la interfaz de usuario para la orientación horizontal y otro que describa el comportamiento para la orientación vertical.
• Controla el evento Window::SizeChanged, que se desencadena cuando la orientación cambia o el usuario estrecha o ensancha la ventana. Examina el alto y el ancho del nuevo tamaño. Si el alto es mayor que el ancho, invoca el VisualState de orientación vertical. De lo contrario, invoca el estado de orientación horizontal.

Agregar GridView y ListView

1. En MainPage.xaml, agrega estos controles GridView y ListView, así como la cuadrícula que contiene el botón de retroceso y el título de la página:

    <Grid Style="{StaticResource WindowsBlogLayoutRootStyle}">
           <Grid.ChildrenTransitions>
               <TransitionCollection>
                   <EntranceThemeTransition/>
               </TransitionCollection>
           </Grid.ChildrenTransitions>
           <Grid.RowDefinitions>
               <RowDefinition Height="140"/>
               <RowDefinition Height="*"/>
           </Grid.RowDefinitions>
   
           <!-- Horizontal scrolling grid -->
           <GridView
               x:Name="ItemGridView"
               AutomationProperties.AutomationId="ItemsGridView"
               AutomationProperties.Name="Items"
               TabIndex="1"
               Grid.RowSpan="2"
               Padding="116,136,116,46"
               ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               SelectionMode="None"
               ItemTemplate="{StaticResource DefaultGridItemTemplate}"
               IsItemClickEnabled="true"
               IsSwipeEnabled="false"
               ItemClick="ItemGridView_ItemClick"  Margin="0,-10,0,10">
           </GridView>
   
           <!-- Vertical scrolling list -->
           <ListView
               x:Name="ItemListView"
               Visibility="Collapsed"            
               AutomationProperties.AutomationId="ItemsListView"
               AutomationProperties.Name="Items"
               TabIndex="1" Grid.Row="1" Margin="-10,-10,0,0"      
               IsItemClickEnabled="True"
               ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               IsSwipeEnabled="False"            
               ItemClick="ItemGridView_ItemClick"
               ItemTemplate="{StaticResource ListItemTemplate}">
   
               <ListView.ItemContainerStyle>
                   <Style TargetType="FrameworkElement">
                       <Setter Property="Margin" Value="2,0,0,2"/>
                   </Style>
               </ListView.ItemContainerStyle>
           </ListView>
   
           <!-- Back button and page title -->
           <Grid>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="120"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Button x:Name="backButton" Margin="39,59,39,0" 
                       Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                       Style="{StaticResource NavigationBackButtonNormalStyle}"
                       VerticalAlignment="Top"
                       AutomationProperties.Name="Back"
                       AutomationProperties.AutomationId="BackButton"
                       AutomationProperties.ItemType="Navigation Button"/>
               <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
           </Grid>
   

2. Ten en cuenta que ambos controles usan la misma función miembro para el evento ItemClick. Coloca el punto de inserción en uno de ellos y presiona F12 para generar automáticamente el stub del controlador de eventos. Más adelante agregaremos el código para él.

3. Pega la definición de VisualStateGroups, de modo que este sea el último elemento dentro de la cuadrícula raíz (no lo pongas fuera de la cuadrícula porque no funcionará). Tenga en cuenta que hay dos estados, pero que solo uno se define de manera explícita. Esto se debe a que el estado DefaultLayout ya está descrito en el código XAML correspondiente a esta página.

   <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="ViewStates">
           <VisualState x:Name="DefaultLayout"/>
           <VisualState x:Name="Portrait">
               <Storyboard>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
                          Storyboard.TargetProperty="Visibility">
                   <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
               </ObjectAnimationUsingKeyFrames>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" 
                          Storyboard.TargetProperty="Visibility">
                   <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
               </ObjectAnimationUsingKeyFrames>
              </Storyboard>
           </VisualState>
           </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
   

4. Ahora ya tenemos la interfaz de usuario totalmente definida y simplemente tenemos que indicarle a la página lo que debe hacer cuando se cargue.

LoadState y SaveState (MainPage de la aplicación de Windows)

Las dos funciones miembro principales a las que debemos prestar atención en una página XAML son LoadState y (a veces) SaveState. En LoadState rellenamos los datos de la página y en SaveState guardamos los datos que serán necesarios para volver a rellenar la página en caso de que se suspenda la aplicación y se inicie de nuevo.

• Reemplaza la implementación de LoadState con este código, que inserta los datos de fuente que cargó (o está cargando) el feedDataSource que creamos en el inicio y pone esos datos en nuestro ViewModel para esta página.

  void MainPage::LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e)
  {     
      auto feedDataSource = safe_cast<FeedDataSource^>  
      (App::Current->Resources->Lookup("feedDataSource"));
      this->DefaultViewModel->Insert("Items", feedDataSource->Feeds);
  }
  

  No tenemos que llamar a SaveState para MainPage porque no hay nada que esta página deba recordar. Siempre muestra todas las fuentes.

Controladores de eventos (MainPage de aplicación de Windows)

Desde un punto de vista conceptual, todas las páginas residen dentro de Frame (marco). Es el Frame que utilizamos para navegar por las páginas. El segundo parámetro de una llamada de función Navigate se utiliza para pasar datos de una página a otra. Siempre que se suspende la aplicación, SuspensionManager almacena y serializa automáticamente todos los objetos que pasemos aquí para que los valores se puedan restaurar cuando se reanude la aplicación. El SuspensionManager predeterminado solo admite los tipos integrados String y Guid. Si necesitas una serialización más sofisticada, puedes crear un SuspensionManager personalizado. Aquí pasamos una cadena String que SplitPage utilizará para buscar la fuente actual.

Para navegar por clics en elementos

1. Cuando el usuario hace clic en un elemento de la cuadrícula, el controlador de eventos recibe ese elemento, lo establece como "fuente actual" por si la aplicación se suspende más adelante y luego navega a la siguiente página. El título de la fuente se pasa a la página siguiente para que esa página pueda buscar los datos de la fuente. Este es el código que se debe pegar:

   void MainPage::ItemGridView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
   {
       // We must manually cast from Object^ to FeedData^.
       auto feedData = safe_cast<FeedData^>(e->ClickedItem);
   
       // Store the feed and tell other pages it's loaded and ready to go.
       auto app = safe_cast<App^>(App::Current);
       app->SetCurrentFeed(feedData);
   
       // Only navigate if there are items in the feed
       if (feedData->Items->Size > 0)
       {
           // Navigate to SplitPage and pass the title of the selected feed.
           // SplitPage will receive this in its LoadState method in the 
           // navigationParamter.
           this->Frame->Navigate(SplitPage::typeid, feedData->Title);
       }
   }
   

2. Para que el código anterior se compile, necesitamos colocar la directiva #include SplitPage.xaml.h en la parte superior del archivo actual, MainPage.xaml.cpp (Windows 8.1):

   #include "SplitPage.xaml.h"
   

Para controlar el evento Page_SizeChanged

• En MainPage.xaml, agrega un nombre para el elemento raíz agregando x:Name="pageRoot" a los atributos del elemento Page raíz y luego agrega un atributo SizeChanged="pageRoot_SizeChanged" para crear un controlador de eventos. Reemplaza la implementación del controlador en el archivo cpp por este código:

  void MainPage::pageRoot_SizeChanged(Platform::Object^ sender, SizeChangedEventArgs^ e)
  {
      if (e->NewSize.Height / e->NewSize.Width >= 1)
      {
          VisualStateManager::GoToState(this, "Portrait", false);
      }
      else
      {
          VisualStateManager::GoToState(this, "DefaultLayout", false);
      }
  } 
  

  A continuación, agrega la declaración de esta función a la clase MainPage en MainPage.xaml.h.

  private:
      void pageRoot_SizeChanged(Platform::Object^ sender, SizeChangedEventArgs^ e);
  

  El código es sencillo. Si ahora ejecutas la aplicación en el simulador y giras el dispositivo, verás que la interfaz de usuario cambia entre GridView y ListView.

Agregar XAML (MainPage de la aplicación para teléfono)

Ahora pondremos en funcionamiento la página principal de la aplicación para teléfono. Aquí habrá mucho menos código, ya que utilizaremos todo el código que pusimos en el proyecto compartido. Además, las aplicaciones para teléfono no admiten controles GridView porque las pantallas son demasiado pequeñas para que funcione bien. Por lo tanto, vamos a usar un control ListView que se ajustará automáticamente a la orientación horizontal sin necesidad de ningún cambio en VisualState. Empezaremos por agregar el atributo DataContext en el elemento Page. En una página básica de teléfono esto no se genera de manera automática como en un ItemsPage o SplitPage.

1. Para implementar la navegación de páginas, las páginas necesitan NavigationHelper, que a su vez depende de RelayCommand. Agrega un elemento nuevo, RelayCommand.h y copia este código en él:

   //
   // RelayCommand.h
   // Declaration of the RelayCommand and associated classes
   //
   
   #pragma once
   
   // <summary>
   // A command whose sole purpose is to relay its functionality 
   // to other objects by invoking delegates. 
   // The default return value for the CanExecute method is 'true'.
   // <see cref="RaiseCanExecuteChanged"/> needs to be called whenever
   // <see cref="CanExecute"/> is expected to return a different value.
   // </summary>
   
   
   namespace SimpleBlogReader
   {
       namespace Common
       {
           [Windows::Foundation::Metadata::WebHostHidden]
           public ref class RelayCommand sealed :[Windows::Foundation::Metadata::Default] Windows::UI::Xaml::Input::ICommand
           {
           public:
               virtual event Windows::Foundation::EventHandler<Object^>^ CanExecuteChanged;
               virtual bool CanExecute(Object^ parameter);
               virtual void Execute(Object^ parameter);
               virtual ~RelayCommand();
   
           internal:
               RelayCommand(std::function<bool(Platform::Object^)> canExecuteCallback,
                   std::function<void(Platform::Object^)> executeCallback);
               void RaiseCanExecuteChanged();
   
           private:
               std::function<bool(Platform::Object^)> _canExecuteCallback;
               std::function<void(Platform::Object^)> _executeCallback;
           };
       }
   }
   

2. En la carpeta Common, agrega RelayCommand.cpp y copia este código en él:

   //
   // RelayCommand.cpp
   // Implementation of the RelayCommand and associated classes
   //
   
   #include "pch.h"
   #include "RelayCommand.h"
   #include "NavigationHelper.h"
   
   using namespace SimpleBlogReader::Common;
   
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::System;
   using namespace Windows::UI::Core;
   using namespace Windows::UI::ViewManagement;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Navigation;
   
   /// <summary>
   /// Determines whether this <see cref="RelayCommand"/> can execute in its current state.
   /// </summary>
   /// <param name="parameter">
   /// Data used by the command. If the command does not require data to be passed, this object can be set to null.
   /// </param>
   /// <returns>true if this command can be executed; otherwise, false.</returns>
   bool RelayCommand::CanExecute(Object^ parameter)
   {
       return (_canExecuteCallback) (parameter);
   }
   
   /// <summary>
   /// Executes the <see cref="RelayCommand"/> on the current command target.
   /// </summary>
   /// <param name="parameter">
   /// Data used by the command. If the command does not require data to be passed, this object can be set to null.
   /// </param>
   void RelayCommand::Execute(Object^ parameter)
   {
       (_executeCallback) (parameter);
   }
   
   /// <summary>
   /// Method used to raise the <see cref="CanExecuteChanged"/> event
   /// to indicate that the return value of the <see cref="CanExecute"/>
   /// method has changed.
   /// </summary>
   void RelayCommand::RaiseCanExecuteChanged()
   {
       CanExecuteChanged(this, nullptr);
   }
   
   /// <summary>
   /// RelayCommand Class Destructor.
   /// </summary>
   RelayCommand::~RelayCommand()
   {
       _canExecuteCallback = nullptr;
       _executeCallback = nullptr;
   };
   
   /// <summary>
   /// Creates a new command that can always execute.
   /// </summary>
   /// <param name="canExecuteCallback">The execution status logic.</param>
   /// <param name="executeCallback">The execution logic.</param>
   RelayCommand::RelayCommand(std::function<bool(Platform::Object^)> canExecuteCallback,
       std::function<void(Platform::Object^)> executeCallback) :
       _canExecuteCallback(canExecuteCallback),
       _executeCallback(executeCallback)
       {
       }
   

3. En la carpeta Common, agrega un archivo NavigationHelper.h y copia este código en él:

   //
   // NavigationHelper.h
   // Declaration of the NavigationHelper and associated classes
   //
   
   #pragma once
   
   #include "RelayCommand.h"
   
   namespace SimpleBlogReader
   {
       namespace Common
       {
           /// <summary>
           /// Class used to hold the event data required when a page attempts to load state.
           /// </summary>
           public ref class LoadStateEventArgs sealed
           {
           public:
   
               /// <summary>
               /// The parameter value passed to <see cref="Frame->Navigate(Type, Object)"/> 
               /// when this page was initially requested.
               /// </summary>
               property Platform::Object^ NavigationParameter
               {
                   Platform::Object^ get();
               }
   
               /// <summary>
               /// A dictionary of state preserved by this page during an earlier
               /// session.  This will be null the first time a page is visited.
               /// </summary>
               property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
               {
                   Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
               }
   
           internal:
               LoadStateEventArgs(Platform::Object^ navigationParameter, Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ pageState);
   
           private:
               Platform::Object^ _navigationParameter;
               Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ _pageState;
           };
   
           /// <summary>
           /// Represents the method that will handle the <see cref="NavigationHelper->LoadState"/>event
           /// </summary>
           public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);
   
           /// <summary>
           /// Class used to hold the event data required when a page attempts to save state.
           /// </summary>
           public ref class SaveStateEventArgs sealed
           {
           public:
   
               /// <summary>
               /// An empty dictionary to be populated with serializable state.
               /// </summary>
               property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
               {
                   Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
               }
   
           internal:
               SaveStateEventArgs(Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ pageState);
   
           private:
               Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ _pageState;
           };
   
           /// <summary>
           /// Represents the method that will handle the <see cref="NavigationHelper->SaveState"/>event
           /// </summary>
           public delegate void SaveStateEventHandler(Platform::Object^ sender, SaveStateEventArgs^ e);
   
           /// <summary>
           /// NavigationHelper aids in navigation between pages.  It provides commands used to 
           /// navigate back and forward as well as registers for standard mouse and keyboard 
           /// shortcuts used to go back and forward in Windows and the hardware back button in
           /// Windows Phone.  In addition it integrates SuspensionManger to handle process lifetime
           /// management and state management when navigating between pages.
           /// </summary>
           /// <example>
           /// To make use of NavigationHelper, follow these two steps or
           /// start with a BasicPage or any other Page item template other than BlankPage.
           /// 
           /// 1) Create an instance of the NavigationHelper somewhere such as in the 
           ///     constructor for the page and register a callback for the LoadState and 
           ///     SaveState events.
           /// <code>
           ///     MyPage::MyPage()
           ///     {
           ///         InitializeComponent();
           ///         auto navigationHelper = ref new Common::NavigationHelper(this);
           ///         navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MyPage::LoadState);
           ///         navigationHelper->SaveState += ref new Common::SaveStateEventHandler(this, &MyPage::SaveState);
           ///     }
           ///     
           ///     void MyPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
           ///     { }
           ///     void MyPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
           ///     { }
           /// </code>
           /// 
           /// 2) Register the page to call into the NavigationHelper whenever the page participates 
           ///     in navigation by overriding the <see cref="Windows::UI::Xaml::Controls::Page::OnNavigatedTo"/> 
           ///     and <see cref="Windows::UI::Xaml::Controls::Page::OnNavigatedFrom"/> events.
           /// <code>
           ///     void MyPage::OnNavigatedTo(NavigationEventArgs^ e)
           ///     {
           ///         NavigationHelper->OnNavigatedTo(e);
           ///     }
           ///
           ///     void MyPage::OnNavigatedFrom(NavigationEventArgs^ e)
           ///     {
           ///         NavigationHelper->OnNavigatedFrom(e);
           ///     }
           /// </code>
           /// </example>
           [Windows::Foundation::Metadata::WebHostHidden]
           [Windows::UI::Xaml::Data::Bindable]
           public ref class NavigationHelper sealed
           {
           public:
               /// <summary>
               /// <see cref="RelayCommand"/> used to bind to the back Button's Command property
               /// for navigating to the most recent item in back navigation history, if a Frame
               /// manages its own navigation history.
               /// 
               /// The <see cref="RelayCommand"/> is set up to use the virtual method <see cref="GoBack"/>
               /// as the Execute Action and <see cref="CanGoBack"/> for CanExecute.
               /// </summary>
               property RelayCommand^ GoBackCommand
               {
                   RelayCommand^ get();
               }
   
               /// <summary>
               /// <see cref="RelayCommand"/> used for navigating to the most recent item in 
               /// the forward navigation history, if a Frame manages its own navigation history.
               /// 
               /// The <see cref="RelayCommand"/> is set up to use the virtual method <see cref="GoForward"/>
               /// as the Execute Action and <see cref="CanGoForward"/> for CanExecute.
               /// </summary>
               property RelayCommand^ GoForwardCommand
               {
                   RelayCommand^ get();
               }
   
           internal:
               NavigationHelper(Windows::UI::Xaml::Controls::Page^ page,
                   RelayCommand^ goBack = nullptr,
                   RelayCommand^ goForward = nullptr);
   
               bool CanGoBack();
               void GoBack();
               bool CanGoForward();
               void GoForward();
   
               void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e);
               void OnNavigatedFrom(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e);
   
               event LoadStateEventHandler^ LoadState;
               event SaveStateEventHandler^ SaveState;
   
           private:
               Platform::WeakReference _page;
   
               RelayCommand^ _goBackCommand;
               RelayCommand^ _goForwardCommand;
   
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
               Windows::Foundation::EventRegistrationToken _backPressedEventToken;
   
               void HardwareButton_BackPressed(Platform::Object^ sender,
                   Windows::Phone::UI::Input::BackPressedEventArgs^ e);
   #else
               bool _navigationShortcutsRegistered;
               Windows::Foundation::EventRegistrationToken _acceleratorKeyEventToken;
               Windows::Foundation::EventRegistrationToken _pointerPressedEventToken;
   
               void CoreDispatcher_AcceleratorKeyActivated(Windows::UI::Core::CoreDispatcher^ sender,
                   Windows::UI::Core::AcceleratorKeyEventArgs^ e);
               void CoreWindow_PointerPressed(Windows::UI::Core::CoreWindow^ sender,
                   Windows::UI::Core::PointerEventArgs^ e);
   #endif
   
               Platform::String^ _pageKey;
               Windows::Foundation::EventRegistrationToken _loadedEventToken;
               Windows::Foundation::EventRegistrationToken _unloadedEventToken;
               void OnLoaded(Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
               void OnUnloaded(Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
   
               ~NavigationHelper();
           };
       }
   }
   

4. Ahora, agrega el archivo de implementación, NavigationHelper.cpp, en la misma carpeta, con el siguiente código:

   //
   // NavigationHelper.cpp
   // Implementation of the NavigationHelper and associated classes
   //
   
   #include "pch.h"
   #include "NavigationHelper.h"
   #include "RelayCommand.h"
   #include "SuspensionManager.h"
   
   using namespace SimpleBlogReader::Common;
   
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::System;
   using namespace Windows::UI::Core;
   using namespace Windows::UI::ViewManagement;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Interop;
   using namespace Windows::UI::Xaml::Navigation;
   
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
   using namespace Windows::Phone::UI::Input;
   #endif
   
   /// <summary>
   /// Initializes a new instance of the <see cref="LoadStateEventArgs"/> class.
   /// </summary>
   /// <param name="navigationParameter">
   /// The parameter value passed to <see cref="Frame->Navigate(Type, Object)"/> 
   /// when this page was initially requested.
   /// </param>
   /// <param name="pageState">
   /// A dictionary of state preserved by this page during an earlier
   /// session.  This will be null the first time a page is visited.
   /// </param>
   LoadStateEventArgs::LoadStateEventArgs(Object^ navigationParameter, IMap<String^, Object^>^ pageState)
   {
       _navigationParameter = navigationParameter;
       _pageState = pageState;
   }
   
   /// <summary>
   /// Gets the <see cref="NavigationParameter"/> property of <see cref"LoadStateEventArgs"/> class.
   /// </summary>
   Object^ LoadStateEventArgs::NavigationParameter::get()
   {
       return _navigationParameter;
   }
   
   /// <summary>
   /// Gets the <see cref="PageState"/> property of <see cref"LoadStateEventArgs"/> class.
   /// </summary>
   IMap<String^, Object^>^ LoadStateEventArgs::PageState::get()
   {
       return _pageState;
   }
   
   /// <summary>
   /// Initializes a new instance of the <see cref="SaveStateEventArgs"/> class.
   /// </summary>
   /// <param name="pageState">An empty dictionary to be populated with serializable state.</param>
   SaveStateEventArgs::SaveStateEventArgs(IMap<String^, Object^>^ pageState)
   {
       _pageState = pageState;
   }
   
   /// <summary>
   /// Gets the <see cref="PageState"/> property of <see cref"SaveStateEventArgs"/> class.
   /// </summary>
   IMap<String^, Object^>^ SaveStateEventArgs::PageState::get()
   {
       return _pageState;
   }
   
   /// <summary>
   /// Initializes a new instance of the <see cref="NavigationHelper"/> class.
   /// </summary>
   /// <param name="page">A reference to the current page used for navigation.  
   /// This reference allows for frame manipulation and to ensure that keyboard 
   /// navigation requests only occur when the page is occupying the entire window.</param>
   NavigationHelper::NavigationHelper(Page^ page, RelayCommand^ goBack, RelayCommand^ goForward) :
   _page(page),
   _goBackCommand(goBack),
   _goForwardCommand(goForward)
   {
       // When this page is part of the visual tree make two changes:
       // 1) Map application view state to visual state for the page
       // 2) Handle hardware navigation requests
       _loadedEventToken = page->Loaded += ref new RoutedEventHandler(this, &NavigationHelper::OnLoaded);
   
       //// Undo the same changes when the page is no longer visible
       _unloadedEventToken = page->Unloaded += ref new RoutedEventHandler(this, &NavigationHelper::OnUnloaded);
   }
   
   NavigationHelper::~NavigationHelper()
   {
       delete _goBackCommand;
       delete _goForwardCommand;
   
       _page = nullptr;
   }
   
   /// <summary>
   /// Invoked when the page is part of the visual tree
   /// </summary>
   /// <param name="sender">Instance that triggered the event.</param>
   /// <param name="e">Event data describing the conditions that led to the event.</param>
   void NavigationHelper::OnLoaded(Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
   {
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
       _backPressedEventToken = HardwareButtons::BackPressed +=
           ref new EventHandler<BackPressedEventArgs^>(this,
           &NavigationHelper::HardwareButton_BackPressed);
   #else
       Page ^page = _page.Resolve<Page>();
   
       // Keyboard and mouse navigation only apply when occupying the entire window
       if (page != nullptr &&
           page->ActualHeight == Window::Current->Bounds.Height &&
           page->ActualWidth == Window::Current->Bounds.Width)
       {
           // Listen to the window directly so focus isn't required
           _acceleratorKeyEventToken = Window::Current->CoreWindow->Dispatcher->AcceleratorKeyActivated +=
               ref new TypedEventHandler<CoreDispatcher^, AcceleratorKeyEventArgs^>(this,
               &NavigationHelper::CoreDispatcher_AcceleratorKeyActivated);
   
           _pointerPressedEventToken = Window::Current->CoreWindow->PointerPressed +=
               ref new TypedEventHandler<CoreWindow^, PointerEventArgs^>(this,
               &NavigationHelper::CoreWindow_PointerPressed);
   
           _navigationShortcutsRegistered = true;
       }
   #endif
   }
   
   /// <summary>
   /// Invoked when the page is removed from visual tree
   /// </summary>
   /// <param name="sender">Instance that triggered the event.</param>
   /// <param name="e">Event data describing the conditions that led to the event.</param>
   void NavigationHelper::OnUnloaded(Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
   {
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
       HardwareButtons::BackPressed -= _backPressedEventToken;
   #else
       if (_navigationShortcutsRegistered)
       {
           Window::Current->CoreWindow->Dispatcher->AcceleratorKeyActivated -= _acceleratorKeyEventToken;
           Window::Current->CoreWindow->PointerPressed -= _pointerPressedEventToken;
           _navigationShortcutsRegistered = false;
       }
   #endif
   
       // Remove handler and release the reference to page
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           page->Loaded -= _loadedEventToken;
           page->Unloaded -= _unloadedEventToken;
           delete _goBackCommand;
           delete _goForwardCommand;
           _goForwardCommand = nullptr;
           _goBackCommand = nullptr;
       }
   }
   
   #pragma region Navigation support
   
   /// <summary>
   /// Method used by the <see cref="GoBackCommand"/> property
   /// to determine if the <see cref="Frame"/> can go back.
   /// </summary>
   /// <returns>
   /// true if the <see cref="Frame"/> has at least one entry 
   /// in the back navigation history.
   /// </returns>
   bool NavigationHelper::CanGoBack()
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frame = page->Frame;
           return (frame != nullptr && frame->CanGoBack);
       }
   
       return false;
   }
   
   /// <summary>
   /// Method used by the <see cref="GoBackCommand"/> property
   /// to invoke the <see cref="Windows::UI::Xaml::Controls::Frame::GoBack"/> method.
   /// </summary>
   void NavigationHelper::GoBack()
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frame = page->Frame;
           if (frame != nullptr && frame->CanGoBack)
           {
               frame->GoBack();
           }
       }
   }
   
   /// <summary>
   /// Method used by the <see cref="GoForwardCommand"/> property
   /// to determine if the <see cref="Frame"/> can go forward.
   /// </summary>
   /// <returns>
   /// true if the <see cref="Frame"/> has at least one entry 
   /// in the forward navigation history.
   /// </returns>
   bool NavigationHelper::CanGoForward()
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frame = page->Frame;
           return (frame != nullptr && frame->CanGoForward);
       }
   
       return false;
   }
   
   /// <summary>
   /// Method used by the <see cref="GoForwardCommand"/> property
   /// to invoke the <see cref="Windows::UI::Xaml::Controls::Frame::GoBack"/> method.
   /// </summary>
   void NavigationHelper::GoForward()
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frame = page->Frame;
           if (frame != nullptr && frame->CanGoForward)
           {
               frame->GoForward();
           }
       }
   }
   
   /// <summary>
   /// Gets the <see cref="GoBackCommand"/> property of <see cref"NavigationHelper"/> class.
   /// </summary>
   RelayCommand^ NavigationHelper::GoBackCommand::get()
   {
       if (_goBackCommand == nullptr)
       {
           _goBackCommand = ref new RelayCommand(
               [this](Object^) -> bool
           {
               return CanGoBack();
           },
               [this](Object^) -> void
           {
               GoBack();
           }
           );
       }
       return _goBackCommand;
   }
   
   /// <summary>
   /// Gets the <see cref="GoForwardCommand"/> property of <see cref"NavigationHelper"/> class.
   /// </summary>
   RelayCommand^ NavigationHelper::GoForwardCommand::get()
   {
       if (_goForwardCommand == nullptr)
       {
           _goForwardCommand = ref new RelayCommand(
               [this](Object^) -> bool
           {
               return CanGoForward();
           },
               [this](Object^) -> void
           {
               GoForward();
           }
           );
       }
       return _goForwardCommand;
   }
   
   #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
   /// <summary>
   /// Handles the back button press and navigates through the history of the root frame.
   /// </summary>
   void NavigationHelper::HardwareButton_BackPressed(Object^ sender, BackPressedEventArgs^ e)
   {
       if (this->GoBackCommand->CanExecute(nullptr))
       {
           e->Handled = true;
           this->GoBackCommand->Execute(nullptr);
       }
   }
   #else
   /// <summary>
   /// Invoked on every keystroke, including system keys such as Alt key combinations, when
   /// this page is active and occupies the entire window.  Used to detect keyboard navigation
   /// between pages even when the page itself doesn't have focus.
   /// </summary>
   /// <param name="sender">Instance that triggered the event.</param>
   /// <param name="e">Event data describing the conditions that led to the event.</param>
   void NavigationHelper::CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher^ sender,
       AcceleratorKeyEventArgs^ e)
   {
       sender; // Unused parameter
       auto virtualKey = e->VirtualKey;
   
       // Only investigate further when Left, Right, or the dedicated Previous or Next keys
       // are pressed
       if ((e->EventType == CoreAcceleratorKeyEventType::SystemKeyDown ||
           e->EventType == CoreAcceleratorKeyEventType::KeyDown) &&
           (virtualKey == VirtualKey::Left || virtualKey == VirtualKey::Right ||
           virtualKey == VirtualKey::GoBack || virtualKey == VirtualKey::GoForward))
       {
           auto coreWindow = Window::Current->CoreWindow;
           auto downState = Windows::UI::Core::CoreVirtualKeyStates::Down;
           bool menuKey = (coreWindow->GetKeyState(VirtualKey::Menu) & downState) == downState;
           bool controlKey = (coreWindow->GetKeyState(VirtualKey::Control) & downState) == downState;
           bool shiftKey = (coreWindow->GetKeyState(VirtualKey::Shift) & downState) == downState;
           bool noModifiers = !menuKey && !controlKey && !shiftKey;
           bool onlyAlt = menuKey && !controlKey && !shiftKey;
   
           if ((virtualKey == VirtualKey::GoBack && noModifiers) ||
               (virtualKey == VirtualKey::Left && onlyAlt))
           {
               // When the previous key or Alt+Left are pressed navigate back
               e->Handled = true;
               GoBackCommand->Execute(this);
           }
           else if ((virtualKey == VirtualKey::GoForward && noModifiers) ||
               (virtualKey == VirtualKey::Right && onlyAlt))
           {
               // When the next key or Alt+Right are pressed navigate forward
               e->Handled = true;
               GoForwardCommand->Execute(this);
           }
       }
   }
   
   /// <summary>
   /// Invoked on every mouse click, touch screen tap, or equivalent interaction when this
   /// page is active and occupies the entire window.  Used to detect browser-style next and
   /// previous mouse button clicks to navigate between pages.
   /// </summary>
   /// <param name="sender">Instance that triggered the event.</param>
   /// <param name="e">Event data describing the conditions that led to the event.</param>
   void NavigationHelper::CoreWindow_PointerPressed(CoreWindow^ sender, PointerEventArgs^ e)
   {
       auto properties = e->CurrentPoint->Properties;
   
       // Ignore button chords with the left, right, and middle buttons
       if (properties->IsLeftButtonPressed ||
           properties->IsRightButtonPressed ||
           properties->IsMiddleButtonPressed)
       {
           return;
       }
   
       // If back or foward are pressed (but not both) navigate appropriately
       bool backPressed = properties->IsXButton1Pressed;
       bool forwardPressed = properties->IsXButton2Pressed;
       if (backPressed ^ forwardPressed)
       {
           e->Handled = true;
           if (backPressed)
           {
               if (GoBackCommand->CanExecute(this))
               {
                   GoBackCommand->Execute(this);
               }
           }
           else
           {
               if (GoForwardCommand->CanExecute(this))
               {
                   GoForwardCommand->Execute(this);
               }
           }
       }
   }
   #endif
   
   #pragma endregion
   
   #pragma region Process lifetime management
   
   /// <summary>
   /// Invoked when this page is about to be displayed in a Frame.
   /// </summary>
   /// <param name="e">Event data that describes how this page was reached.  The Parameter
   /// property provides the group to be displayed.</param>
   void NavigationHelper::OnNavigatedTo(NavigationEventArgs^ e)
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frameState = SuspensionManager::SessionStateForFrame(page->Frame);
           _pageKey = "Page-" + page->Frame->BackStackDepth;
   
           if (e->NavigationMode == NavigationMode::New)
           {
               // Clear existing state for forward navigation when adding a new page to the
               // navigation stack
               auto nextPageKey = _pageKey;
               int nextPageIndex = page->Frame->BackStackDepth;
               while (frameState->HasKey(nextPageKey))
               {
                   frameState->Remove(nextPageKey);
                   nextPageIndex++;
                   nextPageKey = "Page-" + nextPageIndex;
               }
   
               // Pass the navigation parameter to the new page
               LoadState(this, ref new LoadStateEventArgs(e->Parameter, nullptr));
           }
           else
           {
               // Pass the navigation parameter and preserved page state to the page, using
               // the same strategy for loading suspended state and recreating pages discarded
               // from cache
               LoadState(this, ref new LoadStateEventArgs(e->Parameter, safe_cast<IMap<String^, Object^>^>(frameState->Lookup(_pageKey))));
           }
       }
   }
   
   /// <summary>
   /// Invoked when this page will no longer be displayed in a Frame.
   /// </summary>
   /// <param name="e">Event data that describes how this page was reached.  The Parameter
   /// property provides the group to be displayed.</param>
   void NavigationHelper::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       Page ^page = _page.Resolve<Page>();
       if (page != nullptr)
       {
           auto frameState = SuspensionManager::SessionStateForFrame(page->Frame);
           auto pageState = ref new Map<String^, Object^>();
           SaveState(this, ref new SaveStateEventArgs(pageState));
           frameState->Insert(_pageKey, pageState);
       }
   }
   #pragma endregion
   

5. Agrega código para incluir NavigationHelper en el archivo de encabezado MainPage.xaml.h, así como la propiedad DefaultViewModel que necesitaremos más adelante.

   //
   // MainPage.xaml.h
   // Declaration of the MainPage class
   //
   
   #pragma once
   
   #include "MainPage.g.h"
   #include "Common\NavigationHelper.h"
   
   namespace SimpleBlogReader
   {
   
       namespace WFC = Windows::Foundation::Collections;
       namespace WUIX = Windows::UI::Xaml;
       namespace WUIXNav = Windows::UI::Xaml::Navigation;
       namespace WUIXControls = Windows::UI::Xaml::Controls;
   
       /// <summary>
       /// A basic page that provides characteristics common to most applications.
       /// </summary>
       [Windows::Foundation::Metadata::WebHostHidden]
       public ref class MainPage sealed
       {
       public:
           MainPage();
   
           /// <summary>
           /// Gets the view model for this <see cref="Page"/>. 
           /// This can be changed to a strongly typed view model.
           /// </summary>
           property WFC::IObservableMap<Platform::String^, Platform::Object^>^ DefaultViewModel
           {
               WFC::IObservableMap<Platform::String^, Platform::Object^>^  get();
           }
   
           /// <summary>
           /// Gets the <see cref="NavigationHelper"/> associated with this <see cref="Page"/>.
           /// </summary>
           property Common::NavigationHelper^ NavigationHelper
           {
               Common::NavigationHelper^ get();
           }
   
       protected:
           virtual void OnNavigatedTo(WUIXNav::NavigationEventArgs^ e) override;
           virtual void OnNavigatedFrom(WUIXNav::NavigationEventArgs^ e) override;
   
       private:
           void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
           void SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e);
   
           static WUIX::DependencyProperty^ _defaultViewModelProperty;
           static WUIX::DependencyProperty^ _navigationHelperProperty;
   
       };
   
   }
   

6. En MainPage.xaml.cpp, agrega la implementación de NavigationHelper y códigos auxiliares para cargar y guardar el estado, y propiedades DefaultViewModel. También agregarás las directivas using de espacio de nombres, de modo que el código final tenga este aspecto:

   //
   // MainPage.xaml.cpp
   // Implementation of the MainPage class
   //
   
   #include "pch.h"
   #include "MainPage.xaml.h"
   
   using namespace SimpleBlogReader;
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Controls::Primitives;
   using namespace Windows::UI::Xaml::Data;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Media;
   using namespace Windows::UI::Xaml::Navigation;
   using namespace Windows::UI::Xaml::Interop;
   
   // The Basic Page item template is documented at https://go.microsoft.com/fwlink/?LinkID=390556
   
   MainPage::MainPage()
   {
       InitializeComponent();
       SetValue(_defaultViewModelProperty, 
           ref new Platform::Collections::Map<String^, Object^>(std::less<String^>()));
       auto navigationHelper = ref new Common::NavigationHelper(this);
       SetValue(_navigationHelperProperty, navigationHelper);
       navigationHelper->LoadState += 
           ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
       navigationHelper->SaveState += 
           ref new Common::SaveStateEventHandler(this, &MainPage::SaveState);
   }
   
   DependencyProperty^ MainPage::_defaultViewModelProperty =
   DependencyProperty::Register("DefaultViewModel",
   TypeName(IObservableMap<String^, Object^>::typeid), TypeName(MainPage::typeid), nullptr);
   
   /// <summary>
   /// Used as a trivial view model.
   /// </summary>
   IObservableMap<String^, Object^>^ MainPage::DefaultViewModel::get()
   {
       return safe_cast<IObservableMap<String^, Object^>^>(GetValue(_defaultViewModelProperty));
   }
   
   DependencyProperty^ MainPage::_navigationHelperProperty =
   DependencyProperty::Register("NavigationHelper",
   TypeName(Common::NavigationHelper::typeid), TypeName(MainPage::typeid), nullptr);
   
   /// <summary>
   /// Gets an implementation of <see cref="NavigationHelper"/> designed to be
   /// used as a trivial view model.
   /// </summary>
   Common::NavigationHelper^ MainPage::NavigationHelper::get()
   {
       return safe_cast<Common::NavigationHelper^>(GetValue(_navigationHelperProperty));
   }
   
   #pragma region Navigation support
   
   /// The methods provided in this section are simply used to allow
   /// NavigationHelper to respond to the page's navigation methods.
   /// 
   /// Page specific logic should be placed in event handlers for the  
   /// <see cref="NavigationHelper::LoadState"/>
   /// and <see cref="NavigationHelper::SaveState"/>.
   /// The navigation parameter is available in the LoadState method 
   /// in addition to page state preserved during an earlier session.
   
   void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedTo(e);
   }
   
   void MainPage::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedFrom(e);
   }
   
   #pragma endregion
   
   /// <summary>
   /// Populates the page with content passed during navigation. Any saved state is also
   /// provided when recreating a page from a prior session.
   /// </summary>
   /// <param name="sender">
   /// The source of the event; typically <see cref="NavigationHelper"/>
   /// </param>
   /// <param name="e">Event data that provides both the navigation parameter passed to
   /// <see cref="Frame::Navigate(Type, Object)"/> when this page was initially requested and
   /// a dictionary of state preserved by this page during an earlier
   /// session. The state will be null the first time a page is visited.</param>
   void MainPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
    (void) sender; // Unused parameter
       (void) e; // Unused parameter
   }
   
   /// <summary>
   /// Preserves state associated with this page in case the application is suspended or the
   /// page is discarded from the navigation cache.  Values must conform to the serialization
   /// requirements of <see cref="SuspensionManager::SessionState"/>.
   /// </summary>
   /// <param name="sender">The source of the event; typically <see cref="NavigationHelper"/></param>
   /// <param name="e">Event data that provides an empty dictionary to be populated with
   /// serializable state.</param>
   void MainPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {
       (void) sender;  // Unused parameter
       (void) e; // Unused parameter
   }
   

7. Todavía en MainPage.xaml (Windows Phone 8.1), baja por la página, busca el "Panel de título" y quita todo el elemento StackPanel. En el teléfono, necesitamos que las fuentes de blog se enumeren en el estado real la pantalla.

8. Más abajo en la página verás un Grid con este comentario: "TODO: Content should be placed within the following grid". Pon este ListView dentro de ese Grid:

       <!-- Vertical scrolling item list -->
        <ListView
           x:Name="itemListView"           
           AutomationProperties.AutomationId="itemListView"
           AutomationProperties.Name="Items"
           TabIndex="1" 
           IsItemClickEnabled="True"
           ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
           IsSwipeEnabled="False"
           ItemClick="ItemListView_ItemClick"
           SelectionMode="Single"
           ItemTemplate="{StaticResource ListItemTemplate}">
   
           <ListView.ItemContainerStyle>
               <Style TargetType="FrameworkElement">
                   <Setter Property="Margin" Value="2,0,0,2"/>
               </Style>
           </ListView.ItemContainerStyle>
       </ListView>
   

9. Ahora coloca el cursor sobre el evento ItemListView_ItemClick y presiona F12 (ir a definición). Visual Studio generará una función de controlador de eventos vacía a la que agregaremos algo de código más tarde. Por ahora solo necesitamos que se genere la función para que la aplicación se compile.

Parte 8: enumerar las publicaciones y mostrar el texto de una publicación seleccionada

En esta parte agregamos dos páginas a la aplicación del teléfono: la página en la que se enumeran las publicaciones y la página que muestra la versión en texto de una publicación seleccionada. En la aplicación de Windows, solo tenemos que agregar una página llamada SplitPage que mostrará la lista en un lado y el texto de la publicación seleccionada en el otro. Primero las páginas de teléfono.

Agrega el marcado XAML (FeedPage de la aplicación para teléfono)

Sigamos con el proyecto del teléfono. Ahora trabajaremos en el FeedPage, que enumera las publicaciones de la fuente que el usuario selecciona.

1. En FeedPage.xaml (Windows Phone 8.1), agrega un contexto de datos al elemento Page:

   DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
   

2. Ahora agrega CollectionViewSource después del elemento Page de apertura:

   <Page.Resources>
       <!-- Collection of items displayed by this page -->
       <CollectionViewSource
       x:Name="itemsViewSource"
       Source="{Binding Items}"/>
   </Page.Resources>
   

3. En el elemento Grid, agrega este StackPanel:

           <!-- TitlePanel -->
           <StackPanel Grid.Row="0" Margin="24,17,0,28">
               <TextBlock Text="{StaticResource AppName}" 
                          Style="{ThemeResource TitleTextBlockStyle}" 
                          Typography.Capitals="SmallCaps"/>
           </StackPanel>
   

4. A continuación, agrega el ListView dentro de la cuadrícula (justo después del elemento de apertura):

               <!-- Vertical scrolling item list -->
               <ListView
               x:Name="itemListView"
               AutomationProperties.AutomationId="ItemsListView"
               AutomationProperties.Name="Items"
               TabIndex="1"
               Grid.Row="1"
               Margin="-10,-10,0,0" 
               IsItemClickEnabled="True"
               ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               IsSwipeEnabled="False"
               ItemClick="ItemListView_ItemClick"
               ItemTemplate="{StaticResource ListItemTemplate}">
   
                   <ListView.ItemContainerStyle>
                       <Style TargetType="FrameworkElement">
                           <Setter Property="Margin" Value="2,0,0,2"/>
                       </Style>
                   </ListView.ItemContainerStyle>
               </ListView>
   

   Ten en cuenta que la propiedad ItemsSource de ListView enlaza con CollectionViewSource. Este, a su vez, enlaza con la propiedad FeedData::Items que insertamos en la propiedad DefaultViewModel de LoadState en el código subyacente (ver más abajo).

5. Hay un evento ItemClick declarado en el ListView. Pon el cursor sobre él y presiona F12 para generar el controlador de eventos en el código subyacente. Por el momento lo dejaremos en blanco.

LoadState y SaveState (FeedPage de la aplicación para teléfono)

En MainPage no tuvimos que preocuparnos por almacenar el estado, ya que la página se reinicializa por completo desde Internet siempre que la aplicación se inicia por cualquier motivo. En cambio, las otras páginas necesitan recordar su estado. Por ejemplo, si la aplicación finaliza (se descarga de la memoria) mientras se muestra FeedPage, queremos que, cuando el usuario vuelva a ella, tenga la impresión de que nunca se cerró. Por eso debemos recordar la fuente que estaba seleccionada. El lugar para guardar estos datos es el almacenamiento AppData local, y un buen momento para hacerlo es cuando el usuario hace clic en la fuente desde MainPage.

Solo hay un problema: ¿realmente ya existen los datos? Si navegamos a FeedPage desde MainPage mediante un clic de usuario, sabremos con seguridad que el objeto FeedData seleccionado ya existe, porque de lo contrario no aparecerá en la lista de MainPage. Sin embargo, si la aplicación se está reanudando, puede que el último objeto FeedData visto aún no se haya cargado cuando FeedPage intenta enlazar con él. Por tanto, FeedPage (y otras páginas) necesita saber de algún modo cuándo está disponible el FeedData. concurrency::task_completion_event está diseñado para tal situación. Con él, podemos obtener el objeto FeedData de forma segura y en la misma ruta de código, independientemente de si estamos reanudando o navegando por vez primera desde MainPage. Desde FeedPage, siempre obtenemos nuestra fuente con una llamada a GetCurrentFeedAsync. Si navegamos desde MainPage, el evento ya se estableció cuando el usuario hizo clic en una fuente, por lo que el método devolverá la fuente de inmediato. Si reanudamos tras una suspensión, el evento se establece en la función FeedDataSource::InitDataSource, y en ese caso FeedPage quizá tenga que esperar un poco a que la fuente se recargue. En este caso, es mejor esperar y no que se produzca un bloqueo. Este pequeño problema es la razón del gran volumen de ese código asincrónico complicado en FeedData.cpp y App.xaml.cpp, pero si miras ese código con detenimiento, verás que no es tan complicado como parece.

1. En FeedPage.xaml.cpp, agrega este espacio de nombres para incluir los objetos de tarea:

   using namespace concurrency;
   

2. Y una directiva #include para TextViewerPage.xaml.h:

   #include "TextViewerPage.xaml.h"
   

   La definición de la clase TextViewerPage es necesaria en la llamada a Navigate que se muestra a continuación.

3. Reemplaza el método LoadState por este código:

   void FeedPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
   
       if (!this->DefaultViewModel->HasKey("Feed"))
       {
           auto app = safe_cast<App^>(App::Current);
           app->GetCurrentFeedAsync().then([this, e](FeedData^ fd)
           {
               // Insert into the ViewModel for this page to
               // initialize itemsViewSource->View
               this->DefaultViewModel->Insert("Feed", fd);
               this->DefaultViewModel->Insert("Items", fd->Items);
           }, task_continuation_context::use_current());
       }
   }
   

   Si navegamos de vuelta a FeedPage desde una página situada más arriba en la pila de páginas, la página ya estará inicializada (es decir, DefaultViewModel tendrá un valor para "Feed") y la fuente actual estará establecida correctamente. Pero si navegamos hacia delante desde MainPage o estamos reanudando, tendremos que obtener la fuente actual para rellenar la página con los datos correctos. Si es necesario, GetCurrentFeedAsync esperará a que lleguen los datos de fuente después de reanudar. El contexto use_current() se especifica para indicarle a la tarea que vuelva al subproceso de interfaz de usuario antes de intentar acceder a la propiedad de dependencia DefaultViewModel. Por lo general no es posible acceder a los objetos relacionados con XAML directamente desde subprocesos en segundo plano.

   En esta página no hacemos nada con SaveState porque el estado se consigue con el método GetCurrentFeedAsync cada vez que se carga la página.

4. Agrega la declaración de LoadState en el archivo de encabezado FeedPage.xaml.h, agrega una directiva include para "Common\NavigationHelper.h" y agrega las propiedades NavigationHelper y DefaultViewModel.

   //
   // FeedPage.xaml.h
   // Declaration of the FeedPage class
   //
   
   #pragma once
   
   #include "FeedPage.g.h"
   #include "Common\NavigationHelper.h"
   
   namespace SimpleBlogReader
   {
   
       namespace WFC = Windows::Foundation::Collections;
       namespace WUIX = Windows::UI::Xaml;
       namespace WUIXNav = Windows::UI::Xaml::Navigation;
       namespace WUIXControls = Windows::UI::Xaml::Controls;
   
                   /// <summary>
                   /// A basic page that provides characteristics common to most applications.
                   /// </summary>
                   [Windows::Foundation::Metadata::WebHostHidden]
                   public ref class FeedPage sealed
                   {
                   public:
                                   FeedPage();
   
                                   /// <summary>
                                   /// Gets the view model for this <see cref="Page"/>. 
                                   /// This can be changed to a strongly typed view model.
                                   /// </summary>
                                   property WFC::IObservableMap<Platform::String^, Platform::Object^>^ DefaultViewModel
                                   {
                                                   WFC::IObservableMap<Platform::String^, Platform::Object^>^  get();
                                   }
   
                                   /// <summary>
                                   /// Gets the <see cref="NavigationHelper"/> associated with this <see cref="Page"/>.
                                   /// </summary>
                                   property Common::NavigationHelper^ NavigationHelper
                                   {
                                                   Common::NavigationHelper^ get();
                                   }
   
                   protected:
                                   virtual void OnNavigatedTo(WUIXNav::NavigationEventArgs^ e) override;
                                   virtual void OnNavigatedFrom(WUIXNav::NavigationEventArgs^ e) override;
   
                   private:
                                   void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
                                   void SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e);
   
                                   static Windows::UI::Xaml::DependencyProperty^ _defaultViewModelProperty;
                                   static Windows::UI::Xaml::DependencyProperty^ _navigationHelperProperty;
           void ItemListView_ItemClick(Platform::Object^ sender, WUIXControls::ItemClickEventArgs^ e);
       };
   
   }
   

5. Agrega la implementación de estas propiedades en FeedPage.xaml.cpp, que ahora tiene este aspecto:

   //
   // FeedPage.xaml.cpp
   // Implementation of the FeedPage class
   //
   
   #include "pch.h"
   #include "FeedPage.xaml.h"
   #include "TextViewerPage.xaml.h"
   
   using namespace SimpleBlogReader;
   using namespace concurrency;
   
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::Graphics::Display;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Controls::Primitives;
   using namespace Windows::UI::Xaml::Data;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Interop;
   using namespace Windows::UI::Xaml::Media;
   using namespace Windows::UI::Xaml::Navigation;
   
   // The Basic Page item template is documented at https://go.microsoft.com/fwlink/?LinkID=390556
   
   FeedPage::FeedPage()
   {
       InitializeComponent();
       SetValue(_defaultViewModelProperty, 
           ref new Platform::Collections::Map<String^, Object^>(std::less<String^>()));
       auto navigationHelper = ref new Common::NavigationHelper(this);
       SetValue(_navigationHelperProperty, navigationHelper);
       navigationHelper->LoadState += 
           ref new Common::LoadStateEventHandler(this, &FeedPage::LoadState);
       navigationHelper->SaveState += 
           ref new Common::SaveStateEventHandler(this, &FeedPage::SaveState);
   }
   
   DependencyProperty^ FeedPage::_defaultViewModelProperty =
   DependencyProperty::Register("DefaultViewModel",
   TypeName(IObservableMap<String^, Object^>::typeid), TypeName(FeedPage::typeid), nullptr);
   
   /// <summary>
   /// Used as a trivial view model.
   /// </summary>
   IObservableMap<String^, Object^>^ FeedPage::DefaultViewModel::get()
   {
       return safe_cast<IObservableMap<String^, Object^>^>(GetValue(_defaultViewModelProperty));
   }
   
   DependencyProperty^ FeedPage::_navigationHelperProperty =
   DependencyProperty::Register("NavigationHelper",
   TypeName(Common::NavigationHelper::typeid), TypeName(FeedPage::typeid), nullptr);
   
   /// <summary>
   /// Gets an implementation of <see cref="NavigationHelper"/> designed to be
   /// used as a trivial view model.
   /// </summary>
   Common::NavigationHelper^ FeedPage::NavigationHelper::get()
   {
       return safe_cast<Common::NavigationHelper^>(GetValue(_navigationHelperProperty));
   }
   
   #pragma region Navigation support
   
   /// The methods provided in this section are simply used to allow
   /// NavigationHelper to respond to the page's navigation methods.
   /// 
   /// Page specific logic should be placed in event handlers for the  
   /// <see cref="NavigationHelper::LoadState"/>
   /// and <see cref="NavigationHelper::SaveState"/>.
   /// The navigation parameter is available in the LoadState method 
   /// in addition to page state preserved during an earlier session.
   
   void FeedPage::OnNavigatedTo(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedTo(e);
   }
   
   void FeedPage::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedFrom(e);
   }
   
   #pragma endregion
   
   /// <summary>
   /// Populates the page with content passed during navigation. Any saved state is also
   /// provided when recreating a page from a prior session.
   /// </summary>
   /// <param name="sender">
   /// The source of the event; typically <see cref="NavigationHelper"/>
   /// </param>
   /// <param name="e">Event data that provides both the navigation parameter passed to
   /// <see cref="Frame::Navigate(Type, Object)"/> when this page was initially requested and
   /// a dictionary of state preserved by this page during an earlier
   /// session. The state will be null the first time a page is visited.</param>
   void FeedPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
   
       (void)sender; // Unused parameter
   
       if (!this->DefaultViewModel->HasKey("Feed"))
       {
           auto app = safe_cast<App^>(App::Current);
           app->GetCurrentFeedAsync().then([this, e](FeedData^ fd)
           {
               // Insert into the ViewModel for this page to 
               // initialize itemsViewSource->View
               this->DefaultViewModel->Insert("Feed", fd);
               this->DefaultViewModel->Insert("Items", fd->Items);
           }, task_continuation_context::use_current());
       }
   }
   
   /// <summary>
   /// Preserves state associated with this page in case the application is suspended or the
   /// page is discarded from the navigation cache.  Values must conform to the serialization
   /// requirements of <see cref="SuspensionManager::SessionState"/>.
   /// </summary>
   /// <param name="sender">The source of the event; typically <see cref="NavigationHelper"/></param>
   /// <param name="e">Event data that provides an empty dictionary to be populated with
   /// serializable state.</param>
   void FeedPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {
       (void)sender; // Unused parameter
   }
   
   

EventHandlers (FeedPage de la aplicación para teléfono)

En FeedPage controlamos el evento ItemClick, que avanza hasta la página donde el usuario puede leer la publicación. Ya creaste un controlador de stub al presionar F12 en el nombre del evento en el código XAML.

1. Reemplaza ahora la implementación por este código.

   void FeedPage::ItemListView_ItemClick(Platform::Object^ sender, ItemClickEventArgs^ e)
   {
       FeedItem^ clickedItem = dynamic_cast<FeedItem^>(e->ClickedItem);
       this->Frame->Navigate(TextViewerPage::typeid, clickedItem->Link->AbsoluteUri);
   }
   

2. Presiona F5 para compilar y ejecutar la aplicación para teléfono en el emulador. Ahora, si seleccionas un elemento de MainPage, la aplicación debería navegar a FeedPage y mostrar una lista de las fuentes. El siguiente paso es mostrar el texto de una fuente seleccionada.

Agregar el marcado XAML (TextViewerPage de aplicación para teléfono)

1. En el proyecto del teléfono, en TextViewerPage.xaml, reemplaza el panel de título y la cuadrícula de contenido por este marcado que mostrará el nombre de la aplicación (discretamente) y el título de la publicación actual, junto con una representación en texto simple del contenido:

    <!-- TitlePanel -->
           <StackPanel Grid.Row="0" Margin="24,17,0,28">
               <TextBlock Text="{StaticResource AppName}" 
                          Style="{ThemeResource TitleTextBlockStyle}" 
                          Typography.Capitals="SmallCaps"/>
               <TextBlock x:Name="FeedItemTitle" Margin="0,12,0,0" 
                          Style="{StaticResource SubheaderTextBlockStyle}" 
                          TextWrapping="Wrap"/>
           </StackPanel>
   
           <!--TODO: Content should be placed within the following grid-->
           <Grid Grid.Row="1" x:Name="ContentRoot">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="*"/>
               </Grid.RowDefinitions>
   
               <ScrollViewer
               x:Name="itemDetail"
               AutomationProperties.AutomationId="ItemDetailScrollViewer"
               Grid.Row="1"
               Padding="20,20,20,20"
               HorizontalScrollBarVisibility="Disabled" 
                   VerticalScrollBarVisibility="Auto"
               ScrollViewer.HorizontalScrollMode="Disabled" 
                   ScrollViewer.VerticalScrollMode="Enabled"
               ScrollViewer.ZoomMode="Disabled" Margin="4,0,-4,0">
                   <!--Border enables background color for rich text block-->
                   <Border x:Name="contentViewBorder" BorderBrush="#FFFE5815"  
                           Background="AntiqueWhite" BorderThickness="6" Grid.Row="1">
                       <RichTextBlock x:Name="BlogTextBlock" Foreground="Black" 
                                      FontFamily="Segoe WP" FontSize="24" 
                                      Padding="10,10,10,10" 
                                      VerticalAlignment="Bottom" >
                       </RichTextBlock>
                   </Border>
               </ScrollViewer>
           </Grid>
   

2. En TextViewerPage.xaml.h, agrega las propiedades NavigationHelper y DefaultViewItems y también agrega un miembro privado m_FeedItem para almacenar una referencia al elemento de fuente actual después de buscar la primera vez con la función GetFeedItem que hemos agregado a la clase App en el paso anterior.

   Además, agrega una función RichTextHyperlinkClicked. TextViewerPage.xaml.h debe tener el siguiente aspecto:

   //
   // TextViewerPage.xaml.h
   // Declaration of the TextViewerPage class
   //
   
   #pragma once
   
   #include "TextViewerPage.g.h"
   #include "Common\NavigationHelper.h"
   
   namespace SimpleBlogReader
   {
       namespace WFC = Windows::Foundation::Collections;
       namespace WUIX = Windows::UI::Xaml;
       namespace WUIXNav = Windows::UI::Xaml::Navigation;
       namespace WUIXDoc = Windows::UI::Xaml::Documents;
       namespace WUIXControls = Windows::UI::Xaml::Controls;
   
                   /// <summary>
                   /// A basic page that provides characteristics common to most applications.
                   /// </summary>
                   [Windows::Foundation::Metadata::WebHostHidden]
                   public ref class TextViewerPage sealed
                   {
                   public:
                                   TextViewerPage();
   
                                   /// <summary>
                                   /// Gets the view model for this <see cref="Page"/>. 
                                   /// This can be changed to a strongly typed view model.
                                   /// </summary>
                                   property WFC::IObservableMap<Platform::String^, Platform::Object^>^ DefaultViewModel
                                   {
                                                   WFC::IObservableMap<Platform::String^, Platform::Object^>^  get();
                                   }
   
                                   /// <summary>
                                   /// Gets the <see cref="NavigationHelper"/> associated with this <see cref="Page"/>.
                                   /// </summary>
                                   property Common::NavigationHelper^ NavigationHelper
                                   {
                                                   Common::NavigationHelper^ get();
                                   }
   
   
   
                   protected:
                                   virtual void OnNavigatedTo(WUIXNav::NavigationEventArgs^ e) override;
                                   virtual void OnNavigatedFrom(WUIXNav::NavigationEventArgs^ e) override;
                                   void RichTextHyperlinkClicked(WUIXDoc::Hyperlink^ link, 
                                        WUIXDoc::HyperlinkClickEventArgs^ args);
   
                   private:
                                   void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
                                   void SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e);
   
                                   static Windows::UI::Xaml::DependencyProperty^ _defaultViewModelProperty;
                                   static Windows::UI::Xaml::DependencyProperty^ _navigationHelperProperty;
   
           FeedItem^ m_feedItem;
       };
   
   }
   

LoadState y SaveState (TextViewerPage de aplicación para teléfono)

1. En TextViewerPage.xaml.cpp, agrega esta directiva include:

   #include "WebViewerPage.xaml.h"
   

2. Agrega estas dos directivas de espacio de nombres:

   using namespace concurrency;
   using namespace Windows::UI::Xaml::Documents;
   

3. Agrega el código para NavigationHelper y DefaultViewModel.

   TextViewerPage::TextViewerPage()
   {
       InitializeComponent();
       SetValue(_defaultViewModelProperty, 
           ref new Platform::Collections::Map<String^, Object^>(std::less<String^>()));
       auto navigationHelper = ref new Common::NavigationHelper(this);
       SetValue(_navigationHelperProperty, navigationHelper);
       navigationHelper->LoadState += 
           ref new Common::LoadStateEventHandler(this, &TextViewerPage::LoadState);
       navigationHelper->SaveState += 
           ref new Common::SaveStateEventHandler(this, &TextViewerPage::SaveState);
   
     //  this->DataContext = DefaultViewModel;
   
   }
   
   DependencyProperty^ TextViewerPage::_defaultViewModelProperty =
   DependencyProperty::Register("DefaultViewModel",
   TypeName(IObservableMap<String^, Object^>::typeid), TypeName(TextViewerPage::typeid), nullptr);
   
   /// <summary>
   /// Used as a trivial view model.
   /// </summary>
   IObservableMap<String^, Object^>^ TextViewerPage::DefaultViewModel::get()
   {
       return safe_cast<IObservableMap<String^, Object^>^>(GetValue(_defaultViewModelProperty));
   }
   
   DependencyProperty^ TextViewerPage::_navigationHelperProperty =
   DependencyProperty::Register("NavigationHelper",
   TypeName(Common::NavigationHelper::typeid), TypeName(TextViewerPage::typeid), nullptr);
   
   /// <summary>
   /// Gets an implementation of <see cref="NavigationHelper"/> designed to be
   /// used as a trivial view model.
   /// </summary>
   Common::NavigationHelper^ TextViewerPage::NavigationHelper::get()
   {
       return safe_cast<Common::NavigationHelper^>(GetValue(_navigationHelperProperty));
   }
   
   #pragma region Navigation support
   
   /// The methods provided in this section are simply used to allow
   /// NavigationHelper to respond to the page's navigation methods.
   /// 
   /// Page specific logic should be placed in event handlers for the  
   /// <see cref="NavigationHelper::LoadState"/>
   /// and <see cref="NavigationHelper::SaveState"/>.
   /// The navigation parameter is available in the LoadState method 
   /// in addition to page state preserved during an earlier session.
   
   void TextViewerPage::OnNavigatedTo(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedTo(e);
   }
   
   void TextViewerPage::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedFrom(e);
   }
   
   #pragma endregion
   

4. Ahora reemplaza las implementaciones de LoadState y SaveState con el código siguiente:

   void TextViewerPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
       // (void)e; // Unused parameter
   
       auto app = safe_cast<App^>(App::Current);
       app->GetCurrentFeedAsync().then([this, app, e](FeedData^ fd)
       {        
           m_feedItem = app->GetFeedItem(fd, safe_cast<String^>(e->NavigationParameter));
           FeedItemTitle->Text = m_feedItem->Title;
           BlogTextBlock->Blocks->Clear();
           TextHelper^ helper = ref new TextHelper();
   
           auto blocks = helper->
               CreateRichText(m_feedItem->Content, 
                   ref new TypedEventHandler<Hyperlink^, HyperlinkClickEventArgs^>
                   (this, &TextViewerPage::RichTextHyperlinkClicked));
           for (auto b : blocks)
           {
               BlogTextBlock->Blocks->Append(b);
           }
       }, task_continuation_context::use_current());    
   }
   
   void TextViewerPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
   
       e->PageState->Insert("Uri", m_feedItem->Link->AbsoluteUri);
   }
   

   Como no podemos enlazar a un RichTextBlock, construiremos su contenido manualmente con la clase TextHelper. Por simplicidad utilizamos la función HtmlUtilities::ConvertToText, que solo extrae el texto de la fuente. Como ejercicio, puedes intentar analizar el html o xml, y anexar los vínculos de imágenes y el texto a la colección Blocks. SyndicationClient tiene una función para analizar fuentes XML. Algunas fuentes tienen un formato XML correcto y otras no.

Controladores de eventos (TextViewerPage de aplicación para teléfono)

1. En TextViewerPage, navegamos a WebViewerPage por medio de un Hyperlink en RichText. Esto no es la forma habitual de navegar entre páginas, pero parece apropiada en este caso y nos permite explorar el funcionamiento de los hipervínculos. Ya hemos agregado la signatura de la función a TextViewerPage.xaml.h. Ahora agrega la implementación en TextViewerPage.xaml.cpp:

   ///<summary>
   /// Invoked when the user clicks on the "Link" text at the top of the rich text 
   /// view of the feed. This navigates to the web page. Identical action to using
   /// the App bar "forward" button.
   ///</summary>
   void TextViewerPage::RichTextHyperlinkClicked(Hyperlink^ hyperLink, 
       HyperlinkClickEventArgs^ args)
   {
       this->Frame->Navigate(WebViewerPage::typeid, m_feedItem->Link->AbsoluteUri);
   }
   

2. Ahora establece el proyecto de teléfono como proyecto de inicio y presiona F5. Deberías poder hacer clic en un elemento de la página de la fuente y navegar a TextViewerPage, donde puedes leer la entrada de blog. ¡No están nada mal esos blogs!

Agregar XAML (SplitPage de la aplicación de Windows)

El comportamiento de la aplicación de Windows y el de la aplicación para teléfono difiere en varios aspectos. Ya hemos visto que el MainPage.xaml del proyecto de Windows utiliza una plantilla de ItemsPage que no está disponible en aplicaciones para teléfono. Ahora vamos a agregar un SplitPage, que tampoco está disponible en el teléfono. Cuando un dispositivo está en orientación horizontal, el SplitPage de la aplicación de Windows tiene un panel derecho y un panel izquierdo. Cuando el usuario navega a la página de nuestra aplicación, verá la lista de elementos de fuente del panel izquierdo, además de una representación en texto de la fuente seleccionada actualmente en el panel derecho. Cuando el dispositivo está en orientación vertical o la ventana no ocupa todo el ancho, la página dividida usa VisualStates para comportarse como si se tratara de dos hojas separadas. Esto se denomina "navegación de página lógica" en el código.

1. Comienza con el siguiente código, que es el xaml para una página básica dividida que era la plantilla predeterminada en proyectos de Windows 8.

   <Page
       x:Name="pageRoot"
       x:Class="SimpleBlogReader.SplitPage"
       DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
       xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:SimpleBlogReader"
       xmlns:common="using:SimpleBlogReader.Common"
       xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
   
   
       <Page.Resources>
           <!-- Collection of items displayed by this page -->
           <CollectionViewSource
           x:Name="itemsViewSource"
           Source="{Binding Items}"/>
       </Page.Resources>
   
       <Page.TopAppBar>
           <AppBar Padding="10,0,10,0">
               <Grid>
                   <AppBarButton x:Name="fwdButton" Height="95" Margin="150,46,0,0"
                             Command="{Binding NavigationHelper.GoForwardCommand, ElementName=pageRoot}" 
                             AutomationProperties.Name="Forward"
                             AutomationProperties.AutomationId="ForwardButton"
                             AutomationProperties.ItemType="Navigation Button"
                             HorizontalAlignment="Right"
                             Icon="Forward"
                             Click="fwdButton_Click"/>
               </Grid>
           </AppBar>
       </Page.TopAppBar>
       <!--
           This grid acts as a root panel for the page that defines two rows:
           * Row 0 contains the back button and page title
           * Row 1 contains the rest of the page layout
       -->
       <Grid Style="{StaticResource WindowsBlogLayoutRootStyle}">
           <Grid.ChildrenTransitions>
               <TransitionCollection>
                   <EntranceThemeTransition/>
               </TransitionCollection>
           </Grid.ChildrenTransitions>
           <Grid.RowDefinitions>
               <RowDefinition Height="140"/>
               <RowDefinition Height="*"/>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition x:Name="primaryColumn" Width="420"/>
               <ColumnDefinition x:Name="secondaryColumn" Width="*"/>
           </Grid.ColumnDefinitions>
   
           <!-- Back button and page title -->
           <Grid x:Name="titlePanel" Grid.ColumnSpan="1">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="120"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Button x:Name="backButton" Margin="39,59,39,0" 
                       Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                           Style="{StaticResource NavigationBackButtonNormalStyle}"
                           VerticalAlignment="Top"
                           AutomationProperties.Name="Back"
                           AutomationProperties.AutomationId="BackButton"
                           AutomationProperties.ItemType="Navigation Button"/>
   
               <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" 
                          Style="{StaticResource HeaderTextBlockStyle}"
                          IsHitTestVisible="false" TextWrapping="NoWrap" 
                          VerticalAlignment="Bottom" Padding="10,10,10,10" Margin="0,0,30,40">
                   <TextBlock.Transitions>
                       <TransitionCollection>
                           <ContentThemeTransition/>
                       </TransitionCollection>
                   </TextBlock.Transitions>
               </TextBlock>
           </Grid>
   
           <!-- Vertical scrolling item list -->
           <ListView
               x:Name="itemListView"
               AutomationProperties.AutomationId="ItemsListView"
               AutomationProperties.Name="Items"
               TabIndex="1"
               Grid.Row="1"
               Margin="-10,-10,0,0"
               Padding="120,0,0,60"
               ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               IsSwipeEnabled="False"
               SelectionChanged="ItemListView_SelectionChanged">
               <ListView.ItemTemplate>
                   <DataTemplate>
                       <Grid Margin="6">
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto"/>
                               <ColumnDefinition Width="*"/>
                           </Grid.ColumnDefinitions>
                           <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                               <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                           </Border>
                           <StackPanel Grid.Column="1" Margin="10,0,0,0">
                               <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                               <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                           </StackPanel>
                       </Grid>
                   </DataTemplate>
               </ListView.ItemTemplate>
               <ListView.ItemContainerStyle>
                   <Style TargetType="FrameworkElement">
                       <Setter Property="Margin" Value="0,0,0,10"/>
                   </Style>
               </ListView.ItemContainerStyle>
           </ListView>
   
   
           <!-- Details for selected item -->
           <ScrollViewer
               x:Name="itemDetail"
               AutomationProperties.AutomationId="ItemDetailScrollViewer"
               Grid.Column="1"
               Grid.RowSpan="2"
               Padding="60,0,66,0"
               DataContext="{Binding SelectedItem, ElementName=itemListView}"
               HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
               ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
               ScrollViewer.ZoomMode="Disabled">
   
               <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition Height="*"/>
                   </Grid.RowDefinitions>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
   
                   <Image Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                   <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                       <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                       <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                   </StackPanel>
                   <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/>
               </Grid>
           </ScrollViewer>
   
   
           <VisualStateManager.VisualStateGroups>
   
               <!-- Visual states reflect the application's view state -->
               <VisualStateGroup x:Name="ViewStates">
                   <VisualState x:Name="PrimaryView" />
                   <VisualState x:Name="SinglePane">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="primaryColumn" 
                               Storyboard.TargetProperty="Width">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="secondaryColumn" 
                               Storyboard.TargetProperty="Width">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="itemDetail" 
                               Storyboard.TargetProperty="Visibility">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="ItemListView" 
                               Storyboard.TargetProperty="Padding">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
                   <!--
                       When an item is selected and only one pane is shown the details display requires more extensive changes:
                        * Hide the master list and the column it was in
                        * Move item details down a row to make room for the title
                        * Move the title directly above the details
                        * Adjust padding for details
                    -->
                   <VisualState x:Name="SinglePane_Detail">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="primaryColumn" 
                               Storyboard.TargetProperty="Width">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="secondaryColumn" 
                               Storyboard.TargetProperty="Width">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="ItemListView" 
                               Storyboard.TargetProperty="Visibility">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="titlePanel" 
                               Storyboard.TargetProperty="(Grid.Column)">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetName="itemDetail" 
                               Storyboard.TargetProperty="Padding">
                               <DiscreteObjectKeyFrame KeyTime="0" Value="10,0,10,0"/>
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
               </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
       </Grid>
   </Page>
   

2. La página predeterminada ya tiene su contexto de datos y conjunto CollectionViewSource.

   Vamos retocar la cuadrícula titlePanel para que se extienda por dos columnas. Esto permitirá que el título de la fuente ocupe todo el ancho de la pantalla:

   <Grid x:Name="titlePanel" Grid.ColumnSpan="2">
   

3. Ahora busca pageTitle TextBlock en esta misma cuadrícula y cambia el Binding de Title a Feed.Title.

   Text="{Binding Feed.Title}"
   

4. Ahora busca el comentario de "Lista de elementos de desplazamiento vertical" y cambia el valor predeterminado de ListView por este otro:

           <!-- Vertical scrolling item list -->
           <ListView
               x:Name="itemListView"
               AutomationProperties.AutomationId="ItemsListView"
               AutomationProperties.Name="Items"
               TabIndex="1"
               Grid.Row="1"
               Margin="10,10,0,0"
               Padding="10,0,0,60"
               ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
               IsSwipeEnabled="False"
               SelectionChanged="ItemListView_SelectionChanged"
               ItemTemplate="{StaticResource ListItemTemplate}">
   
               <ListView.ItemContainerStyle>
                   <Style TargetType="FrameworkElement">
                       <Setter Property="Margin" Value="0,0,0,10"/>
                   </Style>
               </ListView.ItemContainerStyle>
           </ListView>
   

5. El panel de detalles de un SplitPage puede contener lo que quieras. En esta aplicación pondremos un RichTextBlock y mostraremos una versión en texto simple de la entrada de blog. Podemos usar una función de utilidad proporcionada por la API de Windows para analizar el código HTML de FeedItem y devolver un Platform::String; a continuación, usaremos nuestra propia clase de utilidad para dividir en párrafos la cadena devuelta y compilar elementos de texto enriquecido. Esta vista no mostrará ninguna imagen, pero se carga rápidamente y, si quieres extender esta aplicación, puedes agregar más adelante una opción que permita al usuario ajustar el tipo y el tamaño de fuente.

   Busca el elemento ScrollViewer debajo del comentario "Detalles del elemento seleccionado" y elimínelo. A continuación, pega este marcado:

           <!-- Details for selected item -->
           <Grid x:Name="itemDetailGrid" 
                 Grid.Row="1"
                 Grid.Column="1"
                 Margin="10,10,10,10">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="*"/>
               </Grid.RowDefinitions>
               <TextBlock x:Name="itemTitle" Margin="10,10,10,10" 
                          DataContext="{Binding SelectedItem, ElementName=itemListView}" 
                          Text="{Binding Title}" 
                          Style="{StaticResource SubheaderTextBlockStyle}"/>
               <ScrollViewer
               x:Name="itemDetail"
               AutomationProperties.AutomationId="ItemDetailScrollViewer"
               Grid.Row="1"
               Padding="20,20,20,20"
               DataContext="{Binding SelectedItem, ElementName=itemListView}"
               HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
               ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
               ScrollViewer.ZoomMode="Disabled" Margin="4,0,-4,0">
                   <Border x:Name="contentViewBorder" BorderBrush="#FFFE5815" 
                           Background="Honeydew" BorderThickness="5" Grid.Row="1">
                       <RichTextBlock x:Name="BlogTextBlock" Foreground="Black" 
                                      FontFamily="Lucida Sans" 
                                      FontSize="32"
                                      Margin="20,20,20,20">                        
                       </RichTextBlock>
                   </Border>
               </ScrollViewer>
           </Grid>
   

LoadState y SaveState (SplitPage de la aplicación de Windows)

1. Reemplaza la página SplitPage que creaste con el siguiente código.

   SplitPage.xaml.h debe tener este aspecto:

   //
   // SplitPage.xaml.h
   // Declaration of the SplitPage class
   //
   
   #pragma once
   
   #include "SplitPage.g.h"
   #include "Common\NavigationHelper.h"
   
   namespace SimpleBlogReader
   {
       namespace WFC = Windows::Foundation::Collections;
       namespace WUIX = Windows::UI::Xaml;
       namespace WUIXNav = Windows::UI::Xaml::Navigation;
       namespace WUIXDoc = Windows::UI::Xaml::Documents;
       namespace WUIXControls = Windows::UI::Xaml::Controls;
   
          /// <summary>
          /// A page that displays a group title, a list of items within the group, and details for the
          /// currently selected item.
          /// </summary>
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class SplitPage sealed
          {
          public:
                 SplitPage();
   
                 /// <summary>
                 /// This can be changed to a strongly typed view model.
                 /// </summary>
                 property WFC::IObservableMap<Platform::String^, 
               Platform::Object^>^ DefaultViewModel
                 {
                        WFC::IObservableMap<Platform::String^, Platform::Object^>^  get();
                 }
   
                 /// <summary>
                 /// NavigationHelper is used on each page to aid in navigation and 
                 /// process lifetime management
                 /// </summary>
                 property Common::NavigationHelper^ NavigationHelper
                 {
                        Common::NavigationHelper^ get();
                 }
          protected:
                 virtual void OnNavigatedTo(WUIXNav::NavigationEventArgs^ e) override;
                 virtual void OnNavigatedFrom(WUIXNav::NavigationEventArgs^ e) override;
   
          private:
                 void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
                 void SaveState(Object^ sender, Common::SaveStateEventArgs^ e);
                 bool CanGoBack();
                 void GoBack();
   
   #pragma region Logical page navigation
   
                 // The split page isdesigned so that when the Window does have enough space to show
                 // both the list and the dteails, only one pane will be shown at at time.
                 //
                 // This is all implemented with a single physical page that can represent two logical
                 // pages.  The code below achieves this goal without making the user aware of the
                 // distinction.
   
                 void Window_SizeChanged(Platform::Object^ sender, 
               Windows::UI::Core::WindowSizeChangedEventArgs^ e);
                 void ItemListView_SelectionChanged(Platform::Object^ sender, 
               WUIXControls::SelectionChangedEventArgs^ e);
                 bool UsingLogicalPageNavigation();
                 void InvalidateVisualState();
                 Platform::String^ DetermineVisualState();
   
   #pragma endregion
   
                 static Windows::UI::Xaml::DependencyProperty^ _defaultViewModelProperty;
                 static Windows::UI::Xaml::DependencyProperty^ _navigationHelperProperty;
                 static const int MinimumWidthForSupportingTwoPanes = 768;
   
           void fwdButton_Click(Platform::Object^ sender, WUIX::RoutedEventArgs^ e);
           void pageRoot_SizeChanged(Platform::Object^ sender, WUIX::SizeChangedEventArgs^ e);
          };
   }
   

   Para SplitPage.xaml.cpp, usa el siguiente código como punto de partida. Esto implementa una página dividida básica y agrega la compatibilidad con NavigationHelper y SuspensionManager (del mismo modo que la agregaste en las demás páginas) y el controlador de eventos SizeChanged (el mismo que una página anterior).

   //
   // SplitPage.xaml.cpp
   // Implementation of the SplitPage class
   //
   
   #include "pch.h"
   #include "SplitPage.xaml.h"
   
   using namespace SimpleBlogReader;
   using namespace SimpleBlogReader::Common;
   
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace concurrency;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   using namespace Windows::UI::Core;
   using namespace Windows::UI::ViewManagement;
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Controls::Primitives;
   using namespace Windows::UI::Xaml::Data;
   using namespace Windows::UI::Xaml::Documents;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Interop;
   using namespace Windows::UI::Xaml::Media;
   using namespace Windows::UI::Xaml::Navigation;
   
   // The Split Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234234
   
   SplitPage::SplitPage()
   {
       InitializeComponent();
       SetValue(_defaultViewModelProperty, ref new Map<String^, Object^>(std::less<String^>()));
       auto navigationHelper = ref new Common::NavigationHelper(this,
           ref new Common::RelayCommand(
           [this](Object^) -> bool
       {
           return CanGoBack();
       },
           [this](Object^) -> void
       {
           GoBack();
       }
           )
           );
       SetValue(_navigationHelperProperty, navigationHelper);
       navigationHelper->LoadState += 
           ref new Common::LoadStateEventHandler(this, &SplitPage::LoadState);
       navigationHelper->SaveState += 
           ref new Common::SaveStateEventHandler(this, &SplitPage::SaveState);
   
       ItemListView->SelectionChanged += 
           ref new SelectionChangedEventHandler(this, &SplitPage::ItemListView_SelectionChanged);
       Window::Current->SizeChanged += 
           ref new WindowSizeChangedEventHandler(this, &SplitPage::Window_SizeChanged);
       InvalidateVisualState();
   
   }
   
   DependencyProperty^ SplitPage::_defaultViewModelProperty =
   DependencyProperty::Register("DefaultViewModel",
   TypeName(IObservableMap<String^, Object^>::typeid), TypeName(SplitPage::typeid), nullptr);
   
   /// <summary>
   /// used as a trivial view model.
   /// </summary>
   IObservableMap<String^, Object^>^ SplitPage::DefaultViewModel::get()
   {
       return safe_cast<IObservableMap<String^, Object^>^>(GetValue(_defaultViewModelProperty));
   }
   
   DependencyProperty^ SplitPage::_navigationHelperProperty =
   DependencyProperty::Register("NavigationHelper",
   TypeName(Common::NavigationHelper::typeid), TypeName(SplitPage::typeid), nullptr);
   
   /// <summary>
   /// Gets an implementation of <see cref="NavigationHelper"/> designed to be
   /// used as a trivial view model.
   /// </summary>
   Common::NavigationHelper^ SplitPage::NavigationHelper::get()
   {
       //        return _navigationHelper;
       return safe_cast<Common::NavigationHelper^>(GetValue(_navigationHelperProperty));
   }
   
   #pragma region Page state management
   
   /// <summary>
   /// Populates the page with content passed during navigation.  Any saved state is also
   /// provided when recreating a page from a prior session.
   /// </summary>
   /// <param name="navigationParameter">The parameter value passed to
   /// <see cref="Frame::Navigate(Type, Object)"/> when this page was initially requested.
   /// </param>
   /// <param name="pageState">A map of state preserved by this page during an earlier
   /// session.  This will be null the first time a page is visited.</param>
   void SplitPage::LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e)
   {
       if (!this->DefaultViewModel->HasKey("Feed"))
       {
           auto app = safe_cast<App^>(App::Current);
           app->GetCurrentFeedAsync().then([this, app, e](FeedData^ fd)
           {
               // Insert into the ViewModel for this page to initialize itemsViewSource->View
               this->DefaultViewModel->Insert("Feed", fd);
               this->DefaultViewModel->Insert("Items", fd->Items);
   
               if (e->PageState == nullptr)
               {
                   // When this is a new page, select the first item automatically 
                   // unless logical page navigation is being used (see the logical
                   // page navigation #region below).
                   if (!UsingLogicalPageNavigation() && itemsViewSource->View != nullptr)
                   {
                       this->itemsViewSource->View->MoveCurrentToFirst();
                   }
                   else
                   {
                       this->itemsViewSource->View->MoveCurrentToPosition(-1);
                   }
               }
               else
               {
                   auto itemUri = safe_cast<String^>(e->PageState->Lookup("SelectedItemUri"));
                   auto app = safe_cast<App^>(App::Current);
                   auto selectedItem = app->GetFeedItem(fd, itemUri);
   
                   if (selectedItem != nullptr)
                   {
                       this->itemsViewSource->View->MoveCurrentTo(selectedItem);
                   }
               }
           }, task_continuation_context::use_current());
       }
   }
   
   /// <summary>
   /// Preserves state associated with this page in case the application is suspended or the
   /// page is discarded from the navigation cache.  Values must conform to the serialization
   /// requirements of <see cref="SuspensionManager::SessionState"/>.
   /// </summary>
   /// <param name="sender">The source of the event; typically <see cref="NavigationHelper"/></param>
   /// <param name="e">Event data that provides an empty dictionary to be populated with
   /// serializable state.</param>
   void SplitPage::SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e)
   {
       if (itemsViewSource->View != nullptr)
       {
           auto selectedItem = itemsViewSource->View->CurrentItem;
           if (selectedItem != nullptr)
           {
               auto feedItem = safe_cast<FeedItem^>(selectedItem);
               e->PageState->Insert("SelectedItemUri", feedItem->Link->AbsoluteUri);
           }
       }
   }
   
   #pragma endregion
   
   #pragma region Logical page navigation
   
   // Visual state management typically reflects the four application view states directly (full
   // screen landscape and portrait plus snapped and filled views.)  The split page is designed so
   // that the snapped and portrait view states each have two distinct sub-states: either the item
   // list or the details are displayed, but not both at the same time.
   //
   // This is all implemented with a single physical page that can represent two logical pages.
   // The code below achieves this goal without making the user aware of the distinction.
   
   /// <summary>
   /// Invoked to determine whether the page should act as one logical page or two.
   /// </summary>
   /// <returns>True when the current view state is portrait or snapped, false
   /// otherwise.</returns>
   bool SplitPage::CanGoBack()
   {
       if (UsingLogicalPageNavigation() && ItemListView->SelectedItem != nullptr)
       {
           return true;
       }
       else
       {
           return NavigationHelper->CanGoBack();
       }
   }
   
   void SplitPage::GoBack()
   {
       if (UsingLogicalPageNavigation() && ItemListView->SelectedItem != nullptr)
       {
           // When logical page navigation is in effect and there's a selected item that
           // item's details are currently displayed.  Clearing the selection will return to
           // the item list.  From the user's point of view this is a logical backward
           // navigation.
           ItemListView->SelectedItem = nullptr;
       }
       else
      {
           NavigationHelper->GoBack();
       }
   }
   
   /// <summary>
   /// Invoked with the Window changes size
   /// </summary>
   /// <param name="sender">The current Window</param>
   /// <param name="e">Event data that describes the new size of the Window</param>
   void SplitPage::Window_SizeChanged(Platform::Object^ sender, WindowSizeChangedEventArgs^ e)
   {
       InvalidateVisualState();
   }
   
   /// <summary>
   /// Invoked when an item within the list is selected.
   /// </summary>
   /// <param name="sender">The GridView displaying the selected item.</param>
   /// <param name="e">Event data that describes how the selection was changed.</param>
   void SplitPage::ItemListView_SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
   {
          if (UsingLogicalPageNavigation())
          {
                 InvalidateVisualState();
          }
   }
   
   /// <summary>
   /// Invoked to determine whether the page should act as one logical page or two.
   /// </summary>
   /// <returns>True if the window should show act as one logical page, false
   /// otherwise.</returns>
   bool SplitPage::UsingLogicalPageNavigation()
   {
       return Window::Current->Bounds.Width <= MinimumWidthForSupportingTwoPanes;
   }
   
   void SplitPage::InvalidateVisualState()
   {
       auto visualState = DetermineVisualState();
       VisualStateManager::GoToState(this, visualState, false);
       NavigationHelper->GoBackCommand->RaiseCanExecuteChanged();
   }
   
   /// <summary>
   /// Invoked to determine the name of the visual state that corresponds to an application
   /// view state.
   /// </summary>
   /// <returns>The name of the desired visual state.  This is the same as the name of the
   /// view state except when there is a selected item in portrait and snapped views where
   /// this additional logical page is represented by adding a suffix of _Detail.</returns>
   Platform::String^ SplitPage::DetermineVisualState()
   {
       if (!UsingLogicalPageNavigation())
           return "PrimaryView";
   
       // Update the back button's enabled state when the view state changes
       auto logicalPageBack = UsingLogicalPageNavigation() 
           && ItemListView->SelectedItem != nullptr;
   
       return logicalPageBack ? "SinglePane_Detail" : "SinglePane";
   }
   
   #pragma endregion
   
   #pragma region Navigation support
   
   /// The methods provided in this section are simply used to allow
   /// NavigationHelper to respond to the page's navigation methods.
   /// 
   /// Page specific logic should be placed in event handlers for the  
   /// <see cref="NavigationHelper::LoadState"/>
   /// and <see cref="NavigationHelper::SaveState"/>.
   /// The navigation parameter is available in the LoadState method 
   /// in addition to page state preserved during an earlier session.
   
   void SplitPage::OnNavigatedTo(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedTo(e);
   }
   
   void SplitPage::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedFrom(e);
   
   }
   #pragma endregion
   
   void SimpleBlogReader::SplitPage::fwdButton_Click(Platform::Object^ sender, RoutedEventArgs^ e)
   {
       // Navigate to the appropriate destination page, and configure the new page
       // by passing required information as a navigation parameter.
       auto selectedItem = dynamic_cast<FeedItem^>(this->ItemListView->SelectedItem);
   
       // selectedItem will be nullptr if the user invokes the app bar
       // and clicks on "view web page" without selecting an item.
       if (this->Frame != nullptr && selectedItem != nullptr)
       {
           auto itemUri = safe_cast<String^>(selectedItem->Link->AbsoluteUri);
           this->Frame->Navigate(WebViewerPage::typeid, itemUri);
       }
   }
   
   /// <summary>
   /// 
   /// 
   /// </summary>
   void SimpleBlogReader::SplitPage::pageRoot_SizeChanged(
       Platform::Object^ sender,
       SizeChangedEventArgs^ e)
   {
       if (e->NewSize.Height / e->NewSize.Width >= 1)
       {
           VisualStateManager::GoToState(this, "SinglePane", true);
       }
       else
       {
           VisualStateManager::GoToState(this, "PrimaryView", true);
       }
   }
   

2. En SplitPage.xaml.cpp, agrega esta directiva using:

   using namespace Windows::UI::Xaml::Documents;
   

3. Ahora reemplaza LoadState y SaveState por este código:

   void SplitPage::LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e)
   {
       if (!this->DefaultViewModel->HasKey("Feed"))
       {
           auto app = safe_cast<App^>(App::Current);
           app->GetCurrentFeedAsync().then([this, app, e](FeedData^ fd)
           {
               // Insert into the ViewModel for this page to initialize itemsViewSource->View
               this->DefaultViewModel->Insert("Feed", fd);
               this->DefaultViewModel->Insert("Items", fd->Items);
   
               if (e->PageState == nullptr)
               {
                   // When this is a new page, select the first item automatically unless logical page
                   // navigation is being used (see the logical page navigation #region below).
                   if (!UsingLogicalPageNavigation() && itemsViewSource->View != nullptr)
                   {
                       this->itemsViewSource->View->MoveCurrentToFirst();
                   }
                   else
                   {
                       this->itemsViewSource->View->MoveCurrentToPosition(-1);
                   }
               }
               else
               {
                   auto itemUri = safe_cast<String^>(e->PageState->Lookup("SelectedItemUri"));
                   auto app = safe_cast<App^>(App::Current);
                   auto selectedItem = GetFeedItem(fd, itemUri);
   
                   if (selectedItem != nullptr)
                   {
                       this->itemsViewSource->View->MoveCurrentTo(selectedItem);
                   }
               }
           }, task_continuation_context::use_current());
       }
   }
   
   /// <summary>
   /// Preserves state associated with this page in case the application is suspended or the
   /// page is discarded from the navigation cache.  Values must conform to the serialization
   /// requirements of <see cref="SuspensionManager::SessionState"/>.
   /// </summary>
   /// <param name="sender">The source of the event; typically <see cref="NavigationHelper"/></param>
   /// <param name="e">Event data that provides an empty dictionary to be populated with
   /// serializable state.</param>
   void SplitPage::SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e)
   {
       if (itemsViewSource->View != nullptr)
       {
           auto selectedItem = itemsViewSource->View->CurrentItem;
           if (selectedItem != nullptr)
           {
               auto feedItem = safe_cast<FeedItem^>(selectedItem);
               e->PageState->Insert("SelectedItemUri", feedItem->Link->AbsoluteUri);
           }
       }
   }
   

   Ten en cuenta que estamos usando el método GetCurrentFeedAsync que agregamos anteriormente al proyecto compartido. Una diferencia entre esta página y la del teléfono es que ahora realizamos un seguimiento del elemento seleccionado. En SaveState, insertamos el elemento seleccionado actualmente en el objeto PageState; de este modo, SuspensionManager lo persistirá como necesario para que vuelva a estar disponible en el objeto PageState cuando se llame a LoadState. Vamos a necesitar esa cadena para buscar el elemento FeedItem en el Feed actual.

Controladores de eventos (SplitPage de aplicación de Windows)

Cuando el elemento seleccionado cambie, el panel de detalles utilizará la clase TextHelper para representar el texto.

1. En SplitPage.xaml.cpp, agrega estas directivas #include:

   #include "TextHelper.h"
   #include "WebViewerPage.xaml.h"
   

2. Reemplaza el stub de controlador de eventos SelectionChanged predeterminado por este:

   void SimpleBlogReader::SplitPage::ItemListView_SelectionChanged(
       Platform::Object^ sender,
       SelectionChangedEventArgs^ e)
   {
       if (UsingLogicalPageNavigation())
       {
           InvalidateVisualState();
       }
   
       // Sometimes there is no selected item, e.g. when navigating back
       // from detail in logical page navigation.
       auto fi = dynamic_cast<FeedItem^>(itemListView->SelectedItem);
       if (fi != nullptr)
       {
           BlogTextBlock->Blocks->Clear();
           TextHelper^ helper = ref new TextHelper();
           auto blocks = helper->CreateRichText(fi->Content, 
               ref new TypedEventHandler<Hyperlink^, 
               HyperlinkClickEventArgs^>(this, &SplitPage::RichTextHyperlinkClicked));
           for (auto b : blocks)
           {
               BlogTextBlock->Blocks->Append(b);
           }
       }
   }
   

   Esta función especifica una devolución de llamada que se pasará a un hipervínculo que creamos en el texto enriquecido.

3. Agrega esta función de miembro privado en SplitPage.xaml.h:

   void RichTextHyperlinkClicked(Windows::UI::Xaml::Documents::Hyperlink^ link, 
       Windows::UI::Xaml::Documents::HyperlinkClickEventArgs^ args);
   

4. Y esta implementación en SplitPage.xaml.cpp:

   /// <summary>
   ///  Navigate to the appropriate destination page, and configure the new page
   ///  by passing required information as a navigation parameter.
   /// </summary>
   void SplitPage::RichTextHyperlinkClicked(
       Hyperlink^ hyperLink,
       HyperlinkClickEventArgs^ args)
   {
   
       auto selectedItem = dynamic_cast<FeedItem^>(this->itemListView->SelectedItem);
   
       // selectedItem will be nullptr if the user invokes the app bar
       // and clicks on "view web page" without selecting an item.
       if (this->Frame != nullptr && selectedItem != nullptr)
       {
           auto itemUri = safe_cast<String^>(selectedItem->Link->AbsoluteUri);
           this->Frame->Navigate(WebViewerPage::typeid, itemUri);
       }
   }
   

   A su vez, esta función hace referencia a la página siguiente de la pila de navegación. Ahora puedes presionar F5 y ver el texto actualizado al cambiar la selección. Ejecuta el simulador y gira el dispositivo virtual para comprobar si los objetos VisualState predeterminados pueden adaptarse a las orientaciones vertical y horizontal según lo esperado. Haz clic en el texto de Link del blog y navega a WebViewerPage. Por supuesto, aún no tiene contenido, pero nos ocuparemos de eso en cuanto adelantemos el proyecto para teléfono.

Sobre la navegación hacia atrás

Quizá hayas observado que, en la aplicación de Windows, SplitPage proporciona un botón de navegación hacia atrás que nos lleva a la página MainPage sin necesidad agregar más código. En el teléfono, la funcionalidad del botón atrás la proporciona el correspondiente botón de hardware, no los botones de software. La navegación del botón atrás del teléfono se controla mediante la clase NavigationHelper en la carpeta Common. Busca "BackPressed" (Ctrl + Mayús + F) en la solución para ver el código correspondiente. Al igual que antes, no tienes que hacer nada más. ¡Funciona por sí mismo!

Parte 9: Agregar una vista web de la publicación seleccionada

La última página que agregaremos mostrará la entrada de blog en su página web original. Y es que, a veces, el lector también quiere ver las fotos. La desventaja de ver páginas web es que el texto puede ser difícil de leer en una pantalla de teléfono. Además, no todas las páginas web tienen un formato adaptado para dispositivos móviles. A veces los márgenes se extienden más allá del lateral de la pantalla y requieren una gran cantidad de desplazamiento horizontal. Nuestra página WebViewerPage es relativamente simple. Tan solo agregaremos un control WebView en la página y lo dejaremos trabajar. Empezaremos por el proyecto de teléfono:

Agregar el código XAML (WebViewerPage de aplicación para teléfono)

• En WebViewerPage.xaml, agrega el panel de título y el Grid contentRoot:

          <!-- TitlePanel -->
          <StackPanel Grid.Row="0" Margin="10,10,10,10">
              <TextBlock Text="{StaticResource AppName}" 
                         Style="{ThemeResource TitleTextBlockStyle}" 
                         Typography.Capitals="SmallCaps"/>
          </StackPanel>
  
          <!--TODO: Content should be placed within the following grid-->
          <Grid Grid.Row="1" x:Name="ContentRoot">
              <!-- Back button and page title -->
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
  
              <!--This will render while web page is still downloading, 
              indicating that something is happening-->
              <TextBlock x:Name="pageTitle" Text="{Binding Title}" Grid.Column="1" 
                         IsHitTestVisible="false" 
                         TextWrapping="WrapWholeWords"  
                         VerticalAlignment="Center"  
                         HorizontalAlignment="Center"  
                         Margin="40,20,40,20"/>
  
          </Grid>
  

LoadState y SaveState (WebViewerPage de aplicación para teléfono)

1. Inicia WebViewerPage del mismo modo que todas las otras páginas, al proporcionar compatibilidad con NavigationHelper y DefaultItems en el archivo WebViewerPage.xaml.h y la implementación en WebViewerPage.xaml.cpp.

   WebViewerPage.xaml.h debe iniciarse de esta forma:

   //
   // WebViewerPage.xaml.h
   // Declaration of the WebViewerPage class
   //
   
   #pragma once
   
   #include "WebViewerPage.g.h"
   #include "Common\NavigationHelper.h"
   
   namespace SimpleBlogReader
   {
       namespace WFC = Windows::Foundation::Collections;
       namespace WUIX = Windows::UI::Xaml;
       namespace WUIXNav = Windows::UI::Xaml::Navigation;
       namespace WUIXControls = Windows::UI::Xaml::Controls;
   
                   /// <summary>
                   /// A basic page that provides characteristics common to most applications.
                   /// </summary>
                   [Windows::Foundation::Metadata::WebHostHidden]
                   public ref class WebViewerPage sealed
                   {
                   public:
                                   WebViewerPage();
   
                                   /// <summary>
                                   /// This can be changed to a strongly typed view model.
                                   /// </summary>
                                   property WFC::IObservableMap<Platform::String^, Platform::Object^>^ DefaultViewModel
                                   {
                                                   WFC::IObservableMap<Platform::String^, Platform::Object^>^  get();
                                   }
   
                                   /// <summary>
                                   /// NavigationHelper is used on each page to aid in navigation and 
                                   /// process lifetime management
                                   /// </summary>
                                   property Common::NavigationHelper^ NavigationHelper
                                   {
                                                   Common::NavigationHelper^ get();
                                   }
   
                   protected:
                                   virtual void OnNavigatedTo(WUIXNav::NavigationEventArgs^ e) override;
                                   virtual void OnNavigatedFrom(WUIXNav::NavigationEventArgs^ e) override;
   
                   private:
                                   void LoadState(Platform::Object^ sender, Common::LoadStateEventArgs^ e);
                                   void SaveState(Platform::Object^ sender, Common::SaveStateEventArgs^ e);
   
                                   static Windows::UI::Xaml::DependencyProperty^ _defaultViewModelProperty;
                                   static Windows::UI::Xaml::DependencyProperty^ _navigationHelperProperty;
   
   
                   };
   }
   

   WebViewerPage.xaml.cpp debe iniciarse de esta forma:

   //
   // WebViewerPage.xaml.cpp
   // Implementation of the WebViewerPage class
   //
   
   #include "pch.h"
   #include "WebViewerPage.xaml.h"
   
   using namespace SimpleBlogReader;
   using namespace concurrency;
   
   using namespace Platform;
   using namespace Platform::Collections;
   using namespace Windows::Foundation;
   using namespace Windows::Foundation::Collections;
   
   using namespace Windows::UI::Xaml;
   using namespace Windows::UI::Xaml::Controls;
   using namespace Windows::UI::Xaml::Controls::Primitives;
   using namespace Windows::UI::Xaml::Data;
   using namespace Windows::UI::Xaml::Input;
   using namespace Windows::UI::Xaml::Interop;
   using namespace Windows::UI::Xaml::Media;
   using namespace Windows::UI::Xaml::Media::Animation;
   using namespace Windows::UI::Xaml::Navigation;
   
   // The Basic Page item template is documented at 
   // https://go.microsoft.com/fwlink/?LinkId=234237
   
   WebViewerPage::WebViewerPage()
   {
       InitializeComponent();
       SetValue(_defaultViewModelProperty, ref new Map<String^, Object^>(std::less<String^>()));
       auto navigationHelper = ref new Common::NavigationHelper(this);
       SetValue(_navigationHelperProperty, navigationHelper);
       navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &WebViewerPage::LoadState);
       navigationHelper->SaveState += ref new Common::SaveStateEventHandler(this, &WebViewerPage::SaveState);
   }
   
   DependencyProperty^ WebViewerPage::_defaultViewModelProperty =
   DependencyProperty::Register("DefaultViewModel",
   TypeName(IObservableMap<String^, Object^>::typeid), TypeName(WebViewerPage::typeid), nullptr);
   
   /// <summary>
   /// used as a trivial view model.
   /// </summary>
   IObservableMap<String^, Object^>^ WebViewerPage::DefaultViewModel::get()
   {
       return safe_cast<IObservableMap<String^, Object^>^>(GetValue(_defaultViewModelProperty));
   }
   
   DependencyProperty^ WebViewerPage::_navigationHelperProperty =
   DependencyProperty::Register("NavigationHelper",
   TypeName(Common::NavigationHelper::typeid), TypeName(WebViewerPage::typeid), nullptr);
   
   /// <summary>
   /// Gets an implementation of <see cref="NavigationHelper"/> designed to be
   /// used as a trivial view model.
   /// </summary>
   Common::NavigationHelper^ WebViewerPage::NavigationHelper::get()
   {
       return safe_cast<Common::NavigationHelper^>(GetValue(_navigationHelperProperty));
   }
   
   #pragma region Navigation support
   
   /// The methods provided in this section are simply used to allow
   /// NavigationHelper to respond to the page's navigation methods.
   /// 
   /// Page specific logic should be placed in event handlers for the  
   /// <see cref="NavigationHelper::LoadState"/>
   /// and <see cref="NavigationHelper::SaveState"/>.
   /// The navigation parameter is available in the LoadState method 
   /// in addition to page state preserved during an earlier session.
   
   void WebViewerPage::OnNavigatedTo(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedTo(e);
   }
   
   void WebViewerPage::OnNavigatedFrom(NavigationEventArgs^ e)
   {
       NavigationHelper->OnNavigatedFrom(e);
   }
   
   #pragma endregion
   
   

2. En WebViewerPage.xaml.h, agrega esta variable de miembro privado:

   Windows::Foundation::Uri^ m_feedItemUri;
   

3. En WebViewerPage.xaml.cpp, reemplaza LoadState y SaveState por este código:

   void WebViewerPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
       // Run the PopInThemeAnimation. 
       Storyboard^ sb = dynamic_cast<Storyboard^>(this->FindName("PopInStoryboard"));
       if (sb != nullptr)
       {
           sb->Begin();
       }
   
       if (e->PageState == nullptr)
       {
           m_feedItemUri = safe_cast<String^>(e->NavigationParameter);
           contentView->Navigate(ref new Uri(m_feedItemUri));
       }
       // We are resuming from suspension:
       else
       {
           m_feedItemUri = safe_cast<String^>(e->PageState->Lookup("FeedItemUri"));
           contentView->Navigate(ref new Uri(m_feedItemUri));
       }
   }
   
   void WebViewerPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
       (void)e; // Unused parameter
       e->PageState->Insert("FeedItemUri", m_feedItemUri);
   }
   

   Observa la animación gratuita al comienzo de la función. Puedes encontrar más información sobre animaciones en el Centro de desarrollo de Windows. Ten en cuenta que de nuevo tenemos que tratar con las dos vías posibles para llegar a esta página. Si estamos arrancando, entonces debemos buscar nuestro estado.

Eso es todo. Presiona F5 y ya puedes navegar desde TextViewerPage a WebViewerPage.

Ahora vuelve al proyecto de Windows. Los pasos serán muy parecidos a los del teléfono.

Agregar el código XAML (WebViewerPage de aplicación de Windows)

1. En WebViewerPage.xaml, agrega un evento SizeChanged al elemento Page y llámalo pageRoot_SizeChanged. Coloca el punto de inserción sobre él y presiona F12 para generar el código subyacente.

2. Busca la cuadrícula "Botón Atrás y título de página" y elimina el TextBlock. El título de la página se mostrará en la página web y no nos ocupará espacio aquí.

3. Ahora, inmediatamente después de la cuadrícula del botón atrás, agrega el Border con WebView:

   <Border x:Name="contentViewBorder" BorderBrush="Gray" BorderThickness="2" 
                   Grid.Row="1" Margin="20,20,20,20">
               <WebView x:Name="contentView" ScrollViewer.HorizontalScrollMode="Enabled"
                        ScrollViewer.VerticalScrollMode="Enabled"/>
           </Border> 
   

   Un control WebView desempeña una gran labor, pero tiene algunas peculiaridades que lo hacen diferente en algunos aspectos de otros controles XAML. Si vas a utilizarlo mucho en una aplicación, deberías leer sobre él.

Agregar variable de miembro

1. Agrega la siguiente declaración privada en WebViewerPage.xaml.h:

   Platform::String^ m_feedItemUri;
   

LoadState y SaveState (WebViewerPage de aplicación de Windows)

1. Reemplaza las funciones LoadState y SaveState por este código, que es muy parecido a la página de teléfono:

   void WebViewerPage::LoadState(Object^ sender, Common::LoadStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
   
       // Run the PopInThemeAnimation. 
       auto sb = dynamic_cast<Storyboard^>(this->FindName("PopInStoryboard"));
       if (sb != nullptr)
       {
           sb->Begin();
       }
   
       // We are navigating forward from SplitPage
       if (e->PageState == nullptr)
       {
           m_feedItemUri = safe_cast<String^>(e->NavigationParameter);
           contentView->Navigate(ref new Uri(m_feedItemUri));
       }
   
       // We are resuming from suspension:
       else
       {
           contentView->Navigate(
               ref new Uri(safe_cast<String^>(e->PageState->Lookup("FeedItemUri")))
               );
       }
   }
   
   void WebViewerPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {
       (void)sender;   // Unused parameter
   
       // Store the info needed to reconstruct the page on back navigation,
       // or in case we are terminated.
       e->PageState->Insert("FeedItemUri", m_feedItemUri);
   }
   

   \

2. Establece el proyecto de Windows como proyecto de inicio y presiona F5. Si haces clic en el vínculo de TextViewerPage, deberías ir a la página WebViewerPage, y si haces clic en el botón atrás de WebViewerPage, deberías volver a TextViewerPage.

Parte 10: Agregar y quitar fuentes

A estas alturas la aplicación ya funciona muy bien tanto en Windows como en Windows Phone —eso sí, siempre que los usuarios no quieran leer otra cosa aparte de las tres fuentes que hemos codificado de forma rígida—. Pero como paso final, seamos prácticos y permitamos que los usuarios puedan agregar y eliminar fuentes de su elección. Les mostraremos algunas fuentes predeterminadas para que la pantalla no esté en blanco cuando inicien la aplicación por primera vez. A continuación, agregaremos algunos botones para que puedan agregar y eliminar fuentes. Naturalmente, deberemos almacenar la lista de fuentes de usuario para que persistan entre sesiones. Esto nos irá muy bien para aprender sobre los datos locales de aplicación.

Como primer paso, necesitaremos almacenar algunas fuentes predeterminadas para que se muestren la primera vez que se inicia la aplicación. Pero en vez de codificarlas de forma rígida, las pondremos en un archivo de recursos de cadena donde pueda encontrarlas el ResourceLoader. Necesitamos que esos recursos se compilen en la aplicación para Windows y en la aplicación para teléfono, así que vamos a crear el archivo .resw en el proyecto compartido.

Agregar recursos de cadena

1. En el Explorador de soluciones, selecciona el proyecto compartido, haz clic con el botón secundario y agrega un elemento nuevo. En el panel izquierdo elige Recurso y después, en el panel central, elige Archivo de recursos (.resw). (No elijas el archivo .rc porque es para aplicaciones de escritorio). Deja el nombre predeterminado o asígnale cualquier otro nombre. A continuación, haz clic en Agregar.

2. Agrega los siguientes pares de nombre-valor:

   • URL_1 http://sxp.microsoft.com/feeds/3.0/devblogs
   • URL_2 https://blogs.windows.com/windows/b/bloggingwindows/rss.aspx
   • URL_3 https://azure.microsoft.com/blog/feed

   Cuando acabes, el editor de recursos debería tener la apariencia siguiente.

   

Agregar código compartido para la adición y eliminación de fuentes

1. Vamos a agregar el código para cargar las direcciones URL en la clase FeedDataSource. En feeddata.h, agrega esta función de miembro privado en FeedDataSource:

   concurrency::task<Windows::Foundation::Collections::IVector<Platform::String^>^> GetUserURLsAsync();
   

2. Agrega estas instrucciones en FeedData.cpp.

   using namespace Windows::Storage;
   using namespace Windows::Storage::Streams;
   

3. Y después agrega la implementación:

   /// <summary>
   /// The first time the app runs, the default feed URLs are loaded from the local resources
   /// into a text file that is stored in the app folder. All subsequent additions and lookups 
   /// are against that file. The method has to return a task because the file access is an 
   /// async operation, and the call site needs to be able to continue from it with a .then method.
   /// </summary>
   
   task<IVector<String^>^> FeedDataSource::GetUserURLsAsync()
   {
   
       return create_task(ApplicationData::Current->LocalFolder->
           CreateFileAsync("Feeds.txt", CreationCollisionOption::OpenIfExists))
           .then([](StorageFile^ file)
       {
           return FileIO::ReadLinesAsync(file);
       }).then([](IVector<String^>^ t)
       {
           if (t->Size == 0)
           {
               // The data file is new, so we'll populate it with the 
               // default URLs that are stored in the apps resources.
               auto loader = ref new Resources::ResourceLoader();
   
               t->Append(loader->GetString("URL_1\n"));
               t->Append(loader->GetString("URL_2"));
               t->Append(loader->GetString("URL_3"));
   
               // Before we return the URLs, let's create the new file asynchronously 
               //  for use next time. We don't need the result of the operation now 
               // because we already have vec, so we can just kick off the task to
               // run whenever it gets scheduled.
               create_task(ApplicationData::Current->LocalFolder->
                   CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
                   .then([t](StorageFile^ file)
               {
                   OutputDebugString(L"append lines async\n");
                   FileIO::AppendLinesAsync(file, t);
               });
           }
   
           // Return the URLs
           return create_task([t]()
           {
               OutputDebugString(L"returning t\n");
               return safe_cast<IVector<String^>^>(t);
           });
       });
   }
   

   GetUserURLsAsync comprobará si existe el archivo feeds.txt. Si no existe, lo crea y agrega las direcciones URL de los recursos de cadena. Los archivos que el usuario agregue irán al archivo feeds.txt. Dado que todas las operaciones de escritura de archivos son asincrónicas, utilizamos una tarea y una continuación .then para asegurarnos de que el trabajo asincrónico se lleva a cabo antes de que intentemos acceder a los datos del archivo.

4. Ahora reemplaza la antigua implementación de InitDataSource por este código que llama a GetUerURLsAsync:

   ///<summary>
   /// Retrieve the data for each atom or rss feed and put it into our custom data structures.
   ///</summary>
   void FeedDataSource::InitDataSource()
   {
       auto urls = GetUserURLsAsync()
           .then([this](IVector<String^>^ urls)
       {
           // Populate the list of feeds.
           SyndicationClient^ client = ref new SyndicationClient();
           for (auto url : urls)
           {
               RetrieveFeedAndInitData(url, client);
           }
       });
   }
   

5. Las funciones para agregar y quitar fuentes son las mismas en Windows y Windows Phone, así que las pondremos en la clase App. En App.xaml.h,

6. Agrega estos miembros internos:

   void AddFeed(Platform::String^ feedUri);
   void RemoveFeed(Platform::String^ feedUri);
   

7. En App.xaml.cpp, agrega este espacio de nombres:

   using namespace Platform::Collections;
   

8. En App.xaml.cpp:

   void App::AddFeed(String^ feedUri)
   {
       auto feedDataSource = 
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
       auto client = ref new Windows::Web::Syndication::SyndicationClient();
   
       // The UI is data-bound to the items collection and will update automatically
       // after we append to the collection.
       feedDataSource->RetrieveFeedAndInitData(feedUri, client);
   
       // Add the uri to the roaming data. The API requires an IIterable so we have to 
       // put the uri in a Vector.
       Vector<String^>^ vec = ref new Vector<String^>();
       vec->Append(feedUri);
       concurrency::create_task(ApplicationData::Current->LocalFolder->
           CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
           .then([vec](StorageFile^ file)
       {
           FileIO::AppendLinesAsync(file, vec);
       });
   }
   void App::RemoveFeed(Platform::String^ feedTitle)
   {
       // Create a new list of feeds, excluding the one the user selected.
       auto feedDataSource = 
           safe_cast<FeedDataSource^>(App::Current->Resources->Lookup("feedDataSource"));
       int feedListIndex = -1;
       Vector<String^>^  newFeeds = ref new Vector<String^>();
       for (unsigned int i = 0; i < feedDataSource->Feeds->Size; ++i)
       {
           if (feedDataSource->Feeds->GetAt(i)->Title == feedTitle)
           {
               feedListIndex = i;
           }
           else
           {
               newFeeds->Append(feedDataSource->Feeds->GetAt(i)->Uri);
           }
       }
   
       // Delete the selected item from the list view and the Feeds collection.
       feedDataSource->Feeds->RemoveAt(feedListIndex);
   
       // Overwrite the old data file with the new list.
       create_task(ApplicationData::Current->LocalFolder->
           CreateFileAsync("feeds.txt", CreationCollisionOption::OpenIfExists))
           .then([newFeeds](StorageFile^ file)
       {
           FileIO::WriteLinesAsync(file, newFeeds);
       });
   }
   

Agregar el marcado XAML para la adición y eliminación de botones (8.1 de Windows)

1. Los botones para agregar y quitar fuentes pertenecen a la página principal MainPage. Vamos a poner los botones en un TopAppBar en la aplicación de Windows y en un BottomAppBar en la aplicación para teléfono (las aplicaciones de teléfono no tienen una barra superior). En el proyecto de Windows, en MainPage.xaml:, agrega TopAppBar justo después del nodo Page.Resources:

   <Page.TopAppBar>
           <CommandBar x:Name="cmdBar" IsSticky="False" Padding="10,0,10,0">
   
               <AppBarButton x:Name="addButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Icon="Add">
                   <Button.Flyout>
                       <Flyout Placement="Top">
                           <Grid>
                               <StackPanel>
                                   <TextBox x:Name="tbNewFeed" Width="400"/>
                                   <Button Click="AddFeed_Click">Add feed</Button>
                               </StackPanel>
                           </Grid>
                       </Flyout>
                   </Button.Flyout>
               </AppBarButton>
   
               <AppBarButton x:Name="removeButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Icon="Remove"
                             Click="removeFeed_Click"/>
   
               <!--These buttons appear when the user clicks the remove button to 
               signal that they want to remove a feed. Delete removes the feed(s)  
               and returns to the normal visual state and cancel just returns 
               to the normal state. -->
               <AppBarButton x:Name="deleteButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Visibility="Collapsed"
                             Icon="Delete" Click="deleteButton_Click"/>
   
               <AppBarButton x:Name="cancelButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Visibility="Collapsed"
                             Icon="Cancel"
                             Click="cancelButton_Click"/>
           </CommandBar>
       </Page.TopAppBar>
   

2. En cada uno de los cuatro nombres de controlador de eventos Click (add, remove, delete, cancel), pon el cursor sobre el nombre del controlador y presiona F12 para generar las funciones en el código subyacente.

3. Agrega este segundo VisualStateGroup dentro del elemento <VisualStateManager.VisualStateGroups>:

   <VisualStateGroup x:Name="SelectionStates">
       <VisualState x:Name="Normal"/>
           <VisualState x:Name="Checkboxes">
               <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
                           Storyboard.TargetProperty="SelectionMode">
                       <DiscreteObjectKeyFrame KeyTime="0" Value="Multiple"/>
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
                           Storyboard.TargetProperty="IsItemClickEnabled">
                       <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                   </ObjectAnimationUsingKeyFrames>                  
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="cmdBar" 
                            Storyboard.TargetProperty="IsSticky">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                   </ObjectAnimationUsingKeyFrames>
                </Storyboard>
         </VisualState>
   </VisualStateGroup>
   

Agrega los controladores de eventos para agregar y quitar las fuentes (Windows 8.1):

• En MainPage.xaml.cpp, reemplaza los cuatro stubs de controlador de eventos por este código:

  /// <summary>
  /// Invoked when the user clicks the "add" button to add a new feed.  
  /// Retrieves the feed data, updates the UI, adds the feed to the ListView
  /// and appends it to the data file.
  /// </summary>
  void MainPage::AddFeed_Click(Object^ sender, RoutedEventArgs^ e)
  {
      auto app = safe_cast<App^>(App::Current);
      app->AddFeed(tbNewFeed->Text);
  }
  
  /// <summary>
  /// Invoked when the user clicks the remove button. This changes the grid or list
  ///  to multi-select so that clicking on an item adds a check mark to it without 
  /// any navigation action. This method also makes the "delete" and  "cancel" buttons
  /// visible so that the user can delete selected items, or cancel the operation.
  /// </summary>
  void MainPage::removeFeed_Click(Object^ sender, RoutedEventArgs^ e)
  {
      VisualStateManager::GoToState(this, "Checkboxes", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
  }
  
  ///<summary>
  /// Invoked when the user presses the "trash can" delete button on the app bar.
  ///</summary>
  void SimpleBlogReader::MainPage::deleteButton_Click(Object^ sender, RoutedEventArgs^ e)
  {
  
      // Determine whether listview or gridview is active
      IVector<Object^>^ itemsToDelete;
      if (itemListView->ActualHeight > 0)
      {
          itemsToDelete = itemListView->SelectedItems;
      }
      else
      {
          itemsToDelete = itemGridView->SelectedItems;
      }
  
      for (auto item : itemsToDelete)
      {       
          // Get the feed the user selected.
          Object^ proxy = safe_cast<Object^>(item);
          FeedData^ item = safe_cast<FeedData^>(proxy);
  
          // Remove it from the data file and app-wide feed collection
          auto app = safe_cast<App^>(App::Current);
          app->RemoveFeed(item->Title);
      }
  
      VisualStateManager::GoToState(this, "Normal", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
  }
  
  ///<summary>
  /// Invoked when the user presses the "X" cancel button on the app bar. Returns the app 
  /// to the state where clicking on an item causes navigation to the feed.
  ///</summary>
  void MainPage::cancelButton_Click(Object^ sender, RoutedEventArgs^ e)
  {
      VisualStateManager::GoToState(this, "Normal", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
  }
  

  Presiona F5 con el proyecto de Windows como proyecto de inicio. Como verás, cada una de estas funciones miembro establece la propiedad de visibilidad de los botones en el valor apropiado y, a continuación, pasa al estado visual normal.

Agregar el marcado XAML para la adición y eliminación de botones (Windows Phone 8.1)

1. Agrega la barra de aplicación inferior con los botones después del nodo Page.Resources:

    <Page.BottomAppBar>
   
           <CommandBar x:Name="cmdBar" Padding="10,0,10,0">
   
               <AppBarButton x:Name="addButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Icon="Add"
                             >
                   <Button.Flyout>
                       <Flyout Placement="Top">
                           <Grid Background="Black">
                               <StackPanel>
                                   <TextBox x:Name="tbNewFeed" Width="400"/>
                                   <Button Click="AddFeed_Click">Add feed</Button>
                               </StackPanel>
                           </Grid>
                       </Flyout>
                   </Button.Flyout>
   
               </AppBarButton>
               <AppBarButton x:Name="removeButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Icon="Remove"
                             Click="removeFeed_Click"/>
   
   
               <!--These buttons appear when the user clicks the remove button to 
               signal that they want to remove a feed. Delete removes the feed(s)  
               and returns to the normal visual state. Cancel just returns to the normal state. -->
               <AppBarButton x:Name="deleteButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Visibility="Collapsed"
                             Icon="Delete" Click="deleteButton_Click"/>
   
   
               <AppBarButton x:Name="cancelButton" Height="95" Margin="20,0,20,0"
                             HorizontalAlignment="Right"
                             Visibility="Collapsed"
                             Icon="Cancel"
                             Click="cancelButton_Click"/>
           </CommandBar>
       </Page.BottomAppBar>
   

2. Presiona F12 en cada uno de los nombres de evento Click para generar el código subyacente.

3. Agrega el VisualStateGroup "Checkboxes" para que todo el nodo VisualStateGroups tenga esta apariencia:

   <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="SelectionStates">
           <VisualState x:Name="Normal"/>
           <VisualState x:Name="Checkboxes">
               <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" 
                               Storyboard.TargetProperty="SelectionMode">
                       <DiscreteObjectKeyFrame KeyTime="0" Value="Multiple"/>
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" 
                               Storyboard.TargetProperty="IsItemClickEnabled">
                       <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                   </ObjectAnimationUsingKeyFrames>
                   </ObjectAnimationUsingKeyFrames>
               </Storyboard>
           </VisualState>
       </VisualStateGroup>
   </VisualStateManager.VisualStateGroups>
   

Agregar controladores de eventos para los botones de adición y eliminación de fuentes (Windows Phone 8.1)

• En MainPage.xaml.cpp (WIndows Phone 8.1) reemplaza los controladores de eventos de stub que acabas de crear por este código:

  void MainPage::AddFeed_Click(Platform::Object^ sender, RoutedEventArgs^ e)
  {
      if (tbNewFeed->Text->Length() > 9)
      {
          auto app = static_cast<App^>(App::Current);
          app->AddFeed(tbNewFeed->Text);
      }
  }
  
  
  void MainPage::removeFeed_Click(Platform::Object^ sender, RoutedEventArgs^ e)
  {
      VisualStateManager::GoToState(this, "Checkboxes", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
  }
  
  
  void MainPage::deleteButton_Click(Platform::Object^ sender, RoutedEventArgs^ e)
  {
      for (auto item : ItemListView->SelectedItems)
      {
          // Get the feed the user selected.
          Object^ proxy = safe_cast<Object^>(item);
          FeedData^ item = safe_cast<FeedData^>(proxy);
  
          // Remove it from the data file and app-wide feed collection
          auto app = safe_cast<App^>(App::Current);
          app->RemoveFeed(item->Title);
      }
  
      VisualStateManager::GoToState(this, "Normal", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
  
  }
  
  void MainPage::cancelButton_Click(Platform::Object^ sender, RoutedEventArgs^ e)
  {
      VisualStateManager::GoToState(this, "Normal", false);
      removeButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      addButton->Visibility = Windows::UI::Xaml::Visibility::Visible;
      deleteButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
      cancelButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
  }
  

  Presiona F5 e intenta utilizar los nuevos botones para agregar o quitar las fuentes. Para agregar una fuente en el teléfono, haz clic en un vínculo RSS de una página web y después selecciona Guardar. A continuación, presiona el cuadro de edición que tiene el nombre de la URL y después presiona el icono de copiar. Navega de nuevo a la aplicación, coloca el punto de inserción en el cuadro de edición y vuelve a presionar el icono de copiar para pegar la URL. La lista de fuentes debería mostrar la fuente casi de inmediato.

  La aplicación SimpleBlogReader ya se puede utilizar correctamente y está lista para implementarla en tu dispositivo de Windows.

Para implementar la aplicación en tu propio teléfono, primero hay que registrarla siguiendo las indicaciones del artículo sobre Registro de un Windows Phone.

Para implementar en un Windows Phone desbloqueado

1. Crea una compilación de versión.

   

2. En el menú principal, selecciona Proyecto | Tienda | Crear paquetes de aplicaciones. En este ejercicio NO queremos implementar la aplicación en la tienda. Acepte los valores predeterminados en la pantalla siguiente a menos que tenga una razón para cambiarlos.

3. Si los paquetes se crearon correctamente, se te pedirá que ejecutes el Kit para la certificación de aplicaciones en Windows (WACK, por sus siglas en inglés). Es interesante que hagas esto a fin de asegurarte de que la aplicación no tiene ningún defecto oculto que impida su aceptación en la tienda. Pero dado que no vamos a implementarla en la tienda, este paso es opcional.

4. En el menú principal, selecciona Herramientas | Windows Phone 8.1 | Implementación de aplicación. Aparece el asistente de implementación de aplicación; en la primera pantalla, Destino debería decir "Dispositivo". Haz clic en el botón Examinar para navegar hasta la carpeta AppPackages del árbol de proyecto, que se encuentra en el mismo nivel que las carpetas Depurar y Liberar. Busca el paquete más reciente en esa carpeta (si hay más de uno) y haz doble clic en él. A continuación, haz clic en el archivo appx o appxbundle que contiene.

5. Asegúrate de que tu teléfono está conectado al equipo y que no está bloqueado con la pantalla de bloqueo. Presiona el botón Implementar del asistente y espera a que finalice la implementación. Pasados unos segundos debería aparecer un mensaje indicando que la implementación se realizó correctamente. Busca la aplicación en la lista de aplicaciones del teléfono y pulsa en ella para ejecutarla.

   Nota: Agregar nuevas direcciones URL no es un trabajo muy intuitivo al principio. Busca una URL que quieras agregar y pulsa en el vínculo. Cuando se te pregunte, confirma que quieres abrirla. Copia la dirección URL del RSS, por ejemplo http://feeds.bbci.co.uk/news/world/rss.xml, NO el nombre de archivo xml temporal que aparece después de que IE abre el archivo. Si la página XML se abre en IE, tendrás que navegar a la pantalla anterior de IE para captar la URL en la barra de direcciones. Una vez que la hayas copiado, vuelve a Simple Blog Reader y pégala en el bloque de texto Agregar fuente. A continuación, presiona el botón "Agregar fuente". Verás que la fuente se ha inicializado completamente y aparece en tu página principal. Ejercicio para el lector: implementar un contrato para contenido compartido u otro medio destinado a simplificar la adición de nuevas direcciones URL a SimpleBlogReader. ¡Feliz lectura!

A continuación

En este tutorial hemos aprendido a usar las plantillas de página integradas de Microsoft Visual Studio Express 2012 for Windows 8 para compilar una aplicación de varias páginas, y a navegar y pasar datos entre las páginas. Hemos aprendido a usar los estilos y las plantillas para hacer que nuestra aplicación se ajuste a la personalidad del sitio web de The Windows Blog. También hemos aprendido a utilizar animaciones de tema y una barra de la aplicación para hacer que la aplicación se ajuste a la personalidad de una aplicación de la Tienda Windows. Y, por último, hemos aprendido a adaptar nuestras aplicaciones a diferentes diseños y orientaciones para que se vea siempre de la mejor manera.

Nuestra aplicación está casi lista para ser enviada a la Tienda Windows. Para obtener más información sobre cómo enviar una aplicación a la Tienda Windows, consulta:

• Llevar tus aplicaciones al mercado
• Cómo hacer que tu aplicación sea accesible. Para obtener más información, consulta Accesibilidad.
• La lista de recursos de referencia y aprendizaje: Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++.

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++