Alguna vez usaba un iPod Touch para salir a correr, por accidente noté que al correr la canción cambiaba, ya después confirmé que efectivamente al agitar un iPod Touch la canción pasaba al siguiente. Eso me hizo querer hacer lo mismo en Windows Phone, comencé a ver como usar el acelerómetro pero no era suficiente, era demasiado sensible, opté por la opción de crear una clase para detectar este tipo de valor, pero como siempre antes de querer reinventar la rueda, me puse a buscar y así encontré la “Biblioteca de gestos para agitar”, si, ya se, se escucha mejor en inglés, la “Shake Gestures Library”.
Puedes encontrar el artículo que detalla su uso aquí y su código fuente aquí.
Para comenzar con este nuevo proyecto, lo primero que debes hacer es darte una vuelta a los códigos de ejemplo de Windows Phone en MSDN, particularmente el ejemplo de la música y videos.
Ya que hayas tomado un poco de práctica en ambos elementos, vamos a comenzar a construir la interfaz, solo inserta el siguiente código en tu XAML.
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="SHAKE GESTURES" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="aplicación" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button x:Name="btnReproducir" Content="Reproducir" Height="75" VerticalAlignment="Top" Click="btnReproducir_Click"/> <TextBlock x:Name="txtCancion" HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" VerticalAlignment="Center"/> </Grid> </Grid> |
Ya que tienes tu interfaz, necesitas agregar dos ensamblados en tu proyecto, el primero es el que está arriba, el ensamblado de GestosAgitar, y Microsoft.Xna.Framework.
Con interfaz y con referencias agregadas, para comenzar con el lado del code behind, necesitamos declarar cuatro objetos que utilizaremos en toda la aplicación.
Song cancionReproduciendo; const String llaveCancion = "playSong"; bool banderaCancion = false; MediaLibrary biblioteca; |
En el constructor de la página, vas a declarar los elementos necesarios para poder utilizar la librería de gestos y un temporizador para que la aplicación no se cierre.
public MainPage() { InitializeComponent(); ShakeGesturesHelper.Instance.ShakeGesture += new System.EventHandler<ShakeGestureEventArgs>(Instance_ShakeGesture); ShakeGesturesHelper.Instance.MinimumRequiredMovesForShake = 4; ShakeGesturesHelper.Instance.Active = true; DispatcherTimer dt = new DispatcherTimer(); dt.Interval = TimeSpan.FromMilliseconds(33); dt.Tick += delegate { try { FrameworkDispatcher.Update(); } catch { } }; dt.Start(); } |
Recuerda que además de la clase constructor de la pagina principal, puedes utilizar un método de tipo override llamado OnNavigatedTo que se dispara al momento de entrar a la página, aquí vas a verificar diferentes elementos, el primero es ver que la galería musical cuente con canciones, el segundo es elegir alguna de esas canciones y obtener su información, para ser exactos, el nombre de la canción elegida.
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { biblioteca = new MediaLibrary(); if (NavigationContext.QueryString.ContainsKey(llaveCancion)) { String songToPlay = NavigationContext.QueryString[llaveCancion]; foreach (Song song in biblioteca.Songs) { if (0 == String.Compare(songToPlay, song.Name)) { cancionReproduciendo = song; break; } } } else if (MediaPlayer.State == MediaState.Playing) { cancionReproduciendo = MediaPlayer.Queue.ActiveSong; } else { Random rand = new Random(); if (biblioteca.Songs.Count > 0) { cancionReproduciendo = biblioteca.Songs[rand.Next(biblioteca.Songs.Count)]; } else { txtCancion.Text = "No tienes canciones en tu biblioteca"; } } base.OnNavigatedTo(e); } |
Así como cuentas con el método pasado, el método OnNavigtedFrom que se dispara cuando dejas la página y en este caso, la aplicación. En este método, vas a detener la canción para que no siga sonando al salir de la aplicación.
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e) { if (MediaPlayer.State == MediaState.Playing) MediaPlayer.Stop(); base.OnNavigatedFrom(e); } |
El manejo de la información que leerás a partir del acelerómetro, se obtiene en un segundo hilo de tu aplicación, por ello, debes regresarlo al hilo de la UI que es donde puedes obtener el resultado para mostrarlo en una caja de texto por ejemplo.
void Instance_ShakeGesture(object sender, ShakeGestureEventArgs e) { Dispatcher.BeginInvoke(() => { CambiarCancion(); }); } |
El método que se ejecutará en segundo hilo será CambiarCancion, este método simplemente seleccionará de manera aleatoria una canción de tu galería musical y la reproducirá, también obtendrá sus datos básicos.
private void CambiarCancion() { Random aleatorio = new Random(); int cancionElegida = aleatorio.Next(0, (biblioteca.Songs.Count - 1)); MediaPlayer.Play(biblioteca.Songs[cancionElegida]); cancionReproduciendo = MediaPlayer.Queue.ActiveSong; txtCancion.Text = cancionReproduciendo.Name; } |
Por último encontrarás el método para el evento Clic de tu botón que no hará otra cosa mas que con una bandera reproducir o detener la música y cambiar la instrucción del botón.
private void btnReproducir_Click(object sender, System.Windows.RoutedEventArgs e) { if (!banderaCancion) { MediaPlayer.Play(cancionReproduciendo); btnReproducir.Content = "Detener"; txtCancion.Text = cancionReproduciendo.Name; } else { MediaPlayer.Stop(); btnReproducir.Content = "Reproducir"; } banderaCancion = !banderaCancion; } |
Listo!!! EL resultado de la aplicación lo podrás ver en el siguiente video.
Recuerda que este es un post que debes considerar para muchos escenarios, para mi gusto el acelerómetro ha sido sumamente desaprovechado por muchas aplicaciones, ahora con este ensamblado, podrás meterle mas imaginación a tus aplicaciones, aprovéchalo mucho.
Puedes descargar el código fuente de esta aplicación aquí.
Hola! muy interesante! hace dias queria saber como se manejaba el shake, una pregunt, como puedo manipular cosas del sistema como por ejemplo el color del tema del telefono queria hacer una app que cuando mueva el telefono cambie el tema aleatoriamente, gracias y saludos.
AH ay alguna forma de que lo que me respondas aqui me caiga al correo ya que no me avisa cuando me resposdes, de nuevo gracias espero tu ayuda!
Hola, no puedes modificar el tema de tu WP al agitarlo porque obedece a una aplicación exclusiva del sistema, no hay una forma de acceder a ello, pero estoy seguro que encontrarás formas mucho mas interesantes de poder utilizar la funcionalidad 😉
Gracias por el aporte Amin lo voy a implementar en mi aplicacion de windows phone 🙂