Artigos e Vídeos Sobre Silverlight -

Nesta vídeo aula de Dowhile.com.br você irá aprender a criar uma animação estática e dinâmica em Silverlight 4, utilizando o Microsoft Blend 4 e Visual Studio 2010 Beta 2, porém você poderá aplicar os mesmos conceitos utilizando o Silverlight 3 com o Blend 3 e Visual Studio 2008.

Segue o Link

Animação dinâmica

Abraços e bom divertimento,

Flávia Moreira

Neste artigo será mostrado como carregar uma dll de usercontrol dinamicamente em Silverlight. Pois bem, o motivo que me inspirou a fazer este exemplo foi um amigo meu do MSN que insistiu para ajudá-lo a carregar animações dinâmicas vindo externamente. Além disso, percebi um big fator, às vezes podemos ter uma aplicação grande, e como sabemos, o Silverlight cria o arquivo XAP, que é um Zip disfarçado, e fazemos o download deste santo arquivo. Neste ponto, você pode imaginar que, se seu arquivo Xap for grande o usuário irá ficar extremamente zangado e desistir de ver sua aplicação, não é mesmo?. Então o que devemos fazer ?

                Simplesmente devemos é quebrar nossa aplicação em partes, ou seja, criar class Library e usar algumas classes importantes para isso.  Vamos ver então:

Passo 1.

                Crie uma class Library, indo em VS: File -> New->Project. Em Project types escolha silverlight e em Templates Silverlight Class Library. Forneça um nome, tal como: Bola e pressione ok.

                Na solution Explorer, botão direito e adicione um novo item, selecione Silverlight User Control, forneça o nome de Bola.Xaml  e pressione Ok.   

                Para este demo eu criei uma animação, e chamei no meu construtor, como segue:

<UserControl x:Class=”Bola.Bola”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    Width=”400″ Height=”300″>

                <UserControl.Resources>

                               <Storyboard x:Name=”SbBola”>

                                               <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00“ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)”>

                                                               <SplineDoubleKeyFrame KeyTime=”00:00:01.2000000″ Value=”64″/>

                                               </DoubleAnimationUsingKeyFrames>

                                               <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00“ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)”>

                                                               <SplineDoubleKeyFrame KeyTime=”00:00:01.2000000″ Value=”160″/>

                                               </DoubleAnimationUsingKeyFrames>

                               </Storyboard>

                </UserControl.Resources>

    <Grid x:Name=”LayoutRoot” Background=”White”>

                <Ellipse Height=”80″ HorizontalAlignment=”Left” Margin=”24,48,0,0″ VerticalAlignment=”Top” Width=”80″ Fill=”#FF9B2B2B” Stroke=”#FF000000″ RenderTransformOrigin=”0.5,0.5″ x:Name=”ellipse”>

                               <Ellipse.RenderTransform>

                                               <TransformGroup>

                                                               <ScaleTransform/>

                                                               <SkewTransform/>

                                                               <RotateTransform/>

                                                               <TranslateTransform/>

                                               </TransformGroup>

                               </Ellipse.RenderTransform>

                </Ellipse>

    </Grid>

</UserControl>

Na parte do CodeBehind :

namespace Bola

{

    public partial class Bola : UserControl

    {

        public Bola()

        {

            InitializeComponent();

            SbBola.Begin();

        }

    }

}

Bem até ai nada demais. 

Agora compile para gerar a dll.

Passo 2

Agora, o que precisamos fazer é criar um projeto Silverlight e adicionar a dll, tal como “Bola.dll” dentro da Aplicação Asp.Net, conforme Figura 1. Eu forneci o nome para o meu projeto de LoadAnimation. 

Passo 3

O código seguinte mostra como carregar e mostrar o controle silverlight, ou seja, a dll.

Algumas explicações do código:

• Adicione o seguinte namespace, using System.Reflection, que irá permitir pegar o Assembly do objeto.
• Usar WebClient  para abrir uma leitura assíncrona da dll.
• Pegar o caminho absoluto da dll.
• Quando o download é terminado, o assembly é carregado e uma instancia do controle é criada.
• Finalmente, é adicionado dentro do Layoutroot.

[Code] 

 namespace LoadAnimation

{

    public partial class Page : UserControl

    {

        //assembly para ler a dll

        private Assembly _assembly;

        public Page()

        {

            InitializeComponent();

            Load();

        }

        private void Load()

        {

            //puxar o arquivo da Aplicacao Asp.Net, precisa ser assincrono

            WebClient down = new WebClient();

            down.OpenReadCompleted += new OpenReadCompletedEventHandler(download_OpenReadCompleted);

            string classe = “Bola.dll”;

            string absoluteUri = System.Windows.Application.Current.Host.Source.AbsoluteUri;

            string caminho = absoluteUri.Substring(0, absoluteUri.IndexOf(“ClientBin”)) + classe;

            //assincrono

            down.OpenReadAsync(new Uri(caminho, UriKind.Absolute));

        }

        //Ao terminar de ler é carregada na aplicacao

        void download_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

        {

            AssemblyPart assemblyPart = new AssemblyPart();

            _assembly = assemblyPart.Load(e.Result);

            //Bola.Bola, esta é minha classe

            UserControl control = (UserControl)_assembly.CreateInstance(“Bola.Bola”);

            LayoutRoot.Children.Add(control);

        }

    }

}

Muito obrigada,

Flávia Moreira

Silverlight - Acessando métodos em C# pelo javascript

Neste artigo, será mostrado como acessar um método em C# pelo javascript.  Inicie um projeto em Silverlight, e crie uma simples animação, como o código da Tabela 1.

Feito a animação adicione o namespace.

Using System.Windows.Browser;

 O próximo passo é adicionar dentro do construtor da classe Page, o seguinte código:

 HtmlPage.RegisterScriptableObject(”Page”, this);

Isso apenas cria um objeto (DOM), o qual permite conversar com o Javascript porém não é só isso.  Crie agora um método e adicione sobre o método um  ScriptableMember,  o qual indica que este método está acessível para ser chamado por uma função em Javascript, veja o código da Tabela 2, como deverá ficar o método para executar nossa animação por uma função em javascript. 

Agora crie uma função em Javascript, onde SilverlightControl é o plugin do Silverlight, ou seja o Id do OBJETO, que pode estar dentro da sua page em Html, ou na sua pagina Aspx. A tabela 3, Mostra a construção da função em Javascript 

 Agora, só resta chamar a função do Javascript, para isso eu adicionei um botão e usei o método Onclick e executar a aplicação. A Tabela 4 mostra  o código

 Abraços,

Flávia Moreira

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