[Windows Phone 8.1] Cambios en controles

Introducción

Con la llegada de nuevo SDK siempre esperamos novedades significativas que nos permitan crear cada vez mejores aplicaciones y otorgar experiencias de usuario más completas. Hasta ahora, en determinadas ocasiones,  podíamos echar de menos algunos controles que cubriesen necesidades básicas. Por ese motivo, en ocasiones hemos analizado controles del Toolkit de Windows Phone, Coding4Fun, Cimbalino, MyToolkit y otras herramientas para suplir ciertas carencias.

Con la llegada de este nuevo SDK muchos de estos aspectos se cubren perfectamente además de conseguir controles comunes con la plataforma Windows lo que nos permite compartir una mayor cantidad de código también en XAML.

¿Te apuntas a descubrir todas las novedades disponibles en controles?

Que hemos dejado atrás

Hay cambios importantes en controles muy básicos usados practicamente en cualquier aplicación Windows Phone. Por este motivo, vamos a comenzar hablando de los controles que "hemos dejado atrás".

Hasta siempre Panorama, bienvenido Hub

Comenzamos hablando del Panorama. Control usado como eje básico de muchas aplicaciones. Permite mostrar una gran cantidad de información más alla de los límites de la pantalla a la que accedemos realizando scroll horizontal.

Pues... es nuestra primera pérdida. Pero, tranquilos!, no, no perdemos ni se modifica dráticamente la experiencia de usuario otorgada por el control Panorama ya que ha sido sustituido por el control Hub.

<Hub Header="Header">
    <HubSection Header="Sub header 1">
        <DataTemplate>
            <Grid />
        </DataTemplate>
    </HubSection>
    <HubSection Header="Sub header 2">
        <DataTemplate>
            <Grid />
        </DataTemplate>
    </HubSection>
</Hub>

 WebBrowser pasa a ser WebView

Para aquellos que trabajasen con el control WebBrowser en Windows Phone, la llegada del WebView no será un simple "cambio de nombre". El control WebView llega cargado de grandes cambios que permiten el trabajo con contenido HTML de forma mucho más trasparente y sencilla.

<WebView />

Ahora en lugar del LongListSelector usamos el SemanticZoom

El control LongListSelector era un control listado  avanzado que puede mostrar dos listas, una  plana y otra agrupada. Ayuda a los usuarios a navegar a través de largas listas, le permite saltar entre las diferentes secciones de la lista mediante una rejilla que se superpone a la lista cuando el usuario selecciona uno de los encabezados.

Ahora en su lugar usaremos el control SemanticZoom ya existente en aplicaciones Windows Store previamente. El control SemanticZoom a pesar de no ser un control listado es mucho más potente. Cuenta con dos estados ZoomedInView y ZoomedOutView. De esta forma podemos permitir cambiar entre las dos vistas de manera sencilla incluyendo un control lista en la vista ZoomedIn y un GridView en la vista ZoomedOut.

RickTextBox es ahora RichTextBlock

Este control nos permite texto con formato: imágenes en líneas, enlaces y otro tipo de contenido enriquecido.

<RichTextBlock>
    <Paragraph>
        <Bold>Interesante<Bold> control
    </Paragraph>
</RichTextBlock>

Adios MultiScaleImage

Este control ha quedado atrás sin sustituto directo. Permitía utilizar imágenes con múltiples resoluciones y realizar diferentes gestos. Sin embargo, podemos utilizar en su lugar el control Image por defecto.

<MultiScaleImage Source="source/source.xml" />

NOTA: Si actualizamos una aplicación existente a Silverlight 8.1 el control seguirá estando disponible.

CommandBar

El control CommandBar esta compartido entre Windows y Windows Phone. Nos permite crear application bars con facilidad.

<Page.BottomAppBar>
        <CommandBar x:Name="commandBar">
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="edit" Icon="Edit" />
                <AppBarButton Label="favorite" Icon="Favorite" />
                <AppBarSeparator />
                <AppBarToggleButton Label="play" Icon="Play" />
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="help" Icon="Question" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
</Page.BottomAppBar>



NOTA: En Windows Phone sustituye al control ApplicationBar. En Windows existe también el control AppBar, la diferencia recae en el tipo de contenido que puede albergar, el CommandBar solo puede contener controles ICommandBarElement.

Que hay de nuevo

Una gran cantidad de controles estan disponibles en Windows 8.1 y Windows Phone 8.1 pero no es asi con todos. A continuación, vamos a ver una introducción a controles nuevos disponibles en Windows Phone 8.1:

PickerFlyout

Flyout con una propiedad llamada ConfirmationButtonsVisible que nos permite mostrar los botones aceptar/cancelar en la parte inferior del flyout.

var pickerFlyout = new PickerFlyout();
var textBlock = new TextBlock { Text = "flyout textblock", FontSize = 24 };
pickerFlyout.Content = textBlock ;
pickerFlyout.ConfirmationButtonsVisible = true;
await pickerFlyout.ShowAtAsync(targetFrameWorkElement);

DatePickerFlyout

Podemos mostrar un flyout que permite seleccionar fechas:

var datePickerFlyout = new DatePickerFlyout();
await datePickerFlyout.ShowAtAsync(targetFrameWorkElement);

TimePickerFlyout

Control muy similar al DatePickerFlyout permitiendo seleccionar horas en lugar de fechas.

var timePickerFlyout = new TimePickerFlyout();
await timePickerFlyout.ShowAtAsync(targetFrameWorkElement);

ListPickerFlyout

Flyout que muestra un listado indicado por la propiedad ItemsSource.

var listPickerFlyout = new ListPickerFlyout();
listPickerFlyout.ItemsSource = source;
await listPickerFlyout.ShowAtAsync(targetFrameWorkElement);

AutoSuggestBox

Control totalmente nuevo exclusivo de Windows Phone 8.1 (en Windows podemos conseguir lo mismo de otras formas).  Muestra una caja de texto de modo que segun el usuario va escribiendo, va recibiendo sugerencias. Las sugerencias las podemos indicar gracias a la propiedad ItemsSource:

<AutoSuggestBox TextChanged="AutoSuggestBox_TextChanged"
    ItemsSource="{Binding Suggestions}">
    <AutoSuggestBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender,
        AutoSuggestBoxTextChangedEventArgs args)
{
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        Suggestions.Clear();
        Suggestions.Add(sender.Text + "1");
        Suggestions.Add(sender.Text + "2");
        Suggestions.Add(sender.Text + "3");
        Suggestions.Add(sender.Text + "4");
        Suggestions.Add(sender.Text + "5");
    }
}

A su vez, tenemos eventos para determinar cada vez que el usuario escribe para poder cambiar las sugerencias dinámicamente.

ContentDialog

Control que nos permite crear mensajes popups personalizados.

private async void ShowContentDialog()
{
    ContentDialog dialog = new ContentDialog()
    {
        Title = "Download updates?",
        Content = "This update will clean the slate for Iron Man",
        PrimaryButtonText = "Yes, clean it",
        SecondaryButtonText = "No, Dont!"
    };
    dialog.SecondaryButtonClick += dialog_SecondaryButtonClick;

    ContentDialogResult result = await dialog.ShowAsync();
    if (result == ContentDialogResult.Primary) { /* do some more Primary logic */ }
    else if (result == ContentDialogResult.Secondary) { /* else do Secondary logic */ }
}

Podemos mostrar el popup en modo a pantalla completa o de forma parcial.

Controles compartidos con Windows

Tenemos un gran listado de controles que son exactamente iguales (en funcionalidad, comportamiento, nombres, namespaces, etc.) tanto en Windows 8.1 como en Windows Phone 8.1. Esto nos facilita enormemente la tarea de compartir código entre ambas plataformas.

De los controles vistos previamente, algunos de ellos, cumplen esta característica:

  • Hub
  • SemanticZoom
  • WebView

Además de los ya nombrados tenemos otros nuevos o que ya existían para crear aplicaciones Windows Store y llegan por primera vez a la plataforma Windows Phone.

DatePicker

No podía continuar por otro control. Cumple unas necesidades básicas que hasta ahora teníamos que cubrir con el Toolkit de Windows Phone u otras herramientas. Por fin llega a Windows Phone un control para introducir fechas de manera fácil e intuitiva de la misma forma que lo hacíamos hasta ahora usando el Toolkit por ejemplo, pero de forma directa con el SDK.

<DatePicker/>

Además llega localizado entre otra serie de características que nos facilitan mucho su uso.

TimePicker

Al igual que el anterior, este control también era muy esperado. Control usado para insertar horas en nuestras aplicaciones.

<TimePicker/>

Frame

En las aplicaciones de la plataforma Windows, usamos un objeto de tipo Frame que contendrá cada una de las páginas que componen la aplicación permitiendo la navegación entre ellas. Hasta ahora, el control Frame de Windows Phone y Windows eran diferentes. Ya son iguales. Esto permite utilizar el mismo sistema de navegación en ambas plataformas. Contiene comandos para regresar hacia atrás o navegar a otras páginas.

ProgressRing

Control que ya teníamos en aplicaciones Windows Store pero no en Windows Phone donde contábamos con el control ProgressIndicator. Este control muestra un progreso con una serie de puntos que giran formando un círculo.

<ProgressRing IsActive="True"/>

ListView

Control ya habitual en aplicaciones Windows Store que ahora es común a ambas plataformas. El control ListView es una lista vertical que hereda del control ListBox siendo más flexible permitiendo el uso del SemanticZoom asi como el uso de columnas, diferentes vistas, etc.

<ListView ItemsSource="{Binding Items}" />

También el control GridView

Uno de los controles principales desde la llegada de Windows 8 ahora es común a ambas plataformas. El control GridView un listado con scroll horizontal (por defecto) que funciona y permite unas opciones similares al ListView.

<GridView ItemsSource="{Binding Items}" />

ToggleSwitch

En Windows Phone teníamos el control CheckBox al que podíamos lograr asignarle un aspecto visual similar al control ToggleSwitch disponible en aplicaciones Windows Store. Además, podíamos utilizar librerías de terceros para conseguir el resultado. Ya no será necesario realizar ninguna de las dos tareas ya que tenemos incluido el control en el SDK de manera compartida entre plataformas.

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
              OnContent="On" OffContent="Off"
              Toggled="ToggleSwitch_Toggled"/>

NOTA: Utiliza el color Accent del teléfono para resaltar el Switch al estar activado.


Flyout

Con este control podemos crear nuestros flyouts totalmente personalizados. Puede contener cualquier tipo de control que necesitemos.

<Flyout>
    <StackPanel>
        <TextBlock>Flyout</TextBlock>
        <Button>Clic</Button>
    </StackPanel>
</Flyout>

En Windows Phone se posiciona en la parte superior de la pantalla mientras que en Windows se posicionará en la parte superior del control target.

MenuFlyout

Es el nuevo context menu. Muy similar al control anterior con la diferencia básica recayendo en el contenido. El control MenuFlyout solo puede contener MenyFlyoutItem, ToggleMenuFlyout y MenuFlyoutSeparator.

<Page.BottomAppBar>
  <CommandBar>
    <AppBarButton Icon="Camera" Label="brag">
      <AppBarButton.Flyout>
        <MenuFlyout>
          <MenuFlyoutItem Text="Photo" />
          <MenuFlyoutItem Text="Video" />
        </MenuFlyout>
      </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton Icon="Pin" Label="Like"/>
  </CommandBar>
</Page.BottomAppBar>

WrapGrid

Panel que posiciona los elementos secuencialmente de izquierda a derecha o de arriba a abajo. Cuando un elemento excede el tamaño del panel, se posiciona en la siguiente fila o columna.

<ListView.ItemsPanel>
     <ItemsPanelTemplate>
          <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
     </ItemsPanelTemplate>
</ListView.ItemsPanel>

NOTA: Se utiliza para cambiar la forma de posicionamiento en un control ItemsControl.

VariableSizedWrapGrid

Panel que permite organizar a sus elementos en filas y columnas. Cada elemento puede ocupar más de una fila y/o columna.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80"
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80"
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80"
               VariableSizedWrapGrid.RowSpan="2"
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

NOTA: VariableSizedWrapGrid no usa virtualización, puede impactar en el rendimiento.


Más información

Published 19/5/2014 21:20 por jsuarezruiz
Archivado en:
Comparte este post: