|
|
 |
| Figura 01 - Novo projeto |
A segunda tela apresentada é o ambiente de desenvolvimento do Blend, conforme pode ser visualizado na Figura 02.
 |
| Figura 02 - Ambiente de Desenvolvimento |
Para editar, apenas selecione os objetos que estão na barra de ferramentas e desenhe dentro da Artboard. O painel Properties é usado para definir as propriedades dos objetos e para criar eventos. O painel Project possui a mesma estrutura do Visual Studio. No painel Objects and Timeline é possível ver a hierarquia dos objetos conforme são adicionados na Artboard, e um botão para criar as animações. Já na parte direita da Artboard, você pode ver as opções Design, XAML e Split.
O próximo passo deste tutorial é criar uma simples animação. Selecione o objeto Ellipse na barra de ferramentas ou pressione L. Para desenhar uma ellipse de forma simétrica pressione Shift. No painel Properties -> Brushes, selecione o atributo Fill e escolha uma cor para o objeto Ellipse, conforme você pode visualizar na Figura 03.
 |
| Figura 03 - Criação da animação - Passo 1 |
Em Objects and Timeline, pressione o botão com sinal de + para criar uma animação, a qual utiliza a classe Storyboard. Ao aparecer à caixa de dialogo “Create Storyboard Resource” forneça o nome para a animação de sbElipse.
|
Nota: Normalmente, é usual utilizar prefixo para identificar objetos dentro de um projeto, neste caso usamos sb. |
O nome da animação permite que exista uma interação entre o Xaml e a linguagem no code-behind, que neste exemplo é C#. As animações criadas no Blend são consideradas: Animações estáticas.
Para a nossa animação será utilizado o atributo opacity que irá variar na linha do tempo de 100% para 0% e depois para 100% novamente. Então na linha do tempo posicione o playhead, a linha amarela vertical, para 1s na linha do tempo. Pressione Record Keyframe, o qual adiciona um keyframe na linha do tempo, e então mude a propriedade opacity para 0%. Novamente posicione o playhead para 2s e adicione o Keyframe e mude a propriedade opacity para 100%. A animação deverá estar como mostrada na Figura 04.
 |
| Figura 04 - Criação da animação - Passo |
Agora, adicione no code-behind da mainpage.xaml.cs, o método Begin do Storyboard, o qual executa a animação conforme mostrado na Listagem 01.
|
namespace IntroducaoBlend { public partial class MainPage : UserControl { public MainPage() { // Required to initialize variables InitializeComponent(); SbElipse.Begin(); } } } |
Listagem 01 – Método Begin
Pressione F5 para executar a animação no Navegador ou pressione play para testar no Blend.
Obrigada e até o próximo artigo.