Skip to main content

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.

<form id="form1" runat="server" style="height:100%">

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

               <param name="source" value="ClientBin/SilverlightBasico.xap"/>

               <param name="onError" value="onSilverlightError" />

               <param name="background" value="white" />

               <param name="minRuntimeVersion" value="3.0.40624.0" />

               <param name="autoUpgrade" value="true" />

  <a href= http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0  style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/></a>

           </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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

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

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

<Grid x:Name="Contenido"> 

</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.

<Grid x:Name="LayoutRoot">

<StackPanel Orientation="Vertical" Margin="50" Width="200" >

<Button x:Name="botonMostrarTexto" Content="Mostrar Texto" Click="botonMostrarTexto_Click"></Button>

            <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:

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

Demo sobre animación en Silverlight 3:

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

Demo sobre behaviors en Silverlight 3:

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

Demo sobre el control Data Form de Silverlight 3:

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

Demo sobre Data Services en Silverlight 3:

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

Demo sobre Isolated Storage en Silverlight 3:

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

Demo sobre Silverlight 3 fuera del navegador:

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

Demo sobre proyección 3D en Silverlight 3:

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

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

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

Demo sobre SketchFlow en Microsoft Blend 3:

Descargar código fuente y tutorial

Microsoft está realizando una encuesta en línea para comprender su opinión del sitio web de. Si decide participar, se le presentará la encuesta en línea cuando abandone el sitio web de.

¿Desea participar?