Como poner un "ProgressBar" al inicio de tu App en WP7


Hola amigos, aquí les dejo un tutorial en cual podremos poner un “ProgressBar” al momento en que nuestra aplicación se este inicializando, esta sirve mucho si estamos manejando Feeds de algún sitio Web.

Primero creamos un nuevo proyecto:

File—New—Project—Windows Phone Application

Nuestro proyecto se llamara “Demo”

clip_image002

 

 

 

 

 

Después seleccionamos la versión, que será 7.1:

clip_image004

Una vez generado el proyecto, crearemos una carpeta llamada: Controles.

 

clip_image006

Dentro de la carpeta de controles, crearemos un control, al cual llamaremos “Cargando”.

 

clip_image008

Nuestro Explorador de Soluciones debe de quedar así:

clip_image010

Ahora lo que haremos, será abrir el archivo “Cargando.xaml”, observemos el código que nos genera por default:

clip_image012

Ahora lo que haremos para que nuestro control funcione y aparezca el “ProgressBar” indicándonos que se esta cargando la aplicación, el código que se ingresa es el siguiente:

Foreground=”{StaticResource PhoneForegroundBrush}”

d:DesignHeight=”800″ d:DesignWidth=”480″>

<Grid x:Name=”LayoutRoot”>

<Rectangle Height=”800″ HorizontalAlignment=”Left” Name=”rectangle1″ Stroke=”Black” StrokeThickness=”1″ VerticalAlignment=”Top” Width=”480″ Fill=”#AD121212″ Opacity=”0.8″ />

<TextBlock HorizontalAlignment=”Left” Margin=”173,338,0,429″ Name=”textBlock1″ Text=”Cargando…” Width=”151″ Foreground=”White” FontSize=”22″ FontFamily=”Arial” FontWeight=”Bold” />

<ProgressBar HorizontalAlignment=”Left” Margin=”33,375,0,389″ Name=”progressBar1″ Width=”420″ Background=”#FF118FDE” BorderBrush=”White” FlowDirection=”RightToLeft” />

</Grid>

</UserControl>

Lo que insertamos, fue un rectángulo que la hará de fondo, un textblock que nos muestra la leyenda “Cargando…” y por ultimo el Progressbar.

Después de esto, nos vamos al archivo “Cargando.xaml.cs”

Observemos el código que tenemos por default.

clip_image013

Aquí lo único que ingresaremos será la siguiente línea de código:

Después del

InitializeComponent();

this.progressBar1.IsIndeterminate = true;

}

}

}

Con esto acabamos en la pagina de “Cargando”, después nos iremos a nuestra “MainPage.xaml.cs” en la cual agregaremos el código restante.

Lo primero que haremos será poner las referencias:

using System.Windows.Controls.Primitives;

using System.ComponentModel;

using System.Threading;

using Demo.Controles;

//Cabe destacar que la ultima librería hace referencia al nombre de su proyecto, para que el control que creamos anteriormente funcione.

Declaramos:
public partial class MainPage : PhoneApplicationPage

{

private Popup popup;

private BackgroundWorker backroungWorker;

Despues en nuestro constructor:

// Constructor

public MainPage()

{

ShowPopup();

InitializeComponent();

}

Seguido de los componentes para hacer que funcione nuestro control.

private void ShowPopup()

{

this.popup = new Popup();

this.popup.Child = new Cargando();

this.popup.IsOpen = true;

StartLoadingData();

}

private void StartLoadingData()

{

backroungWorker = new BackgroundWorker();

backroungWorker.DoWork += new DoWorkEventHandler(backroungWorker_DoWork);

backroungWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backroungWorker_RunWorkerCompleted);

backroungWorker.RunWorkerAsync();

}

void backroungWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)

{

this.Dispatcher.BeginInvoke(() =>

{

this.popup.IsOpen = false;

}

);

}

void backroungWorker_DoWork(object sender, DoWorkEventArgs e)

{

Thread.Sleep(7500);

}

Y ya con esto hemos terminado, ahora lo que haremos será ejecutar nuestra aplicación y ver el resultado.

Sin título

Aquí les dejo el código por si lo quieren utilizar en cualquier otra aplicación.

Espero y les haya servido, hasta la próxima.

Anuncios

3 comentarios sobre “Como poner un "ProgressBar" al inicio de tu App en WP7

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. 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 )

Conectando a %s