Archivo

Archive for the ‘XAML’ Category

[WPF]Agregar referencia de ensamblado en código XAML

septiembre 25, 2009 Deja un comentario

Buenas,

Aquí un post rápido de como hacer lo que menciona el titulo del post. Este escenario se presenta cuando creamos un proyecto de tipo “Biblioteca de clases” y queremos agregarlo a nuestro Ventana.xaml o control, etc, pero desde código.

Debemos tener primero que cuando creamos el proyecto de biblioteca de clases contener un nombre de espacio para nuestras clases. una es esto basta con agregar la siguiente línea de código en la definición de nuestra ventana:

xmlns:local="clr-namespace:MiNombreDeEspacio;assembly=MiClase"

en donde local será el nombre de nuestro espacio de nombres dentro del código XAML y cuando lo usemos seria de la siguiente manera:

local:MessageListener.Instance

Bueno espero que le sirva este post para no perder tiempo 😀

Etiquetas de Technorati: ,
Categorías:Tips, WPF, XAML

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/

[Silverlight]Creando una aplicación Deep Zoom

julio 13, 2008 6 comentarios

Muy bien, pues con ayuda del nuevo Deep Zoom Composer, vamos a crear una aplicación de ejemplo en solo unos cuantos minutos, y además lo vamos a incluir en un blog de Windows Live Spaces. No colocare aquí el ejemplo terminado ya que en WordPress ya no podemos hacer uso de los tags de iframe :S, si alguien sabe como hacer me dice porfa. Bueno iniciamos…

1.-Primero descargamos e instalamos Deep Zoom Composer

URL: http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

2.- Una vez terminada la instalación, abrimos el programa (Inicio->Todos los Programas->Deep Zoom Composer). y damos clic en File->New project.., al que llamaremos en este ejemplo: Amigos.

               deepzoom

3- Agregamos imágenes en el panel derecho que dice: Add imgae…

4.-Después damos clic en donde dice Compose y del panel derecho de donde agregamos las imágenes, las arrastramos hacia el centro, y ahi comenzamos a ordenar nuestras fotos, además podemos cambiar la posición del layer, es decir si esa atrás o al frente una foto de otra, entonces tenemos algo así:

                deepzoomcomposer

5.-Ahora damos clic en la parte de Export y le asignamos un nombre por ejemplo: DeepZoomAmigos, en la parte de out type, seleccionamos Export images and Silverlight Project y damos clic en Export.

6.-Damos clic en  Preview in Browser y listo, ya tenemos lista nuestra aplicación DeepZoom 😀

Hospedando nuestra aplicación en Silverlight Streaming

URL:http://silverlight.live.com/account/create.aspx

1.-Preparamos nuestra aplicación, buscamos la carpeta de ClientBin dento de nuestra carpeta de proyecto, verificamos que contenga el archivo con extension .xab y dentro de esta carpeta de ClientBin creamos nuestro manifiesto.xml, con el siguiente código:

<SilverlightApp>
  <version>2.0</version>
  <source>ClientBin/DeepZoomProject.xap</source>
  <width>720</width>
  <height>540</height>
  <background>gray</background>
  <isWindowless>false</isWindowless>
</SilverlightApp>

recuerden renombrar el archivo de .xab con el que tengan en su proyecto.

2.- ya con esto, enzipamos nuestra carpeta ClientBin y la cargamos en Silverlight Streaming. y listo tenemos nuestro aplicación para colocarla en nuestro sitio, blog o donde quieran. Como aquí no s puede ver ejemplo les dejo una imagen, y el proyecto terminado lo  ven aquí: http://mspnor.spaces.live.com/blog/cns!225760CED59218FC!573.entry.

      Dibujo 

Etiquetas de Technorati: ,,
Categorías:Deep Zoom, silverlight, WPF, XAML

[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í

Microsoft Silverlight 2 Controls

Al parecer Silverlight cada vez nos va mejor en cuanto al progreso dentro de las aplicaciones para la Web dinámicas, y para que inicien al integrar controles Silverlight dentro de sus aplicaciones como DataGrid, así es un DataDrid tal y como lo conocemos pero con XAML :-).

Existen varios controles así que aquí esta la URL de la página para que los chequén.

image

 

Estos controles son creados con Silverlight 2 Beta, así que tendrán que instalarlo para poder revisarlos.

URL: http://silverlight.net/Samples/2b1/SilverlightControls/run/default.html

Categorías:Betas, silverlight, XAML

Expression Blend Service Pack1 Wow!

diciembre 4, 2007 4 comentarios

Así es como lo dice el titulo de este post, ya esta el SP1 de este producto, y mi reacción fue la de wow!, pero revisando me doy cuenta que el principal objetivo de este Service Pack es para que Blend tenga un mejor desempeño dentro del nuevo Visual Studio 2008 RTM

        expression blend

Lo puedes descargar desde Aquí, así como también revisar en este documento cuales son los principales cambios o mejoras que se hacen con este producto, el documento los encuentras en esta url: http://support.microsoft.com/kb/944809/en-us  

Descarga:http://www.microsoft.com/downloads/details.aspx?FamilyID=a07196d1-971b-4710-99c8-d3d9603ccfcb&DisplayLang=en

Aprendiendo Microsoft Expression y Silverlight

diciembre 4, 2007 2 comentarios

Aquí una serie de lugares en donde podemos aprender de manera inicial todo lo que tiene que ver con Microsoft Expression, es una Lista que me encontré en el blog de Jaime Sánchez, ya los revise y la verdad es que si son muy recomendables.

Getting Started with Expression Design
Expression Blend Beta Preview
Getting Started with Expression Blend
3D XAML Tool for next generation applications
WPF Showcase
WPF examples, code and downloads
Fundamentos de Silverlight

               microsoft expression

Les recomiendo que los revisen, de verdad están muy buenos los lugares, en especial el ultimo de Fundamentos de Silverlgiht, en donde puedes bajar los ejemplos, y ver como lo hacen con vídeos.