Windows Phone. Control AboutPrompt

En esta entrada vamos a analizar todas las posibilidades que podemos encontrar en el control AboutPrompt. El control AboutPrompt forma parte del conjunto de controles ofrecidos por el Condin4Fun Toolkit del que hablamos en esta entrada.

El control es un Popup (deriva de la clase abstracta PopUp<T, TPopUpResult>) especialmente pensado para mostrar información relacionada con la aplicación que estamos desarrollando o de nosotros mismos como desarrollador/es.

Como hemos mencionado el control esta especialmente pensado para mostrar información relacionada con la aplicación (la versión por ejemplo) o con el responsable de la misma (email de contacto por ejemplo). Las propiedades fundamentales que nos permiten definir dicha información son:

  • WaterMark. Propiedad de dependencia de tipo object. Se utiliza para indicar normalmente el texto (marca de agua) que puedes ver en la captura anterior en la parte superior izquierda del AboutPrompt.
  • Title. Espera una cadena (propiedad de dependencia de tipo string). Se utiliza para indicar el título del AboutPrompt.
  • Body. Propiedad de dependencia de tipo object. Es el cuerpo del control.
  • Footer. Propiedad de dependencia de tipo object. Es el texto que aparece en el pie del control.
  • VersionNumber. Espera una cadena (propiedad de dependencia de tipo string). Se utiliza (normalmente) para indicar la versión de la aplicación. Aparece en la parte inferior derecha.

Vamos a realizar un ejemplo práctico. Creamos un nuevo proyecto:

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Agregamos dentro del Grid principal de la página MainPage.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
         <Button x:Name="btnSencillo" Content="Ejemplo más sencillo"/>
         <Button x:Name="btnPropiedades" Content="Utilizando todas las propiedades"/>
         <Button x:Name="btnPersonItem" Content="Utilizando AboutPersonItem"/>
         <Button x:Name="btnUserControl" Content="Utilizando un UserControl"/>
     </StackPanel>
</Grid>

El resultado es el siguiente:

Vamos a añadir el manejador del evento Click de cada uno de los botones:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnSencillo" Content="Ejemplo más sencillo" Click="btnSencillo_Click"/>
          <Button x:Name="btnPropiedades" Content="Utilizando todas las propiedades" Click="btnPropiedades_Click"/>
          <Button x:Name="btnPersonItem" Content="Utilizando AboutPersonItem" Click="btnPersonItem_Click"/>
         <Button x:Name="btnUserControl" Content="Utilizando un UserControl" Click="btnUserControl_Click"/>
     </StackPanel>
</Grid>

Lo primero que debemos hacer es agregar la referencia a la librería Coding4Fun.Phone.Controls.dll. Debemos añadir el siguiente espacio de nombres (MainPage.xaml.cs):

using Coding4Fun.Phone.Controls;

A continuación, vamos a ir analizando que se hace en cada uno de los botones. Empezaremos por el primero de ellos (la opción más simple):

private void btnSencillo_Click(object sender, RoutedEventArgs e)
{
     AboutPrompt acercaDe = new AboutPrompt();
     acercaDe.Show();
}

El resultado tras pulsar el botón es:

Hemos creado una instancia de AboutPrompt. Sin utilizar ninguna de las propiedades básicas del AboutPrompt hemos llamado al evento Show(). El evento Show muestra en pantalla utilizando una pequeña animación (puedes verla en el video que tienes disponible más abajo en la entrada) el control. Tenemos tres sobre escrituras del evento Show:

  • Show()
  • Show(string authorName, string twitterName = null, string emailAddress = null, string websiteUrl = null)
  • Show(params AboutPersonItem[] people)

A continuación, vamos a ver que hacemos en el evento del segundo botón donde utilizaremos las propiedades básicas ya vistas del AboutPrompt.

private void btnPropiedades_Click(object sender, RoutedEventArgs e)
{
     AboutPrompt acercaDe = new AboutPrompt();
     acercaDe.WaterMark = "Aparece en la parte superior";
     acercaDe.Title = "Ejemplo AboutPrompt";
     acercaDe.Body = "Esto es el mensaje del cuerpo.";
     acercaDe.Footer = "https://javiersuarezruiz.wordpress.com";
     acercaDe.VersionNumber = "Version 1.0";

     acercaDe.Show();
}

Puedes ver la finalidad y posición de cada una de las propiedades en la siguiente captura:

Vamos a analizar el uso del pequeño control AboutPersonItem. Este control representa la información básica que define al desarrollador o a los desarrolladores. AboutPersonItem cuenta con las siguientes propiedades:

  • WebSiteUrl. Propiedad de dependencia de tipo String. Página web correspondiente al producto o al desarrollador.
  • Role. Propiedad de dependencia de tipo String. Rol del autor.
  • EmailAddress. Propiedad de dependencia de tipo String. Correo electrónico de contacto.
  • AuthorName. Propiedad de dependencia de tipo String. Representa el nombre del autor.
private void btnPersonItem_Click(object sender, RoutedEventArgs e)
{
     AboutPrompt acercaDe = new AboutPrompt();
     acercaDe.Title = "Ejemplo AboutPersonItem";

     AboutPersonItem item = new AboutPersonItem();
     item.Role = "Autor:";
     item.AuthorName = "Javier Suárez Ruiz";
     item.WebSiteUrl = @"https://javiersuarezruiz.wordpress.com";

     acercaDe.Show(item);
}

Resaltar que en este caso hemos utilizado la sobre escritura Show(params AboutPersonItem[] people) del evento Show. El resultado:

Por último, vamos a centrarnos en el caso más complejo. ¿Que pasa si el control AboutPrompt no nos permite mostrar toda la información que necesitamos o  al menos no de la forma deseada?. Podemos personalizar el contenido del Body definiendo el contenido en XAML.

¿Como?

Debemos añadir al proyecto un nuevo elemento que en este caso será un UserControl (en el ejemplo que puedes descargar al final de la entrada se ha llamado al UserControl “AboutPromptUserControl”). Veamos un ejemplo:

<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" >
     <StackPanel Background="Orange" Margin="20,5">
          <TextBlock Text="Ejemplo del Body de un AboutPrompt personalizado."
                     Style="{StaticResource PhoneTextNormalStyle}"
                     TextWrapping="Wrap"
                     Margin="5"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Top" />
     </StackPanel>
     <Image x:Name="image" Source="IMGS/WP7.jpg" Height="160" Width="160" HorizontalAlignment="Center">
          <Image.RenderTransform>
              <CompositeTransform/>
          </Image.RenderTransform>
     </Image>
</StackPanel>

Nota: Para conseguir el contenido del UserControl anterior hemos añadido al proyecto una carpeta llamada “IMGS”. Dentro de dicha carpeta hemos añadido la siguiente imágen:

Para utilizar lo definido en el UserControl anterior haremos lo siguiente:

private void btnUserControl_Click(object sender, RoutedEventArgs e)
{
     AboutPrompt acercaDe = new AboutPrompt();
     acercaDe.Title = "Utilizando un UserControl";
     acercaDe.Body = new AboutPromptUserControl();

     acercaDe.Show();
}

Consiguiendo el siguiente resultado:

¿Interesante?. Espero que si.

Puedes ver en video el resultado de nuestro ejemplo a continuación:

También puedes descargar el ejemplo realizado:

Hemos visto en esta entrada todos los usos básicos posibles del control AboutPrompt. Espero que os resulte de utilidad. Recordar que cualquier tipo de duda o sugerencia podéis dejarla en los comentarios de la entrada.

Más Información:

Codeplex. Documentación AboutPrompt.

3 pensamientos en “Windows Phone. Control AboutPrompt

  1. Hola

    Me llamo José y soy el administrador de otro sitio web dedicado a tecnologías Android y Windows Phone… y quería felicitarte por tu blog.

    Sencillamente está genial, tanto en calidad como por la selección de contenidos. Sigue así.

    Un saludo.

    JMSobrinos

    • Hola José!
      Antes que nada agradecerte muchísimo la felicitación. Me alegro que te guste el blog y espero que te parezca útil. Intentaré continuar y seguir mejorando. Cualquier crítica o sugerencia será siempre bienvenida.
      Déjame a mi también fecilitarte por tu blog:

      http://libreyextremo.blogspot.com.es

      Donde realizas también un gran trabajo desde hace tiempo.

      Un saludo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s