Nueva versión del Windows Phone Toolkit
El Windows Phone Toolkit es un paquete de controles totalmente gratuito disponible tanto en Codeplex como utilizando Nuget. Tenemos disponible una nueva versión (Windows Phone Toolkit – September 2012 Release) que cuenta con interesantes novedades:
- Nuevos Controles:
CustomMessageBox. Nuevo control que nos permite mostrar mensajes emergentes similares a los que podemos utilizar directamente con el SDK de Windows Phone pero altamente personalizable:
CustomMessageBox
Rating Control. Nuevo control que nos permite mostrar visualmente un control para realizar puntuaciones de manera visual:
RatingControl
- Nueva funcionalidad:
Se han añadido nuevos efectos de transición (SlideInEffect y FeatherTransition).
- Corrección de bugs:
Se han corregido un alto número de los bugs más votados por los usuarios.
En la entrada actual vamos a centrarnos en analizar las posibilidades de uno de los nuevos controles disponibles, el CustomMessageBox.
Control CustomMessageBox
El control CustomMessageBox es un nuevo control disponible en el Windows Phone Toolkit que nos permite mostrar mensajes emergentes con muchas posibilidades de personalización. Entre las características más destacadas:
- Aspecto visual similar al MessageBox disponible en el SDK (animaciones, posición, fuentes, etc.).
- Podemos mostrar el mensaje emergente al tamaño requerido o a pantalla completa.
- Posibilidad de personalizar los botones de acción.
- Posibilidad de añadir contenido (controles) complejos. Por ejemplo, podemos incluso añadir un Pivot dentro del mensaje emergente.
Vamos a crear una aplicación de ejemplo donde utilizaremos el control e iremos viendo sus posibilidades.
En este ejemplo para simplificar al máximo el proceso y lograr concentrar toda la atención en el control CustomMessageBox vamos a seleccionar un proyecto de tipo Windows Phone Application.
Antes de continuar lo primero que debemos hacer es obtener la última versión del Windows Phone Toolkit. Tenemos disponible el paquete en NuGet. Abrimos el «Package Manager Console» para ello:
NuGet Package Manager Console
Una abierta la consola:
NuGet Console
Escribimos:
Install-Package SilverlightToolkitWP
Tras instalar el paquete tendremos la referencia Microsoft.Phone.Controls.Toolkit.dll añadida a nuestro proyecto.
Nos centramos en crear la interfaz de nuestro ejemplo (MainPage.xaml). Para trabajar en nuestro XAML con las opciones del Toolkit debemos añadir el siguiente XML namespace:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Vamos a añadir dos botones y un CheckBox:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Margin="0,0,12,0" toolkit:TiltEffect.IsTiltEnabled="True">
<Button Content="Primeros pasos con CustomMessageBox"/>
<Button Content="CustomMessageBox complejo"/>
<CheckBox x:Name="FullScreenCheckBox" Content="Pantalla Completa" Margin="0,12,0,0"/>
</StackPanel>
</Grid>
Fácil. El primero de los botones lo utilizaremos para utilizar de la forma más básica posible el control CustomMessageBox. Con el segundo utilizaremos opciones más avanzadas del control. El ChechBox sencillamente lo utilizaremos para elegir si mostrar a pantalla completa el CustomMessageBox.
Añadimos los eventos Click de los botones:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Margin="0,0,12,0" toolkit:TiltEffect.IsTiltEnabled="True">
<Button Content="Primeros pasos con CustomMessageBox" Click="BasicMessageBox_Click"/>
<Button Content="CustomMessageBox complejo" Click="AdvancedMessageBox_Click"/>
<CheckBox x:Name="FullScreenCheckBox" Content="Pantalla Completa" Margin="0,12,0,0"/>
</StackPanel>
</Grid>
private void BasicMessageBox_Click(object sender, RoutedEventArgs e)
{
}
private void AdvancedMessageBox_Click(object sender, RoutedEventArgs e)
{
}
Nos centramos en el primer botón:
private void BasicMessageBox_Click(object sender, RoutedEventArgs e)
{
CustomMessageBox messageBox = new CustomMessageBox()
{
Caption = "Pregunta?",
Message = "Mensaje del CustomMessageBox.",
LeftButtonContent = "Si",
RightButtonContent = "No",
IsFullScreen = (bool)FullScreenCheckBox.IsChecked
};
messageBox.Dismissed += (s1, e1) =>
{
switch (e1.Result)
{
case CustomMessageBoxResult.LeftButton:
// Acción.
break;
case CustomMessageBoxResult.RightButton:
// Acción.
break;
case CustomMessageBoxResult.None:
// Acción.
break;
default:
break;
}
};
messageBox.Show();
}
Como podemos ver en lo realizado en el primer botón, el uso del control es muy similar al del MessageBox. Para definir el control, las propiedades principales utilizadas son:
- Caption – Título del mensaje.
- Message – Mensaje.
- LeftButtonContent, RightButtonContent – Botones utilizados en el mensaje emergente.
- IsFullScreen. Indica si el mensaje emergente se muestra a pantalla completa o no.
Para mostrar el mensaje emergente utilizamos el método Show() (al igual que hacemos con el MessageBox estándar).
Previamente, nos subscribimos al evento Dismissed que se lanzará cuando se quite el mensaje. Utilizaremos el valor e.Result de tipo CustomMessageBoxResult para determinar que acción (botón) ha realizado el usuario.
Por defecto, el mensaje solo ocupa el tamaño necesario. Podemos utilizar la propiedad IsFullScreen que le asignamos el valor del CheckBox para determinar si el mensaje se muestra a Pantalla completa o no.
Continuamos con el segundo botón:
private void AdvancedMessageBox_Click(object sender, RoutedEventArgs e)
{
HyperlinkButton hyperlinkButton = new HyperlinkButton()
{
Content = "Más información.",
HorizontalAlignment = HorizontalAlignment.Left,
NavigateUri = new Uri("https://javiersuarezruiz.wordpress.com/", UriKind.Absolute)
};
TiltEffect.SetIsTiltEnabled(hyperlinkButton, true);
ListPicker listPicker = new ListPicker()
{
Header = "Recordar en:",
ItemsSource = new string[] { "5 minutos", "10 minutos", "15 minutos" }
};
StackPanel stackPanel = new StackPanel();
stackPanel.Children.Add(hyperlinkButton);
stackPanel.Children.Add(listPicker);
CustomMessageBox messageBox = new CustomMessageBox()
{
Title = "Recordatorio",
Caption = "Programar Windows Phone",
Message = "Realizar ejemplo del control CustomMessageBox",
Content = stackPanel,
LeftButtonContent = "Aceptar",
RightButtonContent = "Cancelar",
IsFullScreen = (bool)FullScreenCheckBox.IsChecked
};
messageBox.Dismissing += (s1, e1) =>
{
if (listPicker.ListPickerMode == ListPickerMode.Expanded)
{
e1.Cancel = true;
}
};
messageBox.Dismissed += (s2, e2) =>
{
switch (e2.Result)
{
case CustomMessageBoxResult.LeftButton:
// Acción.
break;
case CustomMessageBoxResult.RightButton:
case CustomMessageBoxResult.None:
// Acción.
break;
default:
break;
}
};
messageBox.Show();
}
A continuación hablamos de la propiedad más interesante del control. La propiedad Content la podemos utilizar la insertar nuestro propio contenido. Podemos insertar contenido (controles) por código como hemos realizado en el ejemplo y también utilizando recursos en XAML. En nuestro ejemplo, hemos insertado un Grid que contiene un control HyperLinkButton y un ListPicker (control también incluido dentro del Windows Phone Toolkit).
NOTA: Si deseamos definir el contenido del CustomMessageBox vía XAML debemos crear un DataTemplate en los recursos de la aplicación o de una página y utilizar la propiedad ContentTemplate del control para asignar el DataTemplate correspondiente.
Ejemplo CustomMessageBox
Primeros pasos con CustomMessageBox
Primeros pasos con CustomMessageBox a Pantalla Completa
CustomMessageBox complejo
CustomMessageBox complejo Pantalla Completa
Puedes ver de un vistazo todo el ejemplo realizado en video a continuación:
También puedes descargar el ejemplo realizado:
Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios.
Javier Suárez | Blog 