Silverlight es la principal plataforma de desarrollo de aplicaciones para Windows Phone 7. En un tutorial anterior cubrimos cómo configurar su sistema para el desarrollo de Windows Phone 7 y luego desarrollamos una muy Aplicación simple de Silverlight que hizo girar un botón alrededor de una cuadrícula. Este artículo le presentará las características más avanzadas de Silverlight y le permitirá desarrollar aplicaciones significativas que muestren datos de manera interesante y única..
Este artículo le presentará una serie de características de Windows Phone 7 y Silverlight de nivel intermedio que incluyen recursos de aplicaciones, estilos, plantillas de datos y navegación por vistas. Aprovecharás el enlace de datos y WP7 Servicios que le permiten navegar entre las páginas de forma rápida y sencilla. Debería estar familiarizado con XAML y C # antes de comenzar este tutorial..
Creando tu proyecto
En este tutorial, creará un cliente Digg simple que le permite a un usuario buscar historias por tema. Aprovechará las funciones de nivel intermedio de Silverlight y Windows Phone 7, incluidos los recursos de aplicaciones, estilos, plantillas de datos y servicios de navegación. Utilizará el enlace de datos para mostrar información de Digg y varios WP7 Servicios para permitir a los usuarios moverse por su aplicación.
Para comenzar, asegúrese de tener las últimas herramientas de desarrollo de Windows Phone 7 instaladas en su computadora. Las herramientas se actualizaron el 12 de julio de 2010, por lo que es posible que necesite desinstalar un CTP anterior e instalar las herramientas Beta.
Abra Visual Studio 2010 y haga clic en Nuevo proyecto en la barra lateral izquierda. En el cuadro de diálogo que aparece, seleccione "Aplicación de Windows Phone" de las plantillas disponibles y asigne a su proyecto un nombre como "SimpleDigg". Asegúrese de que la opción "Crear directorio para la solución" esté marcada y luego haga clic en "Aceptar". Debe parecerse a lo siguiente:
Después de crear su proyecto, Visual Studio abre MainPage.xaml para editarlo. Cerrar este archivo por ahora.
Creando Clases de Datos Digg
Para acceder a los datos de Digg, usaremos su API oficial. En particular, usaremos los métodos story.getAll y topic.getAll. Se pueden encontrar ejemplos de respuestas para cada llamada en las siguientes URL:
story.getAll
topic.getAll
Como puedes ver, story.getAll devuelve artículos de la historia. Las historias tienen muchos datos asociados con ellas, pero nos centraremos en 4 piezas de información:
Título
Descripción
Diggs
Enlazar
Vamos a crear la clase para mantener estos datos. En el Explorador de soluciones de Visual Studio (que está abierto de manera predeterminada en la barra lateral derecha), haga clic con el botón derecho en su proyecto y elija "Agregar> Nueva carpeta". Nombra esta nueva carpeta Digg. Haga clic con el botón derecho en la carpeta que acaba de crear y elija "Agregar> Clase ...". Nombra tu clase Historia y haga clic en el botón Agregar.
Visual Studio abrirá su nueva clase para editar. Dentro de la definición de la clase agregue cuatro propiedades públicas como las siguientes:
cadena pública Título get; conjunto; cadena pública Descripción get; conjunto; enlace de cadena pública obtener; conjunto; public int Diggs get; conjunto;
Ahora, agregue la clase que contendrá los datos del tema. Haga clic derecho en su Digg carpeta de nuevo y seleccione "Agregar> Clase ...". Nombra tu clase Tema y agregue las siguientes propiedades cuando se abra el archivo:
Nombre de la cadena pública get; conjunto; cadena pública nombre corto obtener; conjunto;
En este punto, ha creado todas las clases de datos que necesitará para este tutorial y está listo para marcar las vistas necesarias para el resto de la aplicación.
Creando Vistas
El cliente SimpleDigg tiene tres vistas diferentes que deben crearse. Son:
Lista de temas: enumera todos los temas en Digg
Lista de historias: enumera las historias recuperadas de Digg basadas en un tema en particular
Detalle de la historia: muestra detalles sobre una historia seleccionada
Lista de temas
La Lista de temas será la primera pantalla que los usuarios verán cuando inicien la aplicación. Comprende una lista de nombres de temas que, cuando se hace clic en uno de los temas, conduce a una lista de historias en ese tema. Como esta será la primera pantalla que verán los usuarios, seguiremos adelante y usaremos el archivo MainPage.xaml creado anteriormente que ya existe en el Proyecto. Abra MainPage.xaml y debería ver una representación visual a la izquierda y el marcado para la vista a la derecha.
Haga clic en el texto "Mi solicitud" en la representación visual y observe que un Bloque de texto El elemento en la representación XAML está resaltado. Ese Bloque de texto tiene un Texto atributo actualmente ocupado por el valor "MI APLICACIÓN". Cambie ese valor a lo que desee. Recomiendo “Simple Digg”. Verá que el diseñador visual se actualiza para que coincida con sus cambios..
Ahora, repita el proceso con la cadena de "nombre de página". Haga clic en el texto, encuentre el apropiado Bloque de texto y modificar el Texto atributo. Esta vez, recomiendo cambiarlo a "Temas". Si has hecho todo correctamente hasta este punto, deberías tener un StackPanel Elemento que contiene dos @ TextBlock @ s, cada uno con un valor apropiado. El XAML se parece a lo siguiente:
Ahora, necesita agregar el contenedor de la lista a su página. Abra la caja de herramientas de control (ubicada a la izquierda de Visual Studio) y arrastre un elemento ListBox al gran área en blanco de su página. Debe modificarlo para ampliar el ancho y la altura de su contenedor, así que coloque el cursor en el editor XAML y modifique el elemento ListBox para que se lea de la siguiente manera:
Este marcado elimina todo el estilo que el diseñador visual introdujo y cambia el nombre del elemento para que pueda acceder a los elementos en él. En este punto, ha completado el marcado de la vista de la lista de temas y ahora puede pasar a las otras partes de la aplicación.
Lista de historias
La vista de la lista de historias es muy similar a la lista de temas. Para fines organizativos, vamos a colocar esta vista (y luego, la vista Detalle de la historia) dentro de una carpeta separada. Haga clic con el botón derecho en el nombre de su proyecto en el Explorador de soluciones y elija "Agregar> Nueva carpeta". Asigne un nombre a la nueva carpeta Puntos de vista. Luego, haga clic derecho en el Puntos de vista carpeta y elija "Agregar> Nuevo elemento ..." Seleccione la Página de retrato de Windows Phone plantilla y nombre Historias.xaml. Su cuadro de diálogo debe verse como el siguiente:
Ahora, como antes, cambie el título de la aplicación a "Simple Digg" y el nombre de la página a "Historias". A continuación, arrastre un ListBox al espacio en blanco debajo del título de su página y modifique su marca para que se vea como sigue:
En este punto, la vista de la lista de historias es casi idéntica a la lista de temas. Las diferencias reales se mostrarán cuando los rellene con elementos de datos.
Detalles de la historia
La vista final para su aplicación es la vista Detalles de la historia. La vista Detalles de la historia presentará los 4 datos que mencionamos anteriormente:
Título
Descripción
Diggs
Enlazar
El número de Diggs y el título ocuparán la parte superior de la vista y la descripción de la historia se incluirá debajo. Después de eso, un enlace permitirá al usuario navegar a la historia en cuestión si así lo desea..
Como antes, haga clic derecho en el Puntos de vista en su proyecto y elija Agregar> Nuevo elemento. Selecciona el Página de retrato de Windows Phone plantilla y nombre de su nueva vista Story.xaml. Haga clic en Agregar y Visual Studio creará Story.xaml y abrirlo para editar.
Cambie el título de la aplicación y los bloques de texto del título de la página para leer "Simple Digg" y "Story" respectivamente. Ahora, arrastre un StackPanel en el espacio en blanco debajo del título de tu página. Arrastrar otro StackPanel en el anterior StackPanel. Esta StackPanel Contendrá el título de la historia y el conteo de Digg. Desea que estos elementos se alineen uno junto al otro, así que cambie el Orientación propiedad a Horizontal.
Por último, arrastre un Bloque de texto y un Botón en tu primer StackPanel. los Bloque de texto contendrá la descripción de la historia, mientras que el Botón Permitirá al usuario visitar la fuente de la historia. Necesitará realizar una modificación extensa de la propiedad de estos elementos y, en lugar de ejecutarlos uno por uno, solo asegúrese de que su marca tenga el siguiente aspecto:
Usted puede ver que hemos eliminado más explícito Altura y Anchura propiedades y cambio Texto y Nombre Propiedades a algo un poco más descriptivo. Parece un poco feo en este momento, pero lo arreglaremos más tarde. Si tiene todo marcado correctamente, entonces el panel de su diseñador visual debe tener el siguiente aspecto:
En este punto, se hacen los fundamentos de todas las vistas necesarias. Puedes presionar F5 para iniciar la aplicación y confirmar que todo está funcionando, pero solo aparecerá una pantalla en blanco con "Temas" en la parte superior.
Personalizando el Mapeador de Navegación
Lo siguiente que debe hacer es asegurarse de que puede dirigir a los usuarios alrededor de su aplicación. Para hacerlo, usarás el mapa de navegación de Silverlight con unas pocas reglas simples. Abre tu proyecto App.xaml Archivo y coloque el cursor dentro de la abertura Solicitud elemento y agregar un nuevo espacio de nombres de la siguiente manera:
xmlns: nav = "clr-namespace: System.Windows.Navigation; assembly = Microsoft.Phone"
Esto hace referencia al espacio de nombres de navegación del sistema de Windows (una característica de Silverlight) y le permite usar las diversas clases de biblioteca que existen dentro de él. Ahora, encuentra el Aplicación.Recursos elemento en App.xaml y agregar los siguientes elementos:
El código que acaba de ingresar crea una variedad de asignaciones de URI para las vistas dentro de su aplicación. Se corresponden con las vistas de lista de temas, lista de historias y detalle de historia respectivamente. Como puede ver, la asignación de navegación de Silverlight le permite definir variables de consulta dentro de sus asignaciones personalizadas. Esto será útil más adelante cuando vayamos a llenar datos en realidad.
Sin embargo, no has terminado con la asignación de URI. Necesitas decirle a tu aplicación que use este UriMapper, así que abre el App.xaml código detrás haciendo clic en la flecha al lado de App.xaml y abriendo App.xaml.cs. Dentro de la Aplicación método después de la llamada a InitializePhoneApplication () agregue la siguiente declaración:
RootFrame.UriMapper = Recursos ["UriMapper"] como UriMapper;
Esta declaración le dice a su aplicación que use el UriMapper que acaba de definir en XAML para su aplicación de teléfono. Ahora, comencemos a llenar algunos datos.
Poblando la lista de temas
Lo primero que debemos hacer es rellenar la lista de temas. Haremos esto cuando el usuario navegue por primera vez al MainPage.xaml página. Para asegurarse de que esto suceda, anulará la OnNavigatedTo método para el Pagina principal clase. Abierto MainPage.xaml.cs haciendo clic en la flecha al lado de MainPage.xaml. Coloque su cursor después del constructor y agregue el siguiente código:
anulación protegida void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = new WebClient (); digg.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (new Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (objeto remitente, DownloadStringCompletedEventArgs e)
Puedes ver eso dentro de la OnNavigatedTo método creas un WebClient objeto, asígnele un controlador de eventos para cuando se descarga una cadena, y luego indíquele que descargue la cadena desde el Digg topic.getAll URL del método. Sabemos que la cadena que se descargará estará en formato XML, por lo que debemos asegurarnos de que nuestro controlador de eventos pueda analizar el XML. Para este propósito usaremos las bibliotecas Linq disponibles en el marco .NET. Sin embargo, antes de que podamos utilizar esas clases de biblioteca, tendremos que agregar una referencia a la biblioteca. Haga clic con el botón derecho en el elemento "Referencias" en el panel del Explorador de soluciones y elija "Agregar referencia ..." De la lista que aparece, seleccione System.Xml.Linq y haga clic en "Aceptar".
Ahora, solo necesitas completar el controlador de eventos que creaste. Cambio digg_DownloadStringCompleted por lo que se parece a lo siguiente:
void digg_DownloadStringCompleted (objeto remitente, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var topics = from topic en topicXml.Descendants ("topic") selecciona un nuevo Tema Name = topic.Attribute ("name"). Value, ShortName = topic.Attribute ("short_name"). Value; TopicsList.ItemsSource = topics;
Primero, verifica si la descarga se completó con éxito. Si lo fue, entonces analiza la cadena resultante y genera una colección de temas utilizando Linq a XML. Si está interesado, puede leer más sobre Linq to XML en el sitio oficial de MSDN.
Finalmente, le asigna la ArtículosSource propiedad de la TemasLista a los temas que has analizado. Si ve una línea ondulada debajo del tema, luego coloque el cursor detrás de ella, haga clic en la flecha hacia abajo que aparece debajo de la palabra y seleccione "utilizando SimpleDigg.Digg". En este punto, ha completado sus temas, así que active el emulador de su teléfono presionando F5 y debería ver algo como lo siguiente:
Como puede ver, su lista se ha completado, pero no se muestran los datos correctos. Cuidemos eso ahora.
Plantillas de datos
La plantilla de datos es una de las herramientas más poderosas en su kit de herramientas de Silverlight. Le permiten definir el marcado que se debe mostrar para objetos arbitrarios. En este punto, definiremos DataTemplates para temas e historias de Digg. Abierto App.xaml y coloca el cursor dentro de la Aplicación.Recursos elemento. Agregue el siguiente elemento:
Este DataTemplate proporciona contiene un simple Bloque de texto elemento que está ligado a la Nombre Propiedad del objeto que se muestra. Si te acuerdas, la Digg.Topic la clase contiene un Nombre propiedad que se establece en el nombre atributo devuelto por la llamada a la API de temas de Digg. Volver a su MainPage.xaml y encontrar el Cuadro de lista elemento. Añadir una nueva propiedad ItemTemplate al Cuadro de lista como sigue:
ItemTemplate = "StaticResource TopicTemplate"
Esta línea de código le indica a la aplicación que use su código creado anteriormente. Plantilla de datos recurso para mostrar los objetos Topic que forman el Cuadro de listacolección de. Si presiona F5 y ejecuta su aplicación, verá que los nombres de los Temas se muestran correctamente ahora:
Recogiendo y exhibiendo historias
En este punto, estamos listos para comenzar a buscar historias por tema y enumerarlas. Primero, debemos decirle a la aplicación que cuando se toca un título de tema, la aplicación debe navegar a la lista de historias. Abierto MainPage.xaml y encuentra tu Cuadro de lista elemento. Añade el SelectionChanged y permite a Visual Studio crear un nuevo controlador de eventos. En MainPage.xaml.cs, cambia tu controlador de eventos para que lea algo como lo siguiente:
private void TopicsList_SelectionChanged (remitente del objeto, SelectionChangedEventArgs e) Tema de tema = TopicsList.SelectedItem as Topic; NavigationService.Navigate (new Uri ("/ Topics /" + topic.ShortName, UriKind.Relative));
Si ejecuta su aplicación ahora (presionando F5), puede ver que navega a la página de Historias cada vez que selecciona un tema. Ahora, solo necesitamos rellenar la lista de historias y hacer que se muestren adecuadamente. Como hicimos anteriormente, vamos a anular la OnNavigatedTo Método para que eso suceda. Abierto Vistas / Historias.xaml.cs y añada el siguiente código:
anulación protegida void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Nombre de la cadena; NavigationContext.QueryString.TryGetValue ("Topic", out name); Cliente de WebClient = nuevo WebClient (); client.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (new Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + name)); void client_DownloadStringCompleted (objeto remitente, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var story = from story in storyXml.Descendants ("story") selecciona Digg.Story nuevo Title = story.Element ("title"). Value, Description = story.Element ("description"). Value, Diggs = Int32. Parse (story.Attribute ("diggs"). Value), Link = story.Attribute ("link"). Value; StoriesList.ItemsSource = historias;
Mucho de esto te parecerá familiar. La única parte que puede parecer extraña es recuperar el nombre del tema. Si recuerdas, mapeaste / Temas / tema a /Views/Stories.xaml?Topic=topic. Es decir, permite que la variable de cadena de consulta de Tema se pase en un formato amigable. Cuando navegamos desde la lista de temas, pasamos el nombre corto del tema en el Uri relativo. En el código anterior, cuando se navega por la lista de historias, recuperamos esta variable y la usamos para llamar a la API de Digg con un tema específico..
Sabemos que si iniciamos nuestra aplicación en este momento no obtendremos el tipo de apariencia que queremos para nuestra lista de historias. Vamos a definir otra plantilla de datos para usar en esta vista. Abrir App.xaml y agrega el siguiente código a tu Aplicación.Recursos elemento.
Ahora, abre Vistas / Historias.xaml y modifica tu Cuadro de lista elemento por lo que se lee como sigue:
Ejecute su aplicación presionando F5 y haga clic en el nombre de un tema. Espera un momento y verás aparecer tus historias. Lo siguiente que tenemos que hacer es mostrar los detalles de la historia en la página de detalles..
Viendo los detalles de la historia
Para mostrar los detalles de la historia, primero debemos permitir la navegación a la página de detalles de la historia y luego manejaremos la visualización de los datos. En la lista de historias, tenemos varios artículos de la historia. Cuando se selecciona uno de ellos queremos almacenar ese Historia objetar en algún lugar y luego usarlo en la página de detalles de la historia. Para ello, añadiremos un controlador de eventos a la SelectionChanged evento de la siguiente manera:
privado void StoriesList_SelectionChanged (emisor de objeto, SelectionChangedEventArgs e) PhoneApplicationService.Current.State ["Story"] = StoriesList.SelectedItem; NavigationService.Navigate (new Uri ("/ Story", UriKind.Relative));
Aquí, estás almacenando la historia seleccionada en el PhoneApplicationService clase Estado Propiedad recomendada por las mejores prácticas del modelo de ejecución. Si tienes una línea ondulada roja debajo PhoneApplicationService luego, coloque el cursor dentro de la palabra y luego seleccione el menú desplegable que aparece y elija "usar Microsoft.Phone.Shell".
Ahora, necesitamos recuperar esto en el otro extremo. Abre tu Vistas / Story.xaml.cs y agrega el siguiente código que anula OnNavigatedTo:
anulación protegida void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Digg.Story story = PhoneApplicationService.Current.State ["Story"] como Digg.Story; this.DataContext = historia;
Aquí, usted intercepta la navegación a la vista de detalles de la historia, recupera la historia almacenada en el PhoneApplicationServicees Estado propiedad, y luego quitar la historia de la PhoneApplicationServicees Estado colección. A continuación, establezca la DataContext Por la vista a la historia recuperada. Esta es la clave, ya que usaremos este enlace para hacer que se muestren los datos apropiados.
Abra su marca para la vista de detalles de la historia en Vistas / Story.xaml. Modifíquelo para usar enlaces de la siguiente manera:
Si inicia la aplicación ahora (presione F5), podrá profundizar desde la lista de temas, a la lista de historias, a los detalles completos de la historia. La vista de detalles de la historia debe ser similar a la siguiente:
Sólo hay una última cosa que hacer. Agregar un controlador de eventos de clic al botón de enlace en Vistas / Story.xaml como sigue:
Cambia tu controlador de eventos, Link_Click, Para leer como el siguiente:
link_Click privado (objeto remitente, RoutedEventArgs e) WebBrowserTask task = new WebBrowserTask (); task.URL = (this.DataContext as Digg.Story) .Link; tarea.Mostrar ();
Si ves una línea ondulada roja debajo de WebBrowserTask, luego coloque el cursor sobre la clase y luego seleccione "usar Microsoft.Phone.Tasks" en el menú desplegable que aparece. Este código inicia el navegador web de Windows Phone 7 al hacer clic en el botón y lo lleva a la URL de la historia.
Terminando
Usted tiene un cliente Digg completamente funcional, aunque simple, en este punto. Puede explorar historias por temas, ver detalles de la historia y visitar la historia completa en el WP7 navegador web. En este tutorial hemos:
Clases creadas para almacenar datos Digg
Creamos y personalizamos vistas de aplicaciones usando el diseñador visual.
URI de navegación personalizados y utiliza el servicio de navegación de Windows Phone 7
Se implementaron plantillas de datos y estilos para mostrar historias y temas
Anuló los controladores de eventos OnNavigatedTo y OnNavigatedFrmo para proporcionar la funcionalidad adecuada para cada página
Utilizó las tareas de Windows Phone 7 para iniciar un navegador web.
Algunos de los temas que cubrimos están lejos de ser cubiertos en un simple tutorial, por lo que probablemente querrá saber más sobre ellos. Los siguientes recursos deberían ayudarlo a comenzar:
Plantillas de datos
Resumen de plantillas de datos
Tutoriales de WPF: Plantillas de datos
Estilos
Tutoriales de WPF: Estilos
Tour guiado de WPF - Estilos
Programación de Windows Phone 7
Guia de programacion
Empezando
Espero que hayas disfrutado este tutorial. Si tiene alguna pregunta o desea ver algo diferente en un futuro tutorial de Windows Phone 7, hágamelo saber en los comentarios.
Share
Accentsconagua
