Como tener una galería de fotos en Silverlight en segundos


Primero accedemos a la comunidad CODEPLEX y buscamos el proyecto de SlideShow. URL: http://www.codeplex.com/SlideShow,

Bajamos el proyecto.

Requisitos:

  • Visual Studio 2008 y Silverlight Versión 1 Instalados.

slideshow001

Creamos un sitio web ASP.NE Web Site.

Agregamos en el HTML, los scripts siguientes:

slideshow002

<script type=”text/javascript” src=”Silverlight.js”></script>
<script type=”text/javascript” src=”SlideShow.js”></script>

Estos scripts los vamos a poder obtener del proyecto que descargamos de CodePlex en esta ruta.

slideshow003

Teniendo estos scripts los agregamos a nuestro proyecto Web.

slideshow004

Agregamos el siguiente HTML, en donde crearemos un control SlideShow.

slideshow005

<script type=”text/javascript”>
            new SlideShow.Control();
</script>

Si damos F5, podemos observar que se ha dibujado un cuadro de color negro en nuestra pagina .aspx.

slideshow006

Agregaremos lo siguiente:

slideshow0078

new SlideShow.Control(new SlideShow.XmlConfigProvider({url:”config.xml”}));

slideshow008

Agregamos un Archivo XML llamado config.xml

Copiamos este codigo en nuestro XML

<?xml version=”1.0″ encoding=”utf-8″ ?>
<configuration width=”600″ height=”400″ background=”Black”>

  <modules>
    <module type=”SlideViewer”/>
    <module type=”ProgressBar”/>
    <module type=”SlideDescription”/>
    <module type=”NavigationTray”>
      <option name=”thumbnailViewer.left” value=”83″/>
    </module>
  </modules>
  <transitions>
    <transition type=”FadeTransition” name=”CrossFadeTransition”/>
    <transition type=”WipeTransition” name=”WipeRightTransition”>
      <option name=”direction” value=”Right”/>
    </transition>
  </transitions>
</configuration>

Colocamos nuestra imagenes

galeriasilverlight01

 

Agregamos esta parte al config.xml

<dataProvider type=”XmlDataProvider”>
   <option name=”url” value=”data.xml”></option>
</dataProvider>

 

Y despues agregamos un data.xml

<?xml version=”1.0″ encoding=”utf-8″ ?>
<data transition=”WipeRightTransition”>
  <album title=”Titulo1″>
    <slide image=”Fotos1/1.jpg”/>
    <slide image=”Fotos1/2.jpg”/>
    <slide image=”Fotos1/3.jpg”/>
  </album>
</data>

 

Damos F5 y Listo

Podemos cambiar la forma de transicion

<?xml version=”1.0″ encoding=”utf-8″ ?>
<data transition=”CrossFadeTransition“>
  <album title=”Titulo1″>
    <slide image=”Fotos1/1.jpg”/>
    <slide image=”Fotos1/2.jpg”/>
    <slide image=”Fotos1/3.jpg”/>
  </album>
</data>

galeriasilverlight02

9 thoughts on “Como tener una galería de fotos en Silverlight en segundos

  1. Hola, como puedo hacer para que me lea todas las imagenes que tengo dentro de una carpeta, pero sin tener que darlas de alta dentro de mi data.xml? algo asi como *.jpg

    Gracias

  2. Hola realice todos los pasos que indicaste pero siempre me da un error

    line 156
    error XML parsing failed: not found

    Ignoro que pasa
    Sds.

  3. Realice el procedimiento paso a paso… ejecuto la aplicacion web, pero no genera nada en el explorador de windows, ya se encuentra instalado el framework de Silverlight. Que puede estar pasando???

  4. Hola amigos he visto la galeria de fotos de windows live, donde comparte las fotos todos los que tienen cuenta alli, bueno como puedo hacer una apgina igual en silverlight o si ya estan los control predeterminados, les agradezco mucho se ayuda
    gracias
    alguna consulta sobre detalles avisarme gracias

  5. Hola, muy bueno el pekeño manula agrego ciertas cosas:

    Para el data.xml:

    El compañero arriba no nos dijo k habia k terminar el jiji un safis de seguro…

    Aparte como le hago para agregar muchas fotos sin agregarlas una a una???

    Gracias, Bless

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s