Neste artigo será mostrado como criar animação dinâmica para um simples menu com imagens, porém não é o objetivo deste artigo mostrar a criação do design, apenas será mostrado a codificação para criar a animação dinâmica do menu. Esta animação consiste apenas em usar o fator de escala para as imagens, ou seja, quando o mouse estiver sobre a imagem, o fator de escala será mudado e quando o mouse não estiver sobre a imagem, o fator de escala volta para seu estado inicial.  

A Figura 1.0, mostra o menu com as imagens.

Figura 1.0

 Inicie um projeto no Microsoft Blend 2 ou no Visual Studio 2008.  Adicione algumas imagens no seu projeto e adicione o controle do tipo IMAGE e seta as propriedades: Name, Height, Width, Source  e em Transform, mude a escala, deixe da forma desejada.

Obs: Você deverá deixar a propriedade Transform setada no código, ou irá dar um erro.  Segue o Exemplo, de como deverá ficar  o controle IMAGE na parte do Xaml:

 <Image Height=”38″ Width=”38″ Source=”icoHome1.png” Stretch=”Fill” Canvas.Top=”8″ Canvas.Left=”72″ RenderTransformOrigin=”0.5,0.5″ x:Name=”imgHome”>

<Image.RenderTransform>

 <TransformGroup>

<ScaleTransform ScaleX=”1″ ScaleY=”1″/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Image.RenderTransform>

</Image>

Eu adicionei 4 imagens em 3D do tipo png .

Com todas as suas imagens devidamente configuradas, na parte do codeBehind, iremos adicionar a declaração dos eventos do controle Image  dentro do construtor da classe  page.xaml.cs, Exemplo: 

  public ucMenuPrincipal()

                               {

                                               // Required to initialize variables

                                               InitializeComponent();

            SbAnimacaoDowhile();

            imgHome.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgContato.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgNewsLetter.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgVideos.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgHome.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgContato.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgNewsLetter.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgVideos.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            }

Repare que os eventos MouseEnter de todos os controles usam o mesmo método, o mesmo processo acontece para o MouseLeave.  

 Animação dinâmica:

Crie os objetos:

 private bool _flagMenu = false;  

SplineDoubleKeyFrame _splineIn; 

SplineDoubleKeyFrame _splineOut;

 Depois, o primeiro passo é criar  um método para o DoubleAnimationUsingKeyFrames.

Note no método que está sendo passado dois parâmetros: O primeiro passa qual objeto irá sofrer a animação, neste caso, o Controle do Tipo Image, e  o segundo qual propriedade será executada, ou seja a escala. 

    public DoubleAnimationUsingKeyFrames GetAnimacao(DependencyObject img, string propertyPath)

        {

            DoubleAnimationUsingKeyFrames _dbAnimation = new DoubleAnimationUsingKeyFrames();

            _dbAnimation.BeginTime = TimeSpan.FromSeconds(0);

            _splineIn = new SplineDoubleKeyFrame();

            _splineOut = new SplineDoubleKeyFrame();

            _splineIn.KeyTime = TimeSpan.FromSeconds(0.4);

            _splineOut.KeyTime = TimeSpan.FromSeconds(0.4);

                if (!_flagMenu)

                {

                _splineIn.Value = 1.5;

                _dbAnimation.KeyFrames.Add(_splineIn);

                 }

                else

                {

                    _splineOut.Value = 1;

                    _dbAnimation.KeyFrames.Add(_splineOut);

                }

            Storyboard.SetTarget(_dbAnimation, img);

            Storyboard.SetTargetProperty(_dbAnimation, new PropertyPath(propertyPath, new object[0]));

            return _dbAnimation;

        }

Ciando a Storyboard

public void CriaAnimacao(DependencyObject image)

        {

            Storyboard _SbMenu = new Storyboard();

            DoubleAnimationUsingKeyFrames scaleX = GetAnimacao(image, “(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)”);

            DoubleAnimationUsingKeyFrames scaleY = GetAnimacao(image, “(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)”);

            _SbMenu.Children.Add(scaleX);

            _SbMenu.Children.Add(scaleY);

            _SbMenu.Begin();

        }

Os eventos

private void imagem_MouseEnter(object sender, MouseEventArgs e)

        {

            CriaAnimacao((Image)sender);

            _flagMenu = true;

        }

        void imagem_MouseLeave(object sender, MouseEventArgs e)

        {

            CriaAnimacao((Image)sender);

            _flagMenu = false;

        }

Abraços

Flávia Moreira 

Neste pequeno artigo será mostrado como chamar uma função em javascript em Silverlight.

 Adicione na sua pagina o script abaixo:

Eu tentei fechar no Firefox, e não consegui.

Agora, dentro da sua Page.xaml.cs, adicione o namespace:

using System.Windows.Browser;

Dentro do Xaml, adicione um botão, e no evento use:

  HtmlPage.Window.Invoke(“CloseWindow”);

Muito simples e prático chamar uma função em Javascript.

Obrigada,

Flávia Moreira