November 2008 - Posts

Hay un link muy interesante, donde se puede dar una breve información sobre nuestros pensamientos sobre Silverlight además de nuestra experiencia utilizando la herramienta, indicando puntos a favor y en contra.

Esta iniciativa es interesante, porque permite de alguna manera hacerle llegar a la gente que esta desarrollando este producto, los pensamientos de la comunidad.

Si quieren responder a estas preguntas, hagan click aquí.

El siguiente tutorial explica como mejorar la experiencia del usuario al instalar el plug-in de Silverlight. Como saben, al no tener instalado el plug-in, el usuario habitualmente visualiza un link para instalar, pero se puede customizar esa experiencia para que sea más rica para el usuario.

Dentro del tutorial, encontrarán como agregar esta funcionalidad usando el tag object, el control Silverlight de ASP.NET y el Silverlight.js.

<br /><a href="http://video.msn.com/video.aspx?vid=8a3947f7-a377-45ae-a386-36f00d656e47" target="_new" title="Como mejorar la experencia de instalación del Plug-In de Silverlight">Video: Como mejorar la experencia de instalación del Plug-In de Silverlight</a>

 

Pueden descargar el código fuente del ejemplo utilizado aquí.

Vamos a mostrar como utilizar el control Popup. Es importante tener en cuenta, que el control Popup se posiciona por encima de todos los elementos que están en el control Silverlight además esta contenido totalmente dentro del mismo control Silverlight.

Vamos primero a mostrar como generar dentro del xaml el control que vamos a utilizar.

<UserControl x:Class="SilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    
    <Grid x:Name="LayoutRoot" Background="Gray">
        <StackPanel>
            
            <Button Width="50" Height="50" Click="Button_Click">
                <Button.Content>
                    <TextBlock Text="Click"></TextBlock>
                </Button.Content>
            </Button>
           
            <Popup x:Name="Popup1" HorizontalOffset="100" 
                                   VerticalOffset="25">
                <StackPanel Background="Red" Width="200" 
                            Height="150">
                    <TextBlock Text="Prueba de PopUp"></TextBlock>
                    <Button Width="50" Height="50" 
                            Click="ButtonCerrar_Click">
                        <Button.Content>
                            <TextBlock Text="Cerrar">
                            </TextBlock>
                        </Button.Content>
                    </Button>
                </StackPanel>                
            </Popup>
            
        </StackPanel>
    </Grid>
    
</UserControl>

Como vemos, dentro de nuestra aplicación Silverlight, tenemos un control Popup, donde vamos a poner la información que queremos mostrar en el mismo. Dentro del Popup podemos poner cualquier control Silverlight, ya que funciona como un contenedor.

Mediante las propiedades HorizontalOffset y VerticalOffset posicionamos el PopUp de acuerdo al borde superior izquierdo del control Silverlight.

Ahora vamos a ver el code-behind para mostrar como hacemos que aparezca el Popup.

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Popup1.IsOpen = true;
        }
 
        private void ButtonCerrar_Click(object sender, RoutedEventArgs e)
        {
            Popup1.IsOpen = false;
        }
    }
}

Como vemos, la propiedad importante es IsOpen, que determina si se visualiza o no el Popup.

Microsoft y Akamai han juntado esfuerzos para permitir y mejorar la calidad y experiencia de los usuarios en la visualización de videos de alta definición.

Microsoft introduce una nueva tecnología llamada Internet Information Services 7.0 (IIS7.0) Smooth Streaming, que permite al usuario visualizar videos de alta calidad independientemente del ancho de banda que tengan, permitiendo visualizar el video sin necesidad de esperar el buffering tan molesto en videos HD.

Al aliarse con Akamai, el alcance de esta tecnología es global lo que va a permitir un cambio importante en la forma de mostrar contenido multimedia en alta calidad.

Pueden visualizar un ejemplo de esta nueva tecnología aquí.

Hay veces que al utilizar un tooltip, este queda por debajo del cursor del mouse y no se puede leer totalmente, por lo que podemos querer ubicarlo en algún lugar donde no pase esto.

Para lograr esto, tenemos dos propiedades que nos permiten posicionar el tooltip, en relación con el objeto que lo contiene, estas son HorizontalOffset y VerticalOffset.

<Button x:Name="btn" Content="Button" Width="100" Height="25">
    <ToolTipService.ToolTip>
        <ToolTip x:Name="tt" Content="Ejemplo ToolTip"  
                 HorizontalOffset="50" 
                 VerticalOffset="100">
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

Dentro del xaml, podemos visualizar que en relación al botón, podemos ubicar el tooltip donde nosotros queramos.

Vamos a revisar de que manera podemos generar que nuestra aplicación Silverlight pueda visualizarse en pantalla completa, para ello vamos a utilizar la propiedad IsFullScreen.

private void FullScreen_Click(object o, EventArgs e)
{
    App.Current.Host.Content.IsFullScreen = true;
}

 

Como vemos, al asignar en true la propiedad lo que estamos haciendo es que nuestra aplicación se vea en modo pantalla completa.

Ahora, puede ser que al visualizarlo de esta manera necesitemos sacar algún elemento que por tamaño no va a visualizarse bien o queremos agregar alguna info solamente para cuando este en pantalla completa, necesitamos utilizar el evento que nos dice que la aplicación ha cambiado a pantalla completa.

App.Current.Host.Content.FullScreenChanged += 
    new EventHandler(Content_FullScreenChanged);
 
private void Content_FullScreenChanged(object sender, EventArgs e)
{
    if (App.Current.Host.Content.IsFullScreen)
    {
        // Funcionalidad para pantalla completa
    }
    else
    {
        // Funcionalidad para pantalla normal
    }
}

 

De esta manera al ponerse en pantalla completa, podemos realizar las acciones necesarias, y cuando vuelve a pantalla normal, volver la aplicación al estado que nosotros necesitamos.

Desde la web oficial de Silverlight, tenemos la posibilidad de descargar distintas aplicaciones de ejemplo que han realizado distintas personas que para colaborar con la comunidad han decidido ponerlas a disposición de cualquiera que quiera descargarlas y utilizarlas.

SilverlightAnalogClock22 AnimatedTagCloud1 silverlightchess_269x172

 

Pueden revisar las aplicaciones aquí.

Silverlight Showcase nos muestra una cantidad impresionante de aplicaciones y sitios que están utilizando Silverlight. Dentro de este listado podemos ver por país las distintas aplicaciones que se han desarrollado.

Showcase 

Pueden visualizar las aplicaciones y sitios web aquí.

Windows Live Quick Applications son soluciones Web que nos muestran distintos casos donde se aplican los distintos servicios de Windows Live, incluyendo los servicios de Silverlight Streaming y controles y aplicaciones hechas en Silverlight.

QuickApps

Se pueden descargar los códigos fuentes, para poder visualizar como esta implementado la utilización de los servicios. Esto es muy útil para saber las distintas utilidades que nos provee Windows Live así como ver distintos ejemplos de aplicaciones Silverlight.

Pueden visualizar las aplicaciones aquí.

Vamos a mostrar como hacer para seleccionar varios archivos al mismo tiempo en un cuadro de diálogo, funcionalidad muy buena e importante ya que siempre es algo complicado lograr que desde un FileDialog se puedan elegir varios archivos al mismo tiempo, teniendo que recurrir a Flash para lograrlo.

Desde al Xaml vamos a colocar un Button y un ListBox para mostrar los archivos seleccionados

<Grid x:Name="LayoutRoot" Background="White">
    <Button x:Name="browse" Click="browse_Click" Content="..."></Button>
    <ListBox x:Name="fileList" Width="300" Height="200"></ListBox>
</Grid>

 

Ahora vamos a ver como desde Code Behind logramos abrir un diálogo para seleccionar varios archivos.

private void browse_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog ofd = new OpenFileDialog();
    ofd.Multiselect = true;
    bool? result = ofd.ShowDialog();
    if (!result.HasValue || result.Value == false)
        return;
    var files=ofd.Files.Select(s=>new {Name=s.Name,Length=s.Length}).ToList();
    fileList.ItemsSource=files;
}

Como vemos utilizamos OpenFileDialog para abrir un cuadro de diálogo que nos permite seleccionar la cantidad de archivos que necesitamos.

La propiedad Files del OpenFileDialog nos devuelva los archivos seleccionados, con los que vamos a poder realizar las distintas acciones que requiera nuesta aplicación.

More Posts Next page »