Una de las tareas que a veces nos quitan mucho tiempo al desarrollar para Windows 8 es la creación de las ventanas o páginas de Configuración conocidas como los Charms en Windows 8.
Hoy les voy a hablar de como crearlas de una manera sencilla a través de una librería fácil de instalar y fácil de utilizar utilizando Nuget.
Vamos a realizar esto con un proyecto en blanco de Windows8:
Un proyecto en blanco ya que solo vamos a crear la funcionalidad de los Charms.
Lo siguiente que vamos a realizar en nuestro proyecto es adicionar la referencia al proyecto a través de NuGet, para hacer nuestro trabajo muchísimo mas sencillo.
Damos clic derecho sobre la carpeta de Referencias de nuestro proyecto y seleccionamos la opción ManageNuGet packages como aparece en la imagen anterior.
Esto nos va a abrir la ventana de los paquetes que tenemos a nuestra disposición, algo como lo siguiente:
Ahora en la caja de texto de búsqueda vamos a ubicar nuestra librería: CharmFlyout:
Damos clic en el botón de Install para instalar la librería en nuestro proyecto, al terminar la instalación nos debe aparecer de la siguiente manera:
Cerramos esta ventana con el botón close de la parte inferior de esta ventana e iniciamos a crear nuestras ventanas de Charms, las cuales realizaremos a través de un control de usuario.
Este control de usuario va a servirnos para mostrarnos nuestros diferentes Charms que aplican a nuestra Aplicación.
Para hacerlo, damos clic derecho sobre el nombre del proyecto, en el menú buscamos la opción Add, y en este nuevo menú ubicamos la opción de New Item…
Nos abre la pantalla anterior y de la lista seleccionamos User Control, o control de usuario que es lo que necesitamos para mostrar y ubicar nuestros charms en la pantalla de settings de Windows 8.
Le damos un nombre al control, en nuestro caso lo nombre como ucFlyouts, y me muestra la pantalla de diseño y de código XAML para definirlo.
Ahora iniciemos a colocar y desarrollar nuestro control utilizando la librería de CharmFlyouts que agregamos inicialmente al proyecto.
Lo primero es agregar el espacio de nombres a la cabecera del control de usuario, esto lo hacemos agregando
1: xmlns:cfl="using:CharmFlyoutLibrary"
Con lo anterior la cabecera completa del control de usuario quedaría de la siguiente manera:
1: <UserControl2: x:Class="Celeste.Charms.ucFlyouts"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: xmlns:local="using:Celeste.Charms"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: xmlns:cfl="using:CharmFlyoutLibrary"
9: mc:Ignorable="d"
10: d:DesignHeight="300"
11: d:DesignWidth="400">
12: 13: <Grid> 14: 15: </Grid> 16: </UserControl>Ahora dentro del control Grid, vamos a crear nuestros Charms, sí, varios, podemos crear en este control de usuario los charms que necesitemos, esto lo vamos a hacer utilizando el tag:
1: <cf1:CharmFlyout>...</cf1:CharmFlyout>Vamos a definir en nuestro ejemplo dos Flyouts, uno con la politica de privacidad de nuestra aplicación y otro para capturar la url de nuestro servicio de datos para la aplicación.
1: <cfl:CharmFlyout2: x:Name="cflPolicy"
3: Heading="Politica de Privacidad "
4: HeadingBackgroundBrush="DarkCyan"
5: ContentBackgroundBrush="{StaticResource ApplicationPageBackgroundThemeBrush}">
6: <StackPanel>7: <TextBlock FontSize="18" TextWrapping="Wrap" Padding="0,0,0,7">
8: Esta aplicación hace uso de la conexión a internet, única y 9: exclusivamente, para descargar información relativa de la misma 10: desde nuestros servidores. Ninguna información de la máquina o 11: del usuario es enviada de vuelta a ellos ni a ningún otro servidor 12: a través de internet ni de ningún otro medio por parte de esta 13: aplicación. 14: </TextBlock>15: <HyperlinkButton Click="GotoPolitic" FontSize="14">
16: Ver politica en la web 17: </HyperlinkButton> 18: </StackPanel> 19: </cfl:CharmFlyout>En este Flyout se puede observar que tenemos propiedades como Name y como Heading lo cual facilita nuestro desarrollo pues ya viene dentro del control, ademas como se puede observar podemos colocarle un color de backgroud para la cabecera del Flyout, en este caso la he colocado DarkCyan.
El control es un StackPanel dentro del cual coloque un TextBlock con el texto de la política de privacidad a mostrar, y un HyperLink el cual va a abrir el explorador de internet y mostrará la misma política publicada en la web.
1: <cfl:CharmFlyout2: x:Name="cflConfServicio"
3: Heading="Conexion Servicio Datos"
4: HeadingBackgroundBrush="DarkCyan"
5: ContentBackgroundBrush="{StaticResource ApplicationPageBackgroundThemeBrush}">
6: <Grid > 7: <Grid.RowDefinitions>8: <RowDefinition Height="Auto" />
9: <RowDefinition /> 10: </Grid.RowDefinitions> 11: 12: <!-- la Cabecera de la ventana de Settings -->13: <Border Grid.Row="0" >
14: <Grid Margin="1,0,0,0">
15: <Grid.ColumnDefinitions>16: <ColumnDefinition Width="Auto" />
17: <ColumnDefinition />18: <ColumnDefinition Width="Auto" />
19: </Grid.ColumnDefinitions> 20: 21: <!--<Button Grid.Column="0" />-->
22: <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="Configuración App"
23: FontSize="20" Foreground="White" />
24: <Image Grid.Column="2" Source="/Assets/Logo.png" Width="50" />
25: </Grid> 26: </Border> 27: 28: <!-- El Cuerpo del Settings -->29: <StackPanel Grid.Row="1" Margin="5,0,0,0">
30: <TextBlock Text="Ruta Servicio " FontSize="24" />
31: <TextBox x:Name="txtRutaSrv" InputScope="Url" FontSize="20" />
32: <Button x:Name="btnSave" Content="Guardar" FontSize="22" Click="btnSave_Click" />
33: <TextBlock x:Name="txbError" Text="" FontSize="20" Foreground="Red" />
34: </StackPanel> 35: 36: </Grid> 37: </cfl:CharmFlyout>En este segundo Flyout, vamos a capturar en un TextBox uan direccion de un servicio de datos para nuestra App y lo vamos aguardar en los Settings.
Ahora vamos a colocar el Code Behind para que funcione nuestro control de Flyouts.
Lo primero es adicionar un Listener para los eventos que detectan el llamado de los diferentes Flyouts que hayamos creado
Primero debemos adicionar un using que nos permita utilizar los settings de la aplicación:
using Windows.UI.ApplicationSettings;Ahora en el Constructor del control de usuario quedará de la siguiente forma:
1: public ucFlyouts()
2: {3: this.InitializeComponent();
4: // Add an eventlistener.
5: SettingsPane.GetForCurrentView().CommandsRequested += Flyouts_CommandsRequested; 6: }Ahora vamos a crear el método que responda a estos eventos:
1: void Flyouts_CommandsRequested(SettingsPane sender,
2: SettingsPaneCommandsRequestedEventArgs args) 3: {4: // Add commands for handling each flyout.
5: args.Request.ApplicationCommands.Add(new SettingsCommand("a",
6: "Politica Privacidad",
7: (p) => { cflPolicy.IsOpen = true; }));
8: args.Request.ApplicationCommands.Add(new SettingsCommand("s",
9: "Configuracion",
10: (p) => { cflConfServicio.IsOpen = true; }));
11: }Este método nos asegura que nuestras dos Charms se muestren en nuestra app de Windows8.
En nuestro primer Flyout colocamos un hyperlink a nuestra politica publicada en la web, para que esto fucnione debemos tener un método que se dispare al momento de dar click sobre el control. A continuación el código del método que lanza el explorador de internet desde nuestra App con la Politica de provacidad:
1: // Este metodo se ejecuta al dispararse el evento del click en el link del Flyout de Politica
2: private async void GotoPolitic(object sender, RoutedEventArgs e)
3: {4: var uri = new Uri("http://bdotnet.wix.com/privacypolicy");
5: await Windows.System.Launcher.LaunchUriAsync(uri); 6: }
Para terminar con el código de nuestro control de usuario para los Flyouts, es colocar el código para que se graben los datos en los settings localmente en nuestro App.
Necesitamos el
1: using Windows.Storage;
Y ahora el código del evento click del botón grabar
1: // Guardo la url del servicio a consultar
2: private void btnSave_Click(object sender, RoutedEventArgs e)
3: { 4: ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings; 5: 6: try
7: {8: localSettings.Values["URLServicio"] = txtRutaSrv.Text;
9: 10: txbError.Text = "Url del Servicio Web API guardado.";
11: }12: catch (Exception ex)
13: { 14: txbError.Text = ex.Message; 15: } 16: }Ahora para que la magia funcione, debemos ir al archivo App.xaml.cs o sea, el code Behind, y ubicar el método OnLaunched.
En este método debemos cambiar la linea:
1: rootFrame = new Frame();
Por la siguiente:
1: rootFrame = new CharmFlyoutLibrary.CharmFrame { CharmContent = new ucFlyouts() };
Entonces ya podemos ejecutar nuestro App y verificar en los Charms.
Como podemos observar en la imagen tenemos Política Privacidad, Configuración y Permisos que es el Charm que se muestra por defecto.
Aquí como se muestra la página de políticas de privacidad de nuestra App y al final el link a la pagina web.
Y en esta otra imagen la pagina de captura de la dirección del servicio de datos para nuestra App, desde los Charms de Configuración.
Bueno espero que sea de su agrado y de mucha utilizada para sus desarrollo en Windows 8.
Hasta la próxima y que Dios los bendiga mucho!!!
