Controles comunes en aplicaciones Metro

Desde hace un par de días estoy iniciándome en el desarrollo de aplicaciones Metro para Windows 8. Una vez instalado Windows 8 Release Preview y el Visual Studio 2012 RC tenemos todo lo necesario para comenzar con el desarrollo de este tipo de aplicaciones.

Una vez arrancado el Visual Studio seleccionaremos la plantilla Windows Metro Style en el lenguaje que más nos guste tal y como se muestra en la imagen

Tras esto se nos creará un proyecto de éste tipo con el siguiente aspecto

En este primer artículo voy a hablar un poco de los controles que tenemos a nuestra disposición para desarrollar para Metro ya que la lista puede agobiar un poco al principio, o al menos esa fue mi primera impresión ya que siempre he trabajado para aplicaciones web o como mucho alguna aplicación de escritorio de tipo WinForms y nunca he hecho nada serio para WPF o Silverlight.

Controles más comunes

• Border: Dibuja un borde, un fondo o ambos alrededor de un objeto.

<Border BorderBrush="Black" BorderThickness="1" 
        Height="120" Width="60">
    <StackPanel>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>

• Button: Representa un control de tipo botón que interpreta un click del usuario.

<Button .../>
-or-
<Button>
    singleObject
</Button>
-or-
<Button ...>stringContent</Button>

• CheckBox: Representa un control que el usuario puede marcar (check) o desmarcar (uncheck). Este control también puede tener un valor indeterminado.

<CheckBox .../>
-or-
<CheckBox>
  singleObject
</CheckBox>
-or-
<CheckBox>stringContent</CheckBox>

• ComboBox: Control de selección que combina un textbox no editable y un drop-down list que permite al usuario seleccionar un elemento de una lista.

<ComboBox x:Name="ComboColores" Height="20" Width="150" ItemsSource="{Binding}" />

ObservableCollection<string> colores = new ObservableCollection<string>();
colores.Add("Rojo");
colores.Add("Verde");
colores.Add("Azul");
     
ComboColores.DataContext = colores;

• FlipView: Representa un control para mostrar elementos, pero que muestra un elemento cada vez, y tiene un comportamiento de "flip" cuando se pasa de uno a otro.

Control FlipView usado para mostrar una galería de imágenes

• Grid: Define un área flexible organizada en filas y columnas. Los elementos hijos son organizados en base a la cantidad de filas y columnas definidas.
• GridView: Muestra un Grid horizontal de elementos de datos.

Metro GridView

• Image: Control que muestra una imagen. La imagen puede estar en varios formatos (Joint Photographic Experts Group [JPEG], Portable Network Graphics [PNG], Bitmap [BMP], Graphics Interchange Format [GIF], Tagged Image File Format [TIFF], JPEG XR, icons [ICO]).
• ListView: Muestra una lista de elementos de manera vertical.

Metro ListView

• RadioButton: Le permite al usuario seleccionar una opción de un grupo de opciones.
• StackPanel: Organiza una lista de elementos hijo en una única fila que puede ser orientada de manera vertical u horizontal.

<StackPanel x:Name="MyStackPanel">
  <TextBlock x:Name="TextFirstName" Text="Nombre" Width="75" HorizontalAlignment="Left"/>
  <TextBlock x:Name="TextLastName" Text="Apellidos" Width="75" HorizontalAlignment="Left"/>
  <TextBlock x:Name="TextAddress" Text="Dirección" Width="150" HorizontalAlignment="Left"/>
</StackPanel>

• TextBlock: Control que nos ayuda a mostrar una pequeña cantidad de texto.

<TextBlock ...>text</TextBlock>
-or-
<TextBlock>
  oneOrMoreInlineElements
</TextBlock>
-or-
<TextBlock .../>

Otros controles que nos pueden ser útiles

• AppBar: Representa un control contenedor que contiene los componentes de interfaz de usuario para ejecutar acciones.

Metro AppBar

• Canvas: Define un área en la que pueden colocarse explícitamente objetos, usando coordenadas que son relativas al "Canvas".

<Canvas Width="640" Height="480" >
    <Rectangle Canvas.Left="30" Canvas.Top="30" 
       Fill="Red" Width="200" Height="200" />
</Canvas>

• Frame: Representa un control de contenido que soporta la navegación.
• MediaElement: Representa un objeto que contiene audio, vídeo o ambos.

<MediaElement Source="Media/video1.mp4" AutoPlay="True" />

• SemanticZoom: Representa un control con scroll que contiene dos vistas que tienen una relación semántica.

<SemanticZoom ...>
  <SemanticZoom.ZoomedOutView>
    zoomedOutViewContent
  </SemanticZoom.ZoomedOutView>
  <SemanticZoom.ZoomedInView>
    zoomedInViewContent
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

Metro SemanticZoom

Metro SemanticZoom

• Slider: Representa un control que permite al usuario seleccionar un valor dentro de un rango.

Metro Slider

Con esto acabamos la introducción a los controles que tenemos a nuestra disposición en la aplicaciones Metro. En los próximos artículos iremos viendo como utilizarlos dentro de nuestras aplicaciones.


Happy coding!