Archive

Archive for the ‘Expression Blend’ Category

[Silverlight] Mostrar RSS en una aplicación de Silverlight

Primero es crear un proyecto desde Expression Blend 2 de tipo Silverlight 2:

image

Luego Agregamos una imagen que será el fondo de donde se mostrara nuestras RSS, la imagen puede ser la que quieran, o en su caso darle diseño al control que muestra el contenido de Silverlight. Después que agregamos la imagen le quitamos el fondo al Grid, para que nuestro control se vea más o menos así:

image

Bien, a esto agregamos 2 TextBlock y un TextBox, con los siguientes nombres:

Control Nombre
TextBlock Titulo
Texblock Fecha
TextBox Contenido

Ya que tenemos nuestro “Diseño”, vamos a abrir el mismo proyecto desde Visual Studio 2008, abrimos la página xaml.cs para trabajar en ella y lo primero que hacemos el agregar los nombres de espacios que vamos a ocupar que son los siguientes:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ServiceModel;
using System.ServiceModel.Syndication;
using System.Net;

Luego en la página xaml.cs declaramos el url de RSS con la siguiente instrucción:

string feedUrlTemplate = "https://mspnor.wordpress.com/feed/rss/";

Ya con esto necesitamos un método que lea nuestros RSS, el cual declaramos y hacemos uso de un WebClien y creamos una nueva URI

     
private void CargarRSS(string uri)
{
    WebClient wb = new WebClient();
    wb.OpenReadCompleted += new OpenReadCompletedEventHandler(wb_OpenReadCompleted);

    Uri feedUri = new Uri(uri, UriKind.Absolute);
    wb.OpenReadAsync(feedUri);
}

Ahora lo interesante viene en el evento OpenReadCompleted del webClient, el código es el siguiente:

void webClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    if (e.Error != null)
    {
        this.Contenido.Text = "Error al cargar el XML del feed intentelo de nuevo";
        return;
    }
    using (System.IO.Stream stream = e.Result)
    {
        SyndicationFeed feed;
        using (System.Xml.XmlReader reader = System.Xml.XmlReader.Create(stream))
        {
            feed = SyndicationFeed.Load(reader);

            SyndicationItem item = feed.Items.First();

            this.Fecha.Text = item.PublishDate.ToString();
            this.Titulo.Text = item.Title.Text;
            this.Contenido.Text = item.Summary.Text;
        }
    }
}

Aquí hacemos uso de nuevo metodo para obtener los RSS a de una página y es la clase SyndicationFeed, y SyndicationItem como se pueden dar cuenta esto es muy sencillo esto es todo lo que necesitamos para tener RSS en una aplicación Silverlight. En el próximo post veremos como agregar esta aplicación a un WebSlice.

Se me olvidaba, El metodo cargarRSS tenemos que colocarlo en la sobrecarga de la página:

public Page()
{
    InitializeComponent();
    CargarRSS(feedURL.Trim());            
}

y si ejecutamos esto se ve más o menos así:

image

Aquí hay un pequeño detalle, que por el momento no existe un control en Silverlight que muestre contenido HTML como tal, aunque ya se esta trabajando en esto, e inlcuso existen algunos proyectos betas en CodeProject, aun no, pero vaya que esto se puede mejorar en muy poco tiempo, así que aquí les dejo este post, espero que les ayude y no duden en comentar y votar por el Blog.

 

Saludos!

Etiquetas de Technorati: ,,

Desarrollo experiencias ricas usando Microsoft .Net Framework y VS 2008

octubre 16, 2008 Deja un comentario

Más y más recursos gratis, esta vez toca el turno de aprender a usar las tecnologías de WCF (Windows Communication Foundation), WWF (Windows Workflow Foundation) y el más conocido WPF (Windows Presentation Foundation). Estos recursos son por parte de E-Learning, que como ya sabrán contiene documentación y laboratorios.

Los cursos van enfocados a personas con experiencia en Desarrollo y un poco de arquitectura de software para que puedan agregar una rica experiencia en sus soluciones, aunque si los revisan y no tiene mucha experiencia no hay mayor problema igual y es para que vayan aprendiendo sobres estas nuevas tecnologías. Recuerden los cursos son gratis!! 😀

url:https://www.microsoftelearning.com/eLearning/offerDetail.aspx?offerPriceId=213184

Etiquetas de Technorati: ,,,

Nuevo sitio de desarrollo Web de Microsoft

octubre 2, 2008 Deja un comentario

Plataforma Web de Microsoft para: el hogar, diseño, foros, blogs, etc. Todo sobre como poner en practica las tecnologías de Microsoft para tener una web innovadora. 🙂

Se ve bastante bien el sito, en donde encontramos infinidad de recursos, aquí una miradita:

webms

 

Como se observa en la figura, podemos acceder a información sobre eventos, blogs, productos, etc. así que les recomiendo que le echen un vistazo y me cuenten como les va, seria una buena idea hacer algo así para estudiantes, no creen?

URL: http://www.microsoft.com/web/default.aspx

Recursos de WPF, XAML y Blend

agosto 16, 2008 Deja un comentario

Que tal, pues buscando por la red, me encontré con unos buenos ejemplos y recursos para desarrollar con estas tecnologías en donde muchos de los casos podemos descargar los ejemplos, y revisar el código para saber como es que están hechos.

Existen ejemplos de diferentes tipos y constantemente se esta actualizado, así que aquí les dejo el enlace, y espero que aprovechen estos recursos, que para satisfacción de muchos están en Español :-).

URL: http://blackout360.wordpress.com/category/wpf/

Blogs de Expression Studio

julio 29, 2008 Deja un comentario

En Microsoft blogueamos mucho y de todo… en el caso de las personas que trabajan en algún producto específico la motivación de ir escriendo sobre nuevas características, trucos, tips o actualizaciones sobre su trabajo es mucho mayor, y no podía ser menos en los equipos de producto de Expression Studio. Estos son sus blogs:

webIcon_3 The Expression Web Team Blog

designIcon_thumb The Official Expression Design Support Team Blog

blendIcon_3 The team blog of the Expression Blend and Design products

mediaIcon_3 Messages from your Expression Media Support Team

encoderIcon_3 The team blog for Expression Encoder

Para todo lo demás están los foros y el sitio de la comunidad de Expression Studio y el propio sitio de Expression Studio.

Fuente: http://blogs.msdn.com/expressate/

[WPF] Imágenes en 3D con Visual Studio 2008 y Expression Blend 2

junio 20, 2008 8 comentarios

En este pequeño tutorial aprenderemos como manipular las imágenes en 3D, para esto vamos a utilizar tanto Visual Studio 2008 y Expression Blend 2, así que vamos a iniciar. Lo primero que hacemos es crear un nuevo proyecto en VS 2008, de tipo WPF Aplication  con el nombre de Imagen3D, como se ve en la figura:

El segundo paso es crear una carpeta llamada Imágenes en donde colocaremos las imágenes a mostrar, para esto en el Explorador de soluciones, seleccionamos nuestro proyecto y damos clic-derecho->Add->New Folder, esto como se ve en la imágenes:

Dentro de esta carpeta colocaremos nuestras imágenes, es recomendable que renombremos  las mismas con nombres desde el 1has el numero de imágenes que queramos, para agregar los archivos a la carpeta, tenemos que dar clic-derecho en la carpeta->Add->Existing Item… y buscamos los archivos.

Para poder poder observar los archivos a agregar es necesario seleccionar que el tipo de archivos que queremos ver son imágenes, como se ve en la imagen:

Como les comente, es recomendable que el nombre de nuestras imágenes sea sencillo como un número, esto por comodidad, ya que utilizaremos este nombre dentro del código y de esta manera será más fácil, aunque sino lo cambian no hay problema, solo recuerden el nombre de sus imágenes, ok

ya que tenemos agregados nuestros archivos dentro de la carpeta Imagenes, ahora toca agregar una clase a nuestro proyecto, para esto al igual que la carpeta damos clic derecho en el nombre de nuestro proyecto->Add->Class y VS2008 automáticamente nos arranca con la clase, a esta clase la llamaremos CrearImagen y el primer paso en esta clase es agregar los namespaces necesario que son:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

El primer paso en esta clase, es crear una instancia de la clase Image que se llama _miDatoActual y especificando que la clase es pública.

class CrearImagen { private static Image _miDatoActual = new Image(); }

Después creamos una variable pública de tipo Image y crear un getter que devuelva el valor de _miDatoActual

public static Image misImagenes { get { return _miDatoActual; } }

Luego Creamos una clase llamada Imagenes dentro de la casle CrearImagen

public class Imagenes : ObservableCollection<ImageData> { }

En este momento Visual Studio no sabe lo que un ObservableCollection, así que para que VS lo se entere, lo seleccionamos y damos clic-derecho->Resolve->System.Collections.ObjectModel

Creamos el constructor de la clase Images y declaramos la ruta de acceso de nuestras imágenes.

public class Images : ObservableCollection<ImageData>
{
public Images()
{
this.Add(new ImageData(@”Imagenes\1.jpg”));
this.Add(new ImageData(@”Imagenes\2.jpg”));
this.Add(new ImageData(@”Imagenes\3.jpg”));
this.Add(new ImageData(@”Imagenes\4.jpg”));
this.Add(new ImageData(@”Imagenes\5.jpg”)); } }

Creamos la clase de ImageData después de la clase de Imagenes y hacerla del tipo INotifyPropertyChanged. Esta clase se activará para cada imagen agregamos. También tendrá que tener esta clase de utilizar tal el System.ComponentModel como lo hicimos con la clase Imagenes y creamos una cadena privada que se llama _sNombreImagen.

public class ImageData : INotifyPropertyChanged { private string _sNombreImagen = “”; }

Crear el constructor de ImageData y pasar en sImagenName, que es la ruta de acceso
pasado de la clase Images. Creamos una variable llamada NombreImagen y le asignamos sImagenName la cual será pública y de tipo String. Por último creamos los getters y serters necesarios para establecer y definir el nombre de la imagen y la ruta en la que se encuentra con ayuda de un evento llamado NotifyPropertyChanged que definiremos más adelante, entonces el código de esta clase queda así:

public class ImageData : INotifyPropertyChanged
{
private string _sNombreImagen = “”;
public ImageData(string sNombreImagen)
{
NombreImagen = sNombreImagen;
}
public string NombreImagen
{
get { return _sNombreImagen; }
set { _sNombreImagen = value;
NotifyPropertyChanged(NombreImagen); } } }

Agregar el método PropertyChangedEventHandler y NotifyPropertyChanged dentro de la misma clase de ImageData

public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String sProp)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(sProp)); } }

Hasta este punto dejamos nuestra aplicación por el lado del código, regresaremos casi al final, ahora construimos nuestra solución presionando F6 y abrimos nuestro proyecto con Expression Blend 2. Todo esto sin cerrar VS 2008.

Lo primero es modificar el alto y ancho de nuestra ventana, que queda con 600 en Height y 800 en Width. Ahora con el objeto del Grid seleccionado en Objects and TimeLine en el panel de propiedades vamos a cambiar el Backgroung a GradientBrush. Así mismo cambiamos el color del Grid para tener una mejor apariencia como se ve en las figura.


Para obtener este color tenemos tres colores, azul, blanco y azul

Después creamos nuestro DataSource, para esto nos vamos al tag de Project y damos clic en +CTR Object. y en Add CLR Object Data Source seleccionamos CrearImagen

11

Automáticamente Expression Blend 2 nos crea dicho DataSource y lo podemos observar dentro del código XAML, dando clic en Split para ver el diseño y el código

<Window.Resources>
<ObjectDataProvider x:Key=”CrearImagenDS” ObjectType=”{x:Type Imagen3D:CrearImagen}” d:IsDataSource=”True”/>
</Window.Resources>

A continuación tenemos que agregar los controles que nos van a permitir seleccionar una imagen y visualizarla, con el Grid seleccionado buscamos un ComoBox que llamaremos miCB y un rectangulo que llamaremos ImagenPlana y los colocamos de las siguiente manera.


Si presionamos en este momento F5 nos podemos dar cuenta que nuestra aplicación aun es muy sencilla, pero veamos cómo ponerla un poco más interesante.

Guardamos nuestro proyecto en Expression Blend 2 y ahora trabajamos de nuevo con VS2008 en donde abrimos el archivo de Window1.xaml y en los Recursos creamos un DataTemplate que llamaremos ImagenDT que indicara al ComoBox que contenido mostrar, que en nuestro caso es la Imagen y el Textblock, la definición de DataTemplate es así:

<Window.Resources>
<DataTemplate x:Key=”ImagenDT”>
<StackPanel Orientation=”Horizontal”>
<Image Source=”{Binding Path=NombreImagen}” Height=”50″ Width=”50″/>
<TextBlock Text=”{Binding Path=NombreImagen}”/>
</StackPanel>
</DataTemplate> <ObjectDataProvider x:Key=”CrearImagenDS” ObjectType=”{x:Type Imagen3D:CrearImagen}” d:IsDataSource=”True”/>
</Window.Resources>

Dentro del código XAML localizamos el ComboBox y en la propiedad de ItemSource le indicamos que use misImagenes que se encuentra den CrearImagenDS, al igual le indicamos que use el DataTemplate que acabamos de crear, entones el código del miCB queda así:

<ComboBox HorizontalAlignment=”Left” Margin=”21.167,22,0,0″ VerticalAlignment=”Top” Width=”261.111″ Height=”51.389″ IsSynchronizedWithCurrentItem=”True” x:Name=”miCB” ItemsSource=”{Binding Path=misImagenes, Source={StaticResource CrearImagenDS}}” ItemTemplate=”{StaticResource ImagenDT}”>
<ComboBox.Background>
<LinearGradientBrush EndPoint=”0,1″ StartPoint=”0,0″>
<GradientStop Color=”#FF9DB6DA” Offset=”0″/>
<GradientStop Color=”#FF1F66CB” Offset=”0.996″/>
</LinearGradientBrush>
</ComboBox.Background>
</ComboBox>

Ahora si todo va bien, y ejecutamos nuestro proyecto nos aparece en el ComoboBox las fotos que tenemos en nuestra carpeta, y la aplicación se ve más o menos así:


Después de esto, tenemos que indicar que la imagen que seleccionemos se muestre dentro de nuestro rectángulo, y lo que tenemos que hacer es localizar nuestro rectángulo ImagenPlanta dentro del XAML y lo modificamos de manera que eliminamos el Fill y le indicamos que lo rellene con lo que seleccionamos.

<Rectangle Stroke=”#FF000000″ Margin=”229.055,108.499,110.611,84.667″ x:Name=”ImagenPlana”> <Rectangle.Fill>
<ImageBrush ImageSource=”{Binding Path=SelectedItem.NombreImagen, ElementName=miCB}”/>
</Rectangle.Fill>

</Rectangle>Ahora sí, si ejecutamos nuestro proyecto, podemos observar que la imagen que seleccionemos en él Como es la imagen que se muestra en el rectángulo, y se ve más o menos así:

Muy bien, ahora hagamos esto un poco más interesante, y pongamos varias opciones para que nos muestren las imágenes, entonces agregamos 3 radio butons del lado izq del rectángulo, con estas características:

<RadioButton HorizontalAlignment=”Left” Margin=”21.167,178,0,0″ VerticalAlignment=”Top” Width=”163.833″ Height=”33″ Content=”Imagen Plana (2D)” x:Name=”Imagen2DRB” IsChecked=”True”/>

<RadioButton HorizontalAlignment=”Left” Margin=”21.167,240,0,0″ VerticalAlignment=”Top” Width=”163.833″ Height=”29″ Content=”Imagen 3D” x:Name=”Imagen3DRB” IsChecked=”False”/>

<RadioButton HorizontalAlignment=”Left” Margin=”21.167,0,0,233″ VerticalAlignment=”Bottom” Width=”163.833″ Height=”38″ Content=”Animación 3D” x:Name=”Animacion3DRB” IsChecked=”False”/>

Ahora para trabajar con la segunda opción de la imagen en 3D, seleccionamos el rectángulo ImagenPlana y en el panel de Apariencia en la propiedad Visibility seleccionamos Collapsed para poder trabajar con otra imagen.

En Expreesion Blend 2 vamos al tag de Proyecto y en la carpeta de Imágenes, seleccionamos una y la arrastramos al Grid, con la imagen seleccionada damos clic en Tools -> Make Image 3D, por último deshabilitamos la opción de ClipToBounds en el panel de Apariencia.

Ya teniendo esto, seleccionamos el Viewport3D y damos doble clic sobre la imagen, para poder manipularla y la colocan en la posición que quieran, pueden rotarla en cualquiera de los 3 ejes (x,y,z), por ejemplo así:

Recuerden colocarle nombre a este Viewport3D, en mi caso lo llame Imagen3D. Dentro del código XAML buscamos el Viewport3D y modificamos su propiedad de diffusematerial como el siguiente código:

<DiffuseMaterial>
<DiffuseMaterial.Brush>
<ImageBrush ImageSource=”{Binding Path=SelectedItem.NombreImagen, ElementName=miCB}” Stretch=”Fill”/> </DiffuseMaterial.Brush>
</DiffuseMaterial>

También seleccionamos el Viewport3D llamado Imagen3D y en su propiedad visibility indicamos Collapsed, para trabajar con la última parte que será un Viewport3D con el nombre de cubo, y como es una explicación larga por el momento solo agregaremos el código, que se encuentra en un txt que podrán descargar desde aquí, este lo pegaran debajo del Viewport3D llamado Imagen3D, podemos observar cómo nos muestra un cubo, que es con el que trabajaremos una sencilla animación. Así que el código lo pegan aquí:

</Grid> en el proyeccto
<!–pegar aquí–>
</Grid>
</Window>

y podemos observar que si nos muestra una especie de cubo.


Ahora seleccionamos el Viewport3D llamado Animacion3D y cambiamos su propiedad de Visibility a Collapsed, por otro lado seleccionamos el Rectángulo llamado ImagenPlana al cual indicaremos su propiedad de Visibility en Visible. Ejecutamos nuestro proyecto presionando F5.

Pues bien hasta aquí, parece que todo va bien, ahora tenemos que darle funcionalidad a los Radio Buttons, para esto vamos a VS2008 y abrimos el archivo Window1.xaml.cs en donde agregaremos funcionalidad a cada uno de los eventos click de los botones, en donde solo indicaremos que se va a mostrar y que en cada uno de ellos, el código es el siguiente:

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent(); Imagen2DRB.Click += new RoutedEventHandler(Imagen2DRB_Click);
Imagen3DRB.Click += new RoutedEventHandler(Imagen3DRB_Click); Animacion3DRB.Click += new RoutedEventHandler(Animacion3DRB_Click);
}

void Animacion3DRB_Click(object sender, RoutedEventArgs e)
{
Animacion3D.Visibility = Visibility.Visible;
ImagenPlana.Visibility = Visibility.Collapsed;
Imagen3D.Visibility = Visibility.Collapsed;
}

void Imagen3DRB_Click(object sender, RoutedEventArgs e)
{
Animacion3D.Visibility = Visibility.Collapsed;
ImagenPlana.Visibility = Visibility.Collapsed; Imagen3D.Visibility = Visibility.Visible;
}

void Imagen2DRB_Click(objectsender, RoutedEventArgs e)
{
Animacion3D.Visibility = Visibility.Collapsed;
ImagenPlana.Visibility = Visibility.Visible;
Imagen3D.Visibility = Visibility.Collapsed;
}
}

Si ejecutamos nuestro proyecto de nuevo presionando F5, podemos observar que ya funcionan nuestros radio Buttons, ahora solo resta hacer la animación de nuestro cubo, lo primero es poner como Visible nuestro cubo, luego damos clic en +Event y en +StoryBoard, a este último lo llamaremos AnimacionCubo, como se ve en las siguientes figuras:

Ahora pongan atención, seleccionamos la línea en el segundo 0, vamos a manipular sus propiedades de transformación cada 2 segundos, tanto de la posición en X, Y y del ángulo

Los valores completos son los siguientes:

Segundo 0 X=90, Y=0, Angle=-40
Segundo 2 X=-90, Y=0, Angle= 40
Segundo 4 X=0, Y=45, Angle=-180
Segundo 6 X=0, Y=0, Angle=0

Ya para terminar, solo falta indicarle que esto lo haga todo el tiempo, para esto solo seleccionamos el AnimacionCubo y en la propiedad RepeatBehavior asignamos Forever, cerramos el StoryBoard llamado AnimacionCubo y listo, tenemos nuestro proyecto listo, ahora podemos observar cómo es que funciona. (Recuerden poner el último viewport3D en Collapsed y el Rectángulo en Visible). Espero que les sea de utilidad este pequeño tutoría. Como producto final tenemos algo como esto:

Puedes descargar el código aquí

WPF ejemplos de XBAP

XBAP es básicamente un EXE creado con el Framework de WPF, la diferencia es que este ejecutable es publicado en un servidor Web, que se descarga y corre en un sanbox en tu navegador de Internet.

Una de las ventajas de las aplicaciones XBAP es que evita el proceso de instalación y actualización de versiones, además de que corre en un área segura del navegador, no tiene problemas de virus, caballos de Troya, etc. El único problema es que si requiere que tenga instalado el  .NET 3.0, y que solo funciona con IE, pero si quieres ver que como van este tipo de aplicaciones, aquí unos ejemplos.

  1. http://scorbs.com/workapps/photobook/PhotoBook.xbap,
  2. http://ttpdownload.bl.uk/browserapp.xbap
  3. http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap
  4. http://download3.xceedsoft.com/demo/gridwpf/Xceed.Wpf.DataGrid.Samples.LiveExplorer.xbap
  5. http://www.microsoft.com/japan/windowsvista/webshowcase/domino.htm.

Algunos son ejemplos sencillos, como el primero pero otros son verdaderamente muy buenos, como el de libros fantásticos del pasado en la biblioteca del futuro, se necesita un buen ancho de banda para que funcione, pero de verdad que vale la pena. Puedes ver un libro de Leonardo Da Vinci´s Codex Arundel :-).

libro