Artículo
10/20/2021

Primeros pasos con Silverlight 3

Mi primer control Silverlight 3

Lo primero será crear una aplicación Silverlight, seleccionando Silverlight Application como nuevo proyecto y lo llamaremos, por ejemplo, SilverlightBasico.

La siguiente pantalla nos preguntará si queremos añadir nuestra aplicación Silverlight 3 a una aplicación web ya existente o crearemos una nueva.

Una vez creado si miramos el panel del Solution Explorer veremos que tenemos dos proyectos, el proyecto web y la aplicación Silverlight. Si abrimos la página de test llamada SilverlightBasicoTestPage.aspx, podemos ver como es el manifiesto para referenciar la aplicación Silverlight.

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

</div>

</form>

Lo que podéis necesitar cambiar es el “minRuntimeVersion”, para poner la versión mínima de Silverlight sobre la que necesita correr nuestra aplicación. En caso de que el cliente tuviera una versión anterior accedería a la página referenciada por el parámetro autoUpgrade para descargarse una nueva versión. En ClientBin encontramos la dirección de nuestra aplicación Silverlight. Si os fijáis esta será “.xap” es decir la versión comprimida y compilada de nuestra aplicación.

Si ahora miramos el proyecto Silverlight veremos dos páginas “.xaml”. XAML (Extensible Application Markup Language) es un lenguaje marcado y declarativo que nos permitirá crear nuestras interfaces y sus comportamientos a través de etiquetas estilo XML. Siguiendo con las páginas tenemos un control Application (App.xaml) que es nuestra clase principal y desde ahí llamamos al control principal.

private void Application_Startup(object sender, StartupEventArgs e)

{

this.RootVisual = new MainPage();

}

Ahora abriremos la página sobre la que trabajaremos “MainPage.xaml”, este UserControl está compuesto por unos espacios de nombre en el encabezado junto al resto de metadata y un contenido. Dentro del metadata también referenciaremos con x:Class, la clase en código lateral de nuestra página.

<UserControl x:Class="SilverlightBasico.MainPage"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

</Grid>

</UserControl>

Lo que haremos a continuación será añadir algunos controles dentro de nuestra página. Crearemos por tanto un botón y una caja de texto. Cada control tiene unas propiedades, unos eventos y unas propiedades dependientes, es decir, unas propiedades heredadas de sus padres. Cuando decimos padres, es por el simple hecho de que el XAML distribuye los controles como un árbol, donde cada elemento tiene un padre y puede tener varios hijos.

<TextBlockx:Name="cajaTexto" Text=""></TextBlock>

</StackPanel>

</Grid>

Por último, accedemos al MainPage.xaml.cs que es código lateral de nuestra página principal y añadimos el manejador del evento Click para el botón que hemos creado de tal marea que cuando hagamos click se inserte en la propiedad Text de la caja de texto la cadena “Hola Mundo”.

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private void botonMostrarTexto_Click(object sender, RoutedEventArgs e)

{

cajaTexto.Text = "Hola Mundo";

}

Para probarlo compilamos pulsando F5 y en el navegador aparecerá nuestra aplicación. Hacemos click en el botón y este es el resultado.

Código fuente del ejemplo “Hola Mundo”

Descargar código fuente en C#
Descargar código fuente en VB

Otras Demos Silverlight 3

Demo sobre Silverlight 3 Toolkit:

Demo sobre animación en Silverlight 3:

Demo sobre behaviors en Silverlight 3:

Demo sobre el control Data Form de Silverlight 3:

Demo sobre Data Services en Silverlight 3:

Demo sobre Isolated Storage en Silverlight 3:

Demo sobre Silverlight 3 fuera del navegador:

Demo sobre proyección 3D en Silverlight 3:

Demo sobre cómo crear un reproductor de Silverlight 3:

Demo sobre SketchFlow en Microsoft Blend 3:

Primeros pasos con Silverlight 3

Mi primer control Silverlight 3

Código fuente del ejemplo “Hola Mundo”

Otras Demos Silverlight 3

Recursos adicionales