SilverLight 4: NotificationWindows

Continuando con la fiebre de SilverLight 4, esta ocasión les escribiré como mostrarle al usuario final una ventana de notificación ya sea para el común alerta o aviso. Esta funcionalidad funciona solo cuando la aplicación esta fuera del Navegador.

Sin mas ni mas aquí les dejo el tutorial espero que lo disfruten y le saquen muchísimo provecho:

1. Crearemos nuestro proyecto de SilverLight Application

image

2. Le daremos OK a la ventana que nos muestra Visual Studio 2010 para ver nuestro aplicativo SilverLight en un proyecto web.

image

3. Luego de agregaremos un nuevo Item a nuestro proyecto de SilverLight donde agregaremos un UserControl al que llamaremos “Notificador” quien será nuestro mensaje de notificación:

image

4. En ese nuevo UserControl agregaremos el Siguiente Codigo XAML reemplazando el grid que ya se encuentra agregado, sencillamente le estamos agregando dos filas donde la cabecera tiene un alto de 20 y agregamos dos border (uno en cada fila del grid) y 2 textblock (uno en cada border)  además de darle un poquito de color a ambos borders:

     <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Padding="8 2 8 2">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="#FF87BCDB" Offset="0.0" />
                    <GradientStop Color="#FF6EB3C7" Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock x:Name="titulo" FontWeight="Bold" TextWrapping="Wrap" />
        </Border>
        <Border Grid.Row="1" Padding="8">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="#ECECF4" Offset="0.0" />
                    <GradientStop Color="#C3C2D6" Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock x:Name="mensaje" TextWrapping="Wrap"  />
        </Border>
    </Grid>

5. Ahora en el la hoja de código del UserControl agregaremos lo siguiente:

        public void MostrarMensaje(string _titulo, string _mensaje)
        {
            titulo.Text = _titulo;
            mensaje.Text = _mensaje;
        }

6. Regresemos a nuestro UserControl Principal (MainPage.xaml) y agregaremos un botón:

        <Button Content="Notificar" Height="23" Name="btnNotificacion" VerticalAlignment="Center" Width="75" />

7. Ahora nos dirigimos al código y en el constructor de la pagina escribiremos lo siguiente:

   btnNotificacion.Click += new RoutedEventHandler(btnNotificacion_Click);

8. Luego de crear el evento click del boton escribiremos lo siguiente:

        void btnNotificacion_Click(object sender, RoutedEventArgs e)
        {
            if (App.Current.InstallState == InstallState.Installed)
            {
                if (App.Current.IsRunningOutOfBrowser)
                {
                    NotificationWindow nwAlerta = new NotificationWindow();
                    nwAlerta.Height = 80;
                    nwAlerta.Width = 320;
                    //Invocamos al UserControl Notificador.xaml
                    Notificador nota = new Notificador();
                    //Le pasamos los parametros al metodo creado
                    nota.MostrarMensaje("Mi titulo es de Prueba", "Este es una demostracion de como funciona el NoticationWindows en SilverLight 4");
                    nota.Width = nwAlerta.Width;
                    nota.Height = nwAlerta.Height;
                    nwAlerta.Content = nota;
                    nwAlerta.Show(4000);
                }
                else
                {
                    MessageBox.Show("Debe estar instalada la aplicacion para ver la Notificacion");
                }
            }
            else
            {
                MessageBox.Show("Debe estar instalada la aplicacion para ver la Notificacion");
            }
        }

9. Para que esto pueda correr sin problemas debemos decirle a nuestra aplicación SilverLight que puede correr fuera del navegador de lo contrario nos arrojaría error, aunque si ven el código anterior estamos validando de que la aplicación se encuentre instalada para poder mostrar la notificación. Para habilitar que corra fuera del Navegador haremos lo siguiente:

Boton derecho del mouse sobre el proyecto y luego Propiedades y habilitan el check que se muestra en la imagen

image

Si desean agregar alguna configuración adicional como iconos, cambiar el titulo o la descripción pueden hacerlo en el botón que se les aparece al lado “Out-Of-Browser Settings”

Luego de esto pueden ejecutar su aplicación y darle botón derecho en el navegador para instalar su aplicación y hacer las pruebas 🙂


Publicado por

Alex Jimenez

Soy amante a la tecnología, dedicado al desarrollo de aplicaciones Web ReactJS, WCF, MVC, WebApi y antiguo MVP en ASP .net 2009-2012

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *