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
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í
The Expression Web Team Blog
The Official Expression Design Support Team Blog
The team blog of the Expression Blend and Design products
Messages from your Expression Media Support Team
The team blog for Expression Encoder
.png)
.png)
.png)
.png)
.png)
.png)
Comentarios recientes