sábado, 12 de octubre de 2013

¿Cómo crear un popup que ocupe la pantalla completa en windows phone?

La semana pasada me vi en la necesidad de crear un popup que ocupara la pantalla completa del dispositivo pensé que sería algo difícil implementarlo pero en realidad es muy fácil ya que contamos con las propiedades Application.Current.Host.Content.ActualHeight y Application.Current.Host.Content.ActualWidth que son aquellas que nos retornan el ancho y alto de la pantalla del dispositivo. Aqui dejo un code snippet para que vean como se puede implementar.
public void showPopUp()
    {
        //obtenemos el ancho y  el alto 
       double height=Application.Current.Host.Content.ActualHeight;
       double width = Application.Current.Host.Content.ActualWidth;
      //stackpanel 
       StackPanel stk = new StackPanel();
      //establecemos el tamaño del height al stackpanel
       stk.Height = height;
      //establecemos el tamaño del witdh al stackpanel
       stk.Width = width;  
       //color de fondo
       stk.Background = new SolidColorBrush(Colors.Red); 
       //textblock
       TextBlock txtblock = new TextBlock() { FontSize=40, Text="HELLO WORLD", TextWrapping=TextWrapping.Wrap};
       //agregamos el textblock al stackpanel
       stk.Children.Add(txtblock);
       Popup _popup = new Popup();
       //child content el stackpanel
       _popup.Child = stk; 
       this.LayoutRoot.Children.Add(_popup); 
       //mostramos el popup
       _popup.IsOpen = true;

    }
Este es el resultado que se obtiene :D.

domingo, 6 de octubre de 2013

CREANDO TU PROPIO REMINDER RATE

¿Quién de los desarrolladores de WP no conoce el famoso control de telerik llamado Reminder Rate?

Bueno por si no lo conoces es  un  popup que  te da como sugerencia calificar  la aplicación. Lamentablemente yo no cuento con la licencia para usar los controles de telerik :(  es por esto que decidí hacer mi propio
"Reminder Rate".

Les puedo decir que los resultados son satisfactorios pues tan solo a un  día de actualizar mi app e integrar el Reminder he obtenido más de 10 ratings aquí unas capturas de pantalla :p.




¿Cómo hago  mi propio Reminder Rate ?



La verdad es muy sencillo  lo único que tienes que hacer es seguir los siguientes pasos.

 Abre el  Manage Nuget Packages  e instala la nuget de coding4fun para windows phone tal y como se muestra en la siguiente imagen.

















En tu proyecto agrega una clase  en este caso yo la llame Reminder  pero tú la puedes llamar como  tu quieras .Esta clase usa el control "MessagePrompt" de la librería coding4fun este control es es un popup que nos deja agregar multiples controles como contenido del mismo. Dentro de la clase también usamos la propiedad IsolatedStoreSettings que es básicamente la que nos permite guardar las veces que el usuario ha visitado la app y también el limite cuando queremos que se muestre el mensaje al usuario.
 Creo que esto es lo más importante de la clase y trate de comentar cada linea de código para que sea  lo puedan entender más fácilmente,
[C#]
using System;
using System.IO.IsolatedStorage;
using System.Windows;
using System.Windows.Controls;
using Coding4Fun.Toolkit.Controls;
using Microsoft.Devices;
namespace example
{
    public class Reminder
    {


        private IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;

        //Constantes  que serán el nombre de  nuestras 'Keys' en IsolatedStorageSettings
        private const String UserCount = "UserCount"; //Key que servirá para saber hasta que vez queremos que se muestre el mensaje
        private const String CurrentCount = "CurrentCount"; //Key para almacenar las veces que ha entrado el usuario a la app
        private const String NeverShow = "NeverShow"; //Key boolena para saber si el usuario ha elegido si no se quiere mostrar el mensaje

        //variables que nos servira  para obtener  hasta que ves queremos que se muestre el mensaje
        private int _RecurrenUserCount;

        public int RecurrenceUserCount
        {
            get
            {
                //retornamos el  el valor de la variable privada
                return this._RecurrenUserCount;
            }

            set
            {
                this._RecurrenUserCount = value;
                //Notificamos el cambio  y  lo guardamos en la variable del isolated
                this.valuesChanged(this.RecurrenceUserCount, UserCount);

            }
        }

        //variables para almacenar los strings que se mostrarán en el mensaje
        public String titulo { get; set; } //titulo
        public String content { get; set; }//contenido del mensaje
        public String checkboxContent { get; set; } //contenido del checkbox


        /// 
        /// Contructor de la clase
        /// 
        public Reminder()
        {
            //revisamos si esta registrada la key en el isolated 
            /*
             NeverShow  es la variable booleana que nos dirá si se seguirá mostrando el mensaje.
             */
            if (!this.settings.Contains(NeverShow))
                this.settings.Add(NeverShow, false);

            //revisamos si existe la key CurrentCount que es la que nos dice cuantas veces ha entrado el usuario a la app
            if (!this.settings.Contains(CurrentCount))
                this.settings.Add(CurrentCount, 0);

            //guardamos los datos cambiados en el isolated
            this.settings.Save();
        }

        /// 
        /// Método para  capturar los cambios de nuestras keys en isolated
        /// 
        /// 
        /// 
        private void valuesChanged(object value, string key)
        {

            if (this.settings.Contains(key))
                this.settings[key] = value;
            else
                this.settings.Add(key, value);

            this.settings.Save();
        }

        /// 
        /// Método para mostrar el mensaje
        /// 
        public void show()
        {

            //con este if revisamos si  las keys del isolated coinciden y también revisamos que la key NeverShow este en false
            if ((int)this.settings[UserCount] == (int)this.settings[CurrentCount] && (bool)this.settings[NeverShow] == false)
            {

                //child content del mensaje
                StackPanel stk = new StackPanel();

                TextBlock txt = new TextBlock();
                txt.TextWrapping = TextWrapping.Wrap;
                txt.Text = this.content; //set content 

                CheckBox checkbx = new CheckBox();
                checkbx.Content = this.checkboxContent; //set checkboxContent
                checkbx.FontSize = 16;

                //agregamos el checkbox y textblock al stackpanel
                stk.Children.Add(txt);
                stk.Children.Add(checkbx);

                //declaramos e instanciamos el MessagePrompt  que forma parte de coding4fun
                MessagePrompt msg = new MessagePrompt();
                // set titulo del mensaje
                msg.Title = this.titulo;
                msg.Body = stk; //ponemos como body el stackpanel que declaramos
                //mostramos el boton cancelar
                msg.IsCancelVisible = true;

                //evento para capturar la respuesta del usuario en el mensaje
                msg.Completed += (s, args) =>
                {
                    //switch en las opciones del mensaje
                    switch (args.PopUpResult.ToString())
                    {
                        //case ok 
                        case "Ok":
                            //abrimos el taskreview
                            Microsoft.Phone.Tasks.MarketplaceReviewTask review = new Microsoft.Phone.Tasks.MarketplaceReviewTask();
                            review.Show();
                            break;

                        default:
                            //TODO : HAS LO QUE QUIERAS AQUÍ
                            break;

                    }

                    //Revisamos  si el usuario activo checkbox
                    if (checkbx.IsChecked == true)
                        this.valuesChanged(true, NeverShow);

                    //volvemos a reaniciar las keys para que se repita el ciclo
                    else
                    {
                        this.valuesChanged(0, UserCount);
                        this.valuesChanged(0, CurrentCount);
                    }


                };
                //Mostramos el mensaje
                msg.Show();
                //
                VibrateController vibrar = VibrateController.Default;
                vibrar.Start(TimeSpan.FromSeconds(1));
            }
        }


        /// 
        /// Metodo que invocamos en el evento  Application_Closing y sirve para registrar las veces que ha salido el usuario a la app
        /// 
        public void addCountApp()
        {
            int count = (int)settings[CurrentCount];
            count++;
            this.valuesChanged(count, CurrentCount);
        }






    }
}

¿Cómo usar la clase?

En realidad es muy sencillo lo único que tienes que hacer es declarar una variable estática de la clase en tu app.xaml.cs
 public static Reminder reminder = new Reminder();
Lo que sigue es capturar cuando el usuario ha dejado de usar la aplicación para aumentar el valor de nuestra key "CurrentCount" para esto en el evento Application_Closing debemos de llamar al evento AddCountApp de nuestra clase.
 private void Application_Closing(object sender, ClosingEventArgs e)
 {
            reminder.addCountApp();   
 }
Por último en el evento OnNavigatedTo del MainPage.xaml.cs (code behind) llamamos al método show
      protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {

            App.reminder.titulo = "Ayudanos calificando esta app";
            App.reminder.content = "Tu opinión es muy importante por favor cuentanos que es lo que piensas de la app :) ";
            App.reminder.RecurrenceUserCount = 2; //se mostrará la segunda vez que entre el usuario
            App.reminder.checkboxContent = "no volver a mostrar este mensaje jamás";
            App.reminder.show();

            base.OnNavigatedTo(e);
        }
Aquí el resultado que se obtiene.