enero 2013 – El blog de Javier Torrecilla

[WINRT] AppBar autoocultable

Continuando un poco con la estela del post anterior en el que hablaba de los Behaviors, en este vamos a ver como agregar una funcionalidad que puede ser bastante interesante en nuestras aplicaciones para Windows Store.

Lo que vamos a abordar, es como auto ocultar la barra de aplicación, según el tiempo deseado. Para resolver esta problematica vamos a agregar dos Dependency Properties a los controles de tipo AppBar:

– La primera una propiedad de tipo Booleana que será la encargada de indicar si se aplica el auto cierre o no. Dentro del establecimiento de esta propiedad vamos a agregar los manejadores de eventos para cuando se abrá la AppBar y cuando entre y salga el cursor dentro de ella (para parar el contador si el cursor está dentro de la AppBar)

– La segunda una propiedad de tipo Integer que servirá para expresar en segundos cuando se va a llevar a cabo el cierre de la AppBar. El valor por defecto de esta propiedad va a ser 5.

Al lio:

public class AppBarExtensions
    {
        public static AppBar appBar;
  
        public static readonly DependencyProperty AutoCloseTimeProperty = DependencyProperty.RegisterAttached("AutoCloseTime", typeof(int), typeof(AppBarExtensions),
            new PropertyMetadata(5));
  
        public static int GetAutoCloseTime(UIElement element)
        {
            return (int)element.GetValue(AutoCloseTimeProperty);
        }
  
        public static void SetAutoCloseTime(UIElement element, int value)
        {
            element.SetValue(AutoCloseTimeProperty, value);
        }
  
        public static readonly DependencyProperty AutoCloseProperty = DependencyProperty.RegisterAttached("AutoClose", typeof(bool), typeof(AppBarExtensions),
       new PropertyMetadata(DependencyProperty.UnsetValue,
       (o, e) =>
       {
           var control = o as AppBar;
  
           appBar = control;
           if (control != null)
           {
               if ((bool)e.NewValue)
               {
                   control.Opened += AppBarOpened;
                   control.PointerEntered += control_PointerEntered;
                   control.PointerExited += control_PointerExited;
               }
               else
               {
                   control.Opened -= AppBarOpened;
                   control.PointerEntered -= control_PointerEntered;
                   control.PointerExited -= control_PointerExited;
               }
           }
       }));
  
        static void control_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            timer.Tick += timer_Tick;
            timer.Start();
            Elapsed = 1;
        }
  
        static void control_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            timer.Stop();
            timer.Tick -= timer_Tick;
            Elapsed = 1;
        }
  
        private static DispatcherTimer timer;
  
        private static int Elapsed = 1;
  
        static void AppBarOpened(object sender, object e)
        {
            timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += timer_Tick;
            timer.Start();
        }
  
        static void timer_Tick(object sender, object e)
        {
            if (Elapsed == GetAutoCloseTime((UIElement)appBar))
            {
               
                Elapsed = 1;
                appBar.IsOpen = false;
                timer.Stop();
            }
            else
                Elapsed++;
        }
        public static bool GetAutoClose(UIElement element)
        {
            return (bool)element.GetValue(AutoCloseProperty);
        }
        public static void SetAutoClose(UIElement element, bool value)
        {
            element.SetValue(AutoCloseProperty, value);
        }
    }

Del mismo modo que en el ejemplo del post anterior, vamos a ver como usarlo dentro de nuestro código:

   1: xmlns:appbar="using:AppBarExtensions"

De esa manera podremos empezar a utilizarlo en nuestra AppBar:

   1: <AppBar x:Name="appbar" appbar:AppBarExtensions.AutoClose="True" appbar:AppBarExtensions.AutoCloseTime="3" />

Espero que os resulte de utilidad.

Saludos!

[WINRT] Behaviors

El patrón de diseño mas utilizado a la hora de crear aplicaciones con WPF, Silverlight o Windows 8 es MVVM (Model – View – ViewModel).

Aunque no voy a entrar a la explicación de este patrón voy a hablar de algo relacionado con él.

Uno de los objetivos de este patrón es ayudarnos a mantener nuestro código lo mejor estructurado posible.

En este post me voy a centrar en explicar una problemática existente dentro de Windows 8 y mas concretamente en las desarrolladas con XAML.

El problema radica en la no existencia de triggers que si existian en WPF, como podían ser EventTrigger que se producian al lanzarse un evento.

Debido a ello, vamos a ver como podemos extender los controles de WINRT, para que en lugar de utilizar los eventos desde el código de nuestra página / control, enlacemos a través de un Binding con una propiedad ICommand de nuestro modelo.

Para poder hacer esto, sera necesario definir una Dependency Property. Para el ejemplo concreto vamos a ver como capturar una tecla pulsada por ejemplo en un control de tipo TextBox:

public class PageKeyPressBehavior
{
    public static readonly DependencyProperty KeyDownCommandProperty = DependencyProperty.RegisterAttached("KeyDownCommand", typeof(ICommand), typeof(PageKeyPressBehavior),
                new PropertyMetadata(DependencyProperty.UnsetValue,
                    (o, e) =>
                    {
                        var textbox = o as TextBox;
                        if (textbox != null)
                        {
                            if (e.NewValue != null && e.OldValue == null)
                                textbox.KeyDown +=  KeyDownEvent;
                            else if (e.NewValue == null && e.OldValue != null)
                                textbox.KeyDown -= textbox_KeyDownEvent;
                        }
                    }));
 
            public static ICommand GetIntroButtonCommand(UIElement element)
            {
                return (ICommand)element.GetValue(IntroButtonCommandProperty);
            }
 
            public static void SetIntroButtonCommand(UIElement element, ICommand value)
            {
                element.SetValue(IntroButtonCommandProperty, value);
            }
 
            static void KeyDownEvent(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
            {
                    var textbox = sender as TextBox;
                    if (textbox != null)
                    {
                        ICommand cmd = GetIntroButtonCommand(textbox);
                        if (cmd != null)
                            cmd.Execute(e.Key.ToString());
                       
                    }   
            }
}

En el código del ejemplo lo que hacemos es registrar una propiedad en los controles de tipo TextBox, y agregamos el manejador de eventos para controlar el evento KeyDown. Dentro de dicho evento lo que haremos será invocar al valor de nuestra Dependency Property.

Bien, ahora como utilizamos esto dentro de nuestra pagina:

1) Lo primero será agregar el namespace donde está alojada la clase que incluye nuestra Dependency Property:

   1: xmlns:be="using:MyApp.Behaviors"

2) Utilizarla dentro de nuestro TextBox:

   1: <TextBox be:KeyDownCommand="{Binding MyKeyDownCommand}" />

Con esto ya trendriamos enlazado nuestro ViewModel y nuestra Vista sin tener que capturar los eventos desde el propio Code Behind.

Espero que os sea de utilidad.

Saludos!