Windows Phone. Control ToggleSwitch.

El control ToggleSwitch permite al usuario  activar o desactivar una opción de manera fácil e intuitiva. Es un control equivalente al control Checkbox. Lo tenemos disponible dentro del Windows Phone Silverlight Toolkit, paquete de controles totalmente gratuito disponible tanto en Codeplex como utilizando Nuget. Ya hablamos de que como instalar y que contenía el Toolkit en la siguiente entrada:

Introducción al Windows Phone Silverlight Toolkit

Para analizar las posibilidades que nos brida el control ToggleSwitch vamos a realizar como de costumbre un ejemplo.

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

Tras crear el proyecto lo primero que debemos hacer es agregar la referencia a la librería del Toolkit para tener acceso al control. Para ello agregamos la referencia a la librería Microsoft.Phone.Controls.Toolkit.dll.

Vamos a dividir al ejemplo en tres partes claramente diferenciadas:

  1. Analizaremos las propiedades básicas del control.
  2. Modificaremos su aspecto visual.
  3. Utilizaremos los múltiples eventos que nos facilita.

Para ello, en el XAML de la página principal (MainPage.xaml) añadiremos:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnBasic" Content="Uso básico"/>
          <Button x:Name="btnStyles" Content="Estilos"/>
          <Button x:Name="btnEvents"  Content="Eventos"/>
     </StackPanel>
</Grid>

Simple, hemos añadido tres botones que nos redirigirán a páginas donde analizaremos los puntos anteriores. Vamos a añadir los eventos Click de cada botón:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnBasic" Content="Uso básico" Click="btnBasicClick"/>
          <Button x:Name="btnStyles" Content="Estilos" Click="btnStylesClick"/>
          <Button x:Name="btnEvents"  Content="Eventos" Click="btnEventsClick"/>
     </StackPanel>
</Grid>

Al pulsar sobre cada uno de los botones llevaremos al usuario a una nueva página por lo que necesitamos antes que nada añadir al proyecto las 3 páginas necesarias que utilizaremos. En el ejemplo que podéis descargar al final de la entrada se añadieron 3 páginas llamadas:

  • Basic
  • Styles
  • Events

A continuación, vamos a ver que se hace en cada uno de los botones.

private void btnBasicClick(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Basic.xaml", UriKind.Relative));
}

private void btnStylesClick(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Styles.xaml", UriKind.Relative));
}

private void btnEventsClick(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Events.xaml", UriKind.Relative));
}

Nada fuera de lo común. Utilizamos el servicio de navegación NavigationService para enviar al usuario a la página correspondiente. Puedes ver todo lo relacionado con el servicio de navegación NavigationService en esta entrada.

Para poder utilizar el control ToggleSwitch en nuestra interfaz lo primero que debemos hacer es añadir la referencia a la siguiente librería:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Nos centramos en la página “Basic.xaml”. Añadimos lo siguiente a la interfaz:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel Margin="25">
          <TextBlock Text="Uso básico"/>
          <toolkit:ToggleSwitch x:Name="toggleActivado" Content="Activado" IsChecked="True"/>
          <toolkit:ToggleSwitch x:Name="toggleDesactivado" Content="Desactivado" IsChecked="False" Header="Cabecera"/>
     </StackPanel>
</Grid>

Analizamos que hemos añadido. Hemos añadido dos ToggleSwitch. El control tiene dos estados:

  • Activado
  • Desactivado

Para determinar si el control esta activado o desactivado utilizamos la propiedad IsChecked.

  • IsChecked. Propiedad de dependencia de tipo bool?.

Otras propiedades utilizadas o de interés:

  • Content. Propiedad de dependencia de tipo object. Cabecera del control.
  • Header. Propiedad de dependencia de tipo object. Contenido del control.

Continuamos con la página “Styles.xaml” donde nos centraremos en las posibilidades de personalización del control:

<toolkit:ToggleSwitch Content="Contenido" Header="Cabecera" IsChecked="True" SwitchForeground="Yellow"/>
<toolkit:ToggleSwitch Content="Contenido" Header="Cabecera" IsChecked="True" SwitchForeground="HotPink"/>

Hemos utilizado la propiedad:

  • SwitchForeground. Propiedad de dependencia de tipo Brush. Nos permite elegir el color del ToggleSwitch en su estado activado.
  • Background. Propiedad de dependencia de tipo Brush. Nos permite elegir el color del ToggleSwitch en su estado desactivado.

Continuamos profundizando en las opciones disponibles para modificar la apariencia del control:

<toolkit:ToggleSwitch Content="Contenido" Header="Cabecera" IsChecked="True" Background="DarkGreen" SwitchForeground="LawnGreen">
     <!-- Personalizamos la cabecera -->
     <toolkit:ToggleSwitch.HeaderTemplate>
          <DataTemplate>
               <ContentControl Foreground="Green" Content="{Binding}"/>
          </DataTemplate>
     </toolkit:ToggleSwitch.HeaderTemplate>
     <toolkit:ToggleSwitch.ContentTemplate>
          <DataTemplate>
               <ContentControl FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="OrangeRed" Content="{Binding}"/>
          </DataTemplate>
     </toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>

¿Qué hemos hecho?

Fácil, hemos utilizado las propiedades HeaderTemplate y ContentTemplate para modificar el DataTemplate utilizado en la cabecera y el contenido del control:

  • HeaderTemplate. Propiedad de dependencia de tipo DataTemplate. Es el Template utilizado para la cabecera.
  • ContentTemplate. Propiedad de dependencia de tipo DataTemplate. Es el Template utilizado para el contenido.

Por último, aparte de conocer el uso básico del control y como personalizarlo, debemos interaccionar con él. Debemos saber cuando el usuario pulsa sobre él, cuando cambia de estado, etc. Para ello, vamos a utilizar los múltiples eventos que nos facilita el control. Nos centramos en la página “Events.xaml”:

<toolkit:ToggleSwitch x:Name="tEvents" Content="Contenido" Header="Cabecera" IsChecked="True" Checked="tEventsChecked" Unchecked="tEventsUnchecked"/>

Hemos utilizado los eventos:

  • Checked. Se lanza cuando el ToggleSwitch pasa al estado activado.
  • Unchecked. Se lanza cuando el ToggleSwitch para al estado desactivado.
private void tEventsChecked(object sender, RoutedEventArgs e)
{
     tEvents.Content = "Activado";
     MessageBox.Show("Activado");
}

private void tEventsUnchecked(object sender, RoutedEventArgs e)
{
     tEvents.Content = "Desactivado";
     MessageBox.Show("Desactivado");
}

Aparte de los eventos ya vistos, tenemos otros también de interés:

  • Click. Se lanza cada vez que se pulsa el ToggleSwitch.

Puedes ver de un vistazo todo el ejemplo realizado en video a continuación:

También puedes descargar el ejemplo realizado:

Más información:

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