Una de las nuevas novedades que presenta WPF 3.5 es la capacidad de poder convertir cualquier elemento en 3D. Hasta el momento esto también se podía lograr, pero era bastante complejo ya que había que hacer uso de herramientas externas al Framework.
El elemento que hace posible esto se llama Viewport2DVisual3D. Cómo bien sugiere su nombre su utilizada es esa, pasar una vista en 2D a una vista en 3D sin que el elemento en 2D pierda ninguna de sus funcionalidades al transformarse. El esquema XAML que presenta este elemento es el siguiente:
<Viewport2DVisual3D x:Name="Test">
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Normals="" TriangleIndices="" Positions=""
TextureCoordinates=""></MeshGeometry3D>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<MaterialGroup>
<DiffuseMaterial AmbientColor="" Brush="" Color="">
</DiffuseMaterial>
<EmissiveMaterial Brush="" Color="" ></EmissiveMaterial>
<SpecularMaterial Brush="" Color=""
SpecularPower=""></SpecularMaterial>
</MaterialGroup>
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Transform>
<Transform3DGroup >
<Transform3DGroup.Children>
<MatrixTransform3D Matrix=""></MatrixTransform3D>
<RotateTransform3D CenterX="" CenterY="" CenterZ=""
Rotation="" ></RotateTransform3D>
<ScaleTransform3D CenterX="" CenterY="" CenterZ=""
ScaleX="" ScaleY="" ScaleZ="" >
</ScaleTransform3D>
<TranslateTransform3D OffsetX="" OffsetY=""
OffsetZ=""></TranslateTransform3D>
</Transform3DGroup.Children>
</Transform3DGroup>
</Viewport2DVisual3D.Transform>
<Viewport2DVisual3D.Visual>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
El elemento Geometry define la forma tendrá el objeto al convertirse en 3D. En el elemento Material se define como será la apariencia del objeto en 3D. Dentro del elemento Transform, como es de esperar, se definirán las transformaciones que sufrirá el objeto. Por último, dentro del elemento Visual se definirán los elementos que queremos pasar de 2D a 3D.
Para comprenderle mejor cómo funciona esta nueva característica de WPF 3.5 veamos un pequeño ejemplo. La idea es convertir mi tarjeta de contacto en un elemento en 3D para poder tener más versatilidad a la hora de jugar con ella en diferentes aplicaciones.
Lo primero que habrá que hacer es crear un elemento Viewport3D, en el cual definiremos la cámara que usaremos y la luz que ilumitará al objeto, además de contener la tarjeta. Así que añadiremos la siguiente cámara para este ejemplo:
<Viewport3D.Camera>
<PerspectiveCamera x:Name="Camera" FieldOfView="45"
FarPlaneDistance="100" LookDirection="0,0,-5"
NearPlaneDistance="0.1" Position="0,0,7"
UpDirection="0,1,0"/>
</Viewport3D.Camera>
Seguido añadimos la luz sobre el objeto, en este caso hemos elegido una luz ambiental blanca.
<ModelVisual3D x:Name="AmbientLightContainer">
<ModelVisual3D.Content>
<AmbientLight x:Name="AmbientLight" Color="#FFFFFFFF" />
</ModelVisual3D.Content>
</ModelVisual3D>
Una vez hecho esto, creamos un elemente ContainerUIElement3D. Dentro de este elemento se encontrará un elemento Viewport2DVisual3D que sostendrá la tarjeta. Seguidamente creamos el elemento geométrico que dará forma al objeto y sobre el que se apoyará la tarjeta.
<Viewport2DVisual3D.Visual>
<Canvas Width="226" Height="319" x:Name="Tarjeta">
<Rectangle Width="228" Height="319" Fill="#FFFFFFFF"
Stroke="#FFD9D9D9" RadiusX="5" RadiusY="5"/>
<Canvas Width="228" Height="319">
<Canvas Width="228" Height="93" Canvas.Left="1" Canvas.Top="1">
<Image Width="63" Height="63" Source="img\avatar.PNG"
Stretch="Fill" Canvas.Top="4" Canvas.Left="4"
x:Name="avatar"/>
<Image Width="10" Height="13" Source="img\msn.PNG"
Stretch="Fill" Canvas.Left="70" Canvas.Top="6.5"
x:Name="msn"/>
<TextBlock Width="135" Height="13" Text="Pedro Álvarez"
TextWrapping="Wrap" Canvas.Left="85" Canvas.Top="6.5"
FontWeight="Bold"/>
<TextBlock Width="135" Text="micuenta@hotmail.com"
Canvas.Top="22.5" Canvas.Left="85"
Style="{DynamicResource WebLink}"/>
<Path Width="226" Height="1" Fill="#FFFFFFFF" Stretch="Fill"
Stroke="#FFD9D9D9" StrokeThickness="1"
Data="M1.75,57.5 L57.25,57.5" Canvas.Left="0"
Canvas.Top="93"/>
<Path Width="9.691" Height="10.724" Fill="#60000000"
Stretch="Fill"
Data="F1 M5.4089999,-1.0079944 L5.4089999,
0.11455536 C7.8255739,0.32191041 9.691,2.3713315 9.691,
4.8564353 9.691,7.5402994 7.5152459,
9.7160006 4.8313169,9.7160006 2.1946342,
9.7160006 0.048392281,7.6162248 5.5656413E-09,
4.9969373 L1.1169847,4.9969373 C1.1695627,
6.9954443 2.814204,8.5901461 4.8313169,
8.5901461 6.8995957,8.5901461 8.5762663,
6.913517 8.5762663,4.8452888 8.5762663,
2.9773188 7.2085662,1.4287843 5.4089999,
1.2184322 L5.4089999,2.1800001 2.564991,
0.65836239 5.4089999,
-1.0079944 z"
RenderTransformOrigin="0.499,0.552" x:Name="path"
Canvas.Left="212"
Canvas.Top="4" Cursor="Hand" />
</Canvas>
<Canvas Width="228" Height="153" Canvas.Top="93">
<TextBlock Width="217" Height="13" TextWrapping="Wrap"
Canvas.Top="6.5" Canvas.Left="8" FontWeight="Bold">
<Run Language="es-es"
Text="Contact Information"/></TextBlock>
<TextBlock Width="32" Height="13" FontSize="10"
TextWrapping="Wrap" Canvas.Top="23.5" Canvas.Left="8"
Text="E-mail:" />
<TextBlock Width="176" Text="micuenta@hotmail.com"
Canvas.Top="23.5" Canvas.Left="44"
Style="{DynamicResource WebLink}"/>
<TextBlock Width="217" Height="13" FontSize="10"
TextWrapping="Wrap" Text="Address: Madrid España"
Canvas.Top="36.5" Canvas.Left="8" />
<TextBlock Width="24" Height="13" FontSize="10"
TextWrapping="Wrap" Text="Blog:" Canvas.Top="49.5"
Canvas.Left="8" RenderTransformOrigin="0.667,0.385" />
<TextBlock Width="193" Text="www.sectorsieteg.net"
Style="{DynamicResource WebLink}" Canvas.Top="49.5"
Canvas.Left="35"/>
</Canvas>
<Canvas Width="226" Height="72" Background="#FFDDE8F2"
Canvas.Left="1" Canvas.Top="246">
<TextBlock Text="View pending requests" Canvas.Left="8"
Canvas.Top="8" Style="{DynamicResource Link}"/>
<TextBlock Text="View your posts list" Canvas.Top="22"
Canvas.Left="8" Style="{DynamicResource Link}"/>
<TextBlock Text="View projects list" Canvas.Top="36"
Canvas.Left="8" Style="{DynamicResource Link}"/>
<TextBlock Text="Change your display picture" Canvas.Top="50"
Canvas.Left="8" Style="{DynamicResource Link}" />
<Path Width="226" Height="1" Fill="#FFFFFFFF" Stretch="Fill"
Stroke="#FFD9D9D9" StrokeThickness="1"
Data="M1.75,57.5 L57.25,57.5" Canvas.Left="0"
Canvas.Top="0"/>
</Canvas>
</Canvas>
</Canvas>
</Viewport2DVisual3D.Visual>
Con todo este proceso hemos conseguido que la tarjeta que en un principio era un elemento en 2D se convirtiera en un elemento en 3D con un esfuerzo relativamente pequeño.
Hace un par de semanas me compré el dominio www.sectorsieteg.net. Así que ya sabéis, no tenéis ninguna excusa para no acordaros de la dirección del blog :) y a ir poniendola en favoritos XD.
