MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Windows 8 Tips & Tricks. Anadir una sección con los datos de contacto y con la Política de Privacidad (XAML/C#)

Windows 8 Tips & Tricks. Añadir una sección con los datos de contacto y con la Política de Privacidad (XAML/C#)

Como muchos ya saben, unos de los problemas más comunes a la hora de no pasar la certificación de la Store son la falta de una Política de Privacidad o de los datos de contacto. Por ello, vamos a aprender como incluir en el Charm de Settings (su lugar apropiado) una sección con los datos de contacto y otra con la política de privacidad.

Antes de nada, y para cuidar el diseño, tan importante en las aplicaciones de Windows 8, vamos a descargar e instalar la librería Callisto. Callisto nos ofrece diferentes controles que facilitarán todo el diseño de los flyouts necesarios para mostrar estas secciones.

Para ello, desde el propio Visual Studio, vamos a utilizar la herramienta de Extensiones y Actualizaciones (Herramientas > Extensiones y Actualizaciones). Buscamos Callisto y lo descargamos e instalamos:

clip_image002

Tras esto, se nos pedirá reiniciar Visual Studio. Volvemos a abrir el proyecto y agregamos la referencia a esta librería (Click derecho sobre la carpeta “References” > Agregar referencia, y en la izquierda del popup que nos sale seleccionamos Windows > Extensiones). Marcamos Callisto y pulsamos Aceptar.

clip_image004

Para terminar de preparar el uso de la librería, añadimos las siguientes línea al archivo App.xaml.cs. Una hace referencia a la librería instalada, y la otra simplemente nos posibilita usar los colores para personalizar nuestro diseño:

using Callisto.Controls;
using Windows.UI;

Para terminar, solo tienes que seguir el Tips & Tricks de Añadir un enlace a nuestra Política de Privacidad y sustituir el método OnCommandsRequested por lo siguiente:

void OnCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs)
{
// Acerca de (información de contacto)
SettingsCommand about =
new SettingsCommand("About", "Acerca de", (x) =>
{
SettingsFlyout settings = new SettingsFlyout();
settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Narrow;
settings.HeaderText = "Acerca de";
settings.HeaderBrush = new SolidColorBrush(Colors.Purple);
settings.Background = new SolidColorBrush(Colors.White);

settings.Content = new TTsettings.About();
settings.IsOpen = true;
});
eventArgs.Request.ApplicationCommands.Add(about);

// Política de privacidad
SettingsCommand privacyPolicyCommand =
new SettingsCommand("politicaPrivacidad",
"Política de privacidad", (x) =>
{
SettingsFlyout settings = new SettingsFlyout();
settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Narrow;
settings.HeaderText = "Política de privacidad";
settings.HeaderBrush = new SolidColorBrush(Colors.Purple);
settings.Background = new SolidColorBrush(Colors.White);

settings.Content = new TTsettings.PrivacyPolicy();
settings.IsOpen = true;
}
);
eventArgs.Request.ApplicationCommands.Add(privacyPolicyCommand);
}

Cuando hacemos:

SettingsCommand about = new SettingsCommand("About", "Acerca de", (x) =>
{
//...
});

Establecemos que el nombre que mostrará el comando dentro del Charm será, en este caso, Acerca de (el segundo parámetro).

screenshot_10052012_140555

Y, dentro de su controlador cuando hacemos:

settings.HeaderText = "Acerca de";

Simplemente establecemos el título que se mostrará en la cabecera del flyout cuando se abra.

screenshot_10052012_140719

Terminamos estableciendo el contenido de ese flyout, simplemente indicando que es un UserControl creado por nosotros:

settings.Content = new TTsettings.About();

Donde tendrás que reemplazar TTsettings por el nombre del namespace en el que esté incluido el UserControl a usar de contenido y PrivacyPolicy por el nombre que le des a tu UserControl. La anchura del UserControl a utilizar, para que se ajuste perfectamente al tamaño del flyout son 346px si utilizamos el flyout estrecho (settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Narrow; ) y 646px si utilizamos el ancho (settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Wide; ). La altura vendrá determinada por la resolución que se esté utilizando y no debe preocuparte, ya que se añadirá automáticamente una barra de scroll para mostrar todo su contenido en caso de ser necesario.

Para crear un UserControl personalizado, haz click con el botón derecho sobre tu proyecto y elige “Añadir nuevo elemento”. De los distintos elementos que se nos ofrece, selecciona “Control de usuario” y modifica su aspecto al gusto. Un ejemplo del código XAML utilizado en el que mostramos sería este:

<UserControl
x:Class="BasketbApp.SettingsViews.About"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BasketbApp.SettingsViews"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768"
d:DesignWidth="346" Width="346" Height="768">

<StackPanel>
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,45,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" FontSize="20" Text="Version" Foreground="Black" FontWeight="SemiBold"/>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Top" Height="25" Width="260" Text="1.0.0.6" Foreground="LightGray"/>

<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,45,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" FontSize="20" Text="Developed by" Foreground="Black" FontWeight="SemiBold"/>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Top" Height="25" Width="260" Text="Gorka Madariaga" Foreground="LightGray"/>
<TextBlock HorizontalAlignment="Left" Margin="10,-5,0,0" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Top" Height="25" Width="260" Text="All rights reserved" Foreground="LightGray"/>

<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,45,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" FontSize="20" Text="Support e-mail" Foreground="Black" FontWeight="SemiBold"/>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Top" Height="25" Width="260" Text="Please text me with any issue" Foreground="LightGray"/>
<HyperlinkButton Margin="10,-10,0,0" Content="Send e-mail" FontSize="16" Foreground="Purple" NavigateUri="mailto:basketbapp@hotmail.com"/>

<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,45,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" FontSize="20" Text="Twitter" Foreground="Black" FontWeight="SemiBold"/>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Top" Height="25" Width="260" Text="Follow me on" Foreground="LightGray"/>
<HyperlinkButton Margin="10,-10,0,0" Content="@Gk_8" FontSize="16" Foreground="Purple" NavigateUri="http://www.twitter.com/Gk_8"/>
</StackPanel>
</UserControl>

Por último, cabe recordar que tienes que tener tu política de privacidad accesible desde algún sitio web. Con este otro Tip&Trick puedes aprender a alojar tu política de privacidad en un sitio web usando Azure Websites

 

Si tienes alguna duda, recuerda que tienes a tu disposición el foro de desarrollo de aplicaciones para Windows 8 en castellano, donde podrás compartir tus conocimientos con la comunidad de desarrolladores y encontrar ayuda para resolver tus dudas técnicas, y una Introducción al desarrollo de aplicaciones para Windows 8.

También puedes estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

 

Un saludo,

Gorka Madariaga (@Gk_8)