Silverlight 3 – Formulário com perspectiva 3D

AGRADEÇA AO AUTOR COMPARTILHE!

Para criar uma perspectiva 3D de um formulário vamos usar o PlaneProjection, com ele podemos alterar os eixos X, Y e Z de um elemento XAML.

Vamos criar um projeto Silverlight no Visual Studio 2008 chamado de PerspectivaApp e inserir alguns elementos na tela, para isso crie o StackPanel abaixo do layout Grid que aparece como padrão no projeto:

<StackPanel x:Name=”StackPanel_frente”
Background=”Gainsboro”
Margin=”10,90″
Width=”190″>

<StackPanel.Projection>
<PlaneProjection RotationX=”-30″
RotationY=”-35″
RotationZ=”15″></PlaneProjection>
</StackPanel.Projection>

<TextBlock Text=”Destino”
TextAlignment=”Center”
Margin=”3″ ></TextBlock>

<TextBox x:Name=”txtDestino”
Margin=”10″></TextBox>

<Button x:Name=”btnProcessar”
Content=”Processar”
Margin=”10″>
</Button>

</StackPanel>

Temos um StackPanel com o nome de StackPanel_frente com as propriedades Background definindo a cor Gainsboro que vai pintar o fundo do StackPanel com um tipo de cinza próximo ao padrão mais utilizado em formulários. Vamos criar uma margem no StackPanel com a propriedade Margin de 10,90 e para definir o tamanho iremos informar o Width com o valor de 190.

Logo abaixo temos o <StackPanel.Projection>, que permite criar uma perspectiva 3D para o StackPanel. Diversos elementos XAML podem utilizar a propriedade Projection, como por exemplo, os objetos Button, ComboBox e Image. Nesse exemplo vou mudar a perspectiva do StackPanel.

Em <PlaneProjection> definiremos a rotação dos eixos X, Y e Z para -30, -35 e 15 respectivamente. Com a alteração desses eixos, o StackPanel passa estar em um espaço 3D. Mudando o eixo para diversos valores podemos ter infinitas possibilidades de apresentar um elemento com outra perspectiva.

Adicione um TextBlock, TextBox e Button, o resultado pode ser visto na Figura abaixo:

plane
Temos o formulário com uma perspectiva 3D após modificarmos os eixos do elemento StackPanel, alterando  RotationX, RotationY e RotationZ que servem para especificar a rotação dos ângulos de um elemento XAML.

O Formulário funciona normalmente nessa perspectiva, nele podemos digitar uma informação no TextBox que o texto vai ficar na mesma perspectiva. Veja como ficou fácil criar layouts visualmente mais sofisticados com esse recurso, pois podemos ter vários elementos com perspectivas diferentes dentro do mesmo ambiente.

Referência : www.silverlight.net.br

AGRADEÇA AO AUTOR COMPARTILHE!

Alexandre Tadashi

Mais artigos deste autor »

Trabalho com desenvolvimento de softwares com tecnologia .NET, no momento estou estudando sobre os padrões de projetos, Windows Presentation Foundation, Windows Phone 7, Silverlight 4, Expression Blend 4 e tecnologias Microsoft em geral.

Blog: http://www.silverlightexperience.blogspot.com/
Twitter: @atsh2


2 Comentários

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">