Construyendo la UI - Parte 1
Para crear la UI recomiendo siempre contar con un poco de buen gusto estético y para nosotros los desarrolladores eso a veces implica pedirle ayuda a un amigo diseñador, así que no teman pedir una mano para hacer algo bonito.
En esta parte del tutorial crearemos la interfaz gráfica básica de una aplicación Lectora de RSS, pero no teman aventurarse proponiendo cosas más interesantes y creativas.
Desde Visual Studio abrimos View/RssMainView.xaml allí encontramos ya implementada una UI básica, desde el código XAML ubicamos el siguiente Grid
<Grid Style="{StaticResource LayoutRootStyle}">Todo lo que este dentro de este control lo borramos para que finalmente el código del archivo quede así
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="RSSJuanK4Blog.View.RssMainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RSSJuanK4Blog.View"
xmlns:common="using:RSSJuanK4Blog.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:vm="using:RSSJuanK4Blog.ViewModel"
>
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>
<vm:RssMainViewModel x:Key="ViewModel" x:Name="ViewModel"
FeedUrlString="http://blogs.msdn.com/b/juank/rss.aspx"/>
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
</ Grid>
< /common:LayoutAwarePage>Crear la interfaz gráfica se puede hacer de tres formas
- Editando el código XAML
- Usando el diseñador de Visual Studio
- Usando Expression Blend (incluido también gratis con Visual Studio 2012)
En todas a la final lo que se genera es código XAML por lo que cualquier cosa la puedes hacer desde las tres herramientas, si trabajas desde XAML tienes acceso a todas las características pero te costara mas trabajo hacerlas porque debes hacer todo el código por ti mismo, desde el diseñador de Visual Studio puedes hacer muchas cosas, pero no todas, sin embargo es más rápido que hacer todo desde XAML y finalmente desde Expression Blend puedes hacer muchísimas cosas casi cubrir la totalidad de XAML y generar en minutos cosas que por código tardarías horas.
Es importante saber XAML pues es así como logras tener un control absoluto de la UI pero sin lugar a dudas utilizar otras herramientas te hará más productivo.
Esta primera parte la haré desde el código XAML para definir la estructura principal de la aplicación, el esqueleto.
Pero posteriormente editaremos varios elementos desde Expression Blend (En adelante solo Blend) de tal forma que aprendan también a manejarlo.
Esquema principal de la App
Esta es la forma en que se distribuirá el espacio de la App.
Así que en el XAML, tomamos el grid que hemos dejado y lo convertimos en ello, Cómo? el Grid es en esencia una tabla a la que le podemos crear filas y columnas, así que establecemos las 2 filas y 3 columnas necesarias.
Las filas las establecemos así, el * indica que esa fila ocupara todo el espacio disponible
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
< /Grid.RowDefinitions>Ahora las columnas
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="500"/>
<ColumnDefinition Width="*"/>
< /Grid.ColumnDefinitions>El resultado
Para identificar las filas y columnas se utiliza numeración comenzando desde 0, de tal forma que a la celda 1 la referenciamos como la celda (0,0) es decir fila 0 columna 0.
Creando elementos básicos
El titulo
En la celda(0,1) creamos un TextBlock con el nombre de nuestra aplicación, el texto se puede colocar directamente pero el nombre de la aplicación ya esta definido como un recurso dentro del XAML al comienzo del archivo, así que mejor hacemos uso de ese recurso utilizando Binding, de igual forma podemos configurar la apariencia del control desde 0 o utilizar un estilo ya definido, si se quiere utilizar estilos ya definidos, en el archivo Common/StandardStyles.xaml hay una amplia colección de estilos con el look and feel de Windows 8. Por el momento utilizare estilos propios, para cambiar la apariencia del TextBlock Visual Studio ofrece ayudas IntelliSense para hacer esta tarea más fácil autocompletando código. Es conveniente colocarle nombre a los controles en especial a los que es posible que necesitemos acceder posteriormente para cambiarles propiedades así que este también tiene nombre:
<TextBlock x:Name="pageTitle"
Grid.Column="1" Grid.Row="0"
Text="{StaticResource AppName}"
FontSize="45" FontWeight="Light"
TextWrapping="Wrap" Margin="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
/ >El nombre de la aplicación hay que modificarlo, en la parte superior del archivo xaml en la sección Page.Resources hay un recurso llamado AppName, allí le puedes cambiar el contenido por el nombre que quieras para tu aplicación, en mi caso Blog Ideas de un Conejo
Para modificar los estilos de un componente puedes seleccionarlo en el código o en el diseñador de Visual Studio presionas click derecho, propiedades o simplemente presionas F4 para que aparezca el panel de propiedades, desde allí puedes también modificar lo que desees.
Manejar los estilos como lo mostré arriba es válido, pero después de tener muchos controles con sus estilos propios el tema se vuelve inmanejable ya que la aplicación se torna muy compleja de leer, por ello vamos a extraer estas propiedades en un estilo a aparte.
Aplicar propiedades utilizando estilos
Desde el diseñador de Visual Studio seleccionamos el Textbox creado anteriormente, damos clic derecho, edit style, create empty
En el cuadro que aparece editamos la siguiente información y aceptamos, esto nos lleva al archivo App.xaml donde se ha creado un nuevo estilo, aunque esta vacío.
En el TextBlock que habíamos creado, recortamos los atributos visuales que habíamos colocado dejándolo de esta forma:
<TextBlock x:Name="pageTitle"
Grid.Column="1" Grid.Row="0"
Text="{StaticResource AppName}"
Style="{StaticResource Title-Main-Style}"
/ >Regresando al archivo Appx.xaml nos posicionamos sobre el estilo recién creado y en el panel de propiedades (F4) volvemos a aplicar los atributos quedando el código xaml así
<Style x:Key="Title-Main-Style" TargetType="TextBlock">
<Setter Property="FontSize" Value="45"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="Margin" Value="10" />
<Setter Property="HorizontalAlignment" Value="Stretch" / >En adelante todas las propiedades visuales las editaremos en un estilo a aparte. Por claridad en el código algunas cosas se mantendrán en el objeto como lo son las propiedades de Binding y ubicación dentro del Grid, si bien es perfectamente válido llevarlas también al estilo.
El icono
En la parte superior izquierda de la app hemos establecido que aparezca un ícono, puedes utilizar cualquier imagen, para elaborarlo los invito a utilizar esta herramienta gratuita de SyncFussion: Metro Studio una vez lo has bajado te envían el serial por email. Es la que yo utilizo ya que tiene más de 1700 iconos editables y fácilmente personalizables desde la aplicación.
Agregamos la imagen y la configuramos de la siguiente forma
<Image Style="{StaticResource Logo-Style}" Source="ms-appx:///Assets/img/ideas-logo.png"/>En Appx.xaml agregamos el siguiente estilo
<Style x:Key="Logo-Style" TargetType="Image">
<Setter Property="Margin" Value="10"/>
< /Style>Como se darán cuenta no establecimos las propiedades de fila y columna, pero no es necesario cuando no se coloca alguna de las dos el motor de xaml asume que su valor es 0.
El artículo actual
El articulo actual se despliega en la columna 2, allí debe ir el título del artículo y justo debajo el contenido. Dejaremos el titulo en (2,0) y el contenido en (2,1)
En Appx.xaml creamos un nuevo estilo basado en el estilo del titulo principal, le adicionamos dos propiedades
<Style x:Key="Title-Post-Style" TargetType="TextBlock"
BasedOn="{StaticResource Title-Main-Style}" >
<Setter Property="FontSize" Value="30"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
< /Style>Regresando al View creamos un nuevo TextBlock así
<TextBlock Grid.Column="2" Grid.Row="0" Text="Titulo de prueba"
Style="{StaticResource Title-Post-Style}" / >Debajo del TextBlock creamos un nuevo elemento de tipo WebView con los siguientes atributos
<WebView x:Name="wvBlogContent"
Grid.Column="2" Grid.Row="1"
Style="{StaticResource WebView-Style}" />En Appx.xaml creamos el estilo correspondiente de la siguiente manera
<Style x:Key="WebView-Style" TargetType="WebView">
<Setter Property="Margin" Value="10,0"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="CacheMode" Value="BitmapCache"/>
</ Style>La razón por la que el WebView esta colapsado es porque solo lo haremos visible cuando este mostrando información del blog.
La Lista de Artículos
La lista de artículos disponibles se mostraran en (0,1), esto se hará con ayuda de un ListView que sirve para mostrar listas de ítems, este ListView de acuerdo a nuestro esquema inicial debe ocupar dos columnas, así que debemos también establecer la propiedad ColumnSpan en 2
<ListView x:Name="lvwBlogPosts"
Grid.ColumnSpan="2" Grid.Row="1"
Style="{StaticResource Lista-Posts-Style}" >Ahora que dentro del ListView creamos un elemento que permita que la información de cada post se despliegue bien , cada ítem a mostrar consta de los siguientes elementos:
- Imagen
- Titulo
- Resumen
Así queda armado nuestro ListView armado y más abajo los correspondientes estilos a utilizar:
<ListView x:Name="lvwBlogPosts" Grid.ColumnSpan="2" Grid.Row="1"
Style="{StaticResource Lista-Posts-Style}" >
<StackPanel Orientation="Horizontal">
<Image Style="{StaticResource Image-Post-List}" Source="ms-appx:///Assets/img/Picture.png"/>
<StackPanel>
<TextBlock TextWrapping="Wrap"
Text="Titulo de Prueba en multiples lineas"
Style="{StaticResource Title-PostList-Style}"/>
<TextBlock TextWrapping="Wrap"
Text="Titulo de Prueba en multiples lineas., Titulo de Prueba en multiples lineas"
Style="{StaticResource Summary-PostList-Style}"/>
< /StackPanel>
< /StackPanel>
< /ListView><Style x:Key="Lista-Posts-Style" TargetType="ListView">
<Setter Property="Margin" Value="10,0"/>
</Style>
<Style x:Key="Image-Post-List" TargetType="Image">
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="120"/>
< /Style>
<Style x:Key="Title-PostList-Style" TargetType="TextBlock">
<Setter Property="Width" Value="350"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Margin" Value="0,5,5,10"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
< /Style>
<Style x:Key="Summary-PostList-Style" TargetType="TextBlock"
BasedOn="{StaticResource Title-PostList-Style}">
<Setter Property="FontSize" Value="14"/>
< /Style>Como ya tenemos mejor de que la UI quedara como esperamos es hora de utilizar el ítem que hemos creado como una plantilla para utilizarla en todos los demás ítems, así que todo el StackPanel que esta dentro del ListView lo utilizaremos ahora dentro del template de ítems del ListView.
En el diseñador hacemos click derecho sobre el ListView y seleccionamos:
Esto genera en el Appx.xaml no un Style sino un DataTemplate, cortamos todo el Ítem que creamos anteriormente en el ListView y lo pegamos dentro de este DataTemplate creado, adicionalmente al ListView le asignamos la propiedad ItemTemplate, lo pueden hacer directo por código pero si prefieren seleccionan el ListView y en las propiedades (F4) buscan la propiedad ItemTemplate, allí siguen estos pasos:
El resultado es el siguiente:
<ListView x:Name="lvwBlogPosts" Grid.ColumnSpan="2" Grid.Row="1"
Style="{StaticResource Lista-Posts-Style}"
ItemTemplate="{StaticResource Post-List-ItemTemplate}" >
< /ListView><DataTemplate x:Key="Post-List-ItemTemplate">
<StackPanel Orientation="Horizontal">
<Image Style="{StaticResource Image-Post-List}"
Source="ms-appx:///Assets/img/Picture.png"/>
<StackPanel>
<TextBlock TextWrapping="Wrap"
Text="Titulo de Prueba en multiples lineas"
Style="{StaticResource Title-PostList-Style}"/>
<TextBlock TextWrapping="Wrap"
Text="Titulo de Prueba en multiples lineas., Titulo de Prueba en multiples lineas"
Style="{StaticResource Summary-PostList-Style}"/>
< /StackPanel>
< /StackPanel>
< /DataTemplate>Después de este paso ya no se ven los ítems en la vista de diseño, eso es normal no hay de que preocuparse.
Con esto ya tenemos creado el esqueleto de la UI, estos son los archivos completos.
En el próximo artículo enlazaremos la UI creada con el ViewModel.