WPF: Efeito de fade nos controles de uma janela

No WPF é possivel criar estilos para todo controle visual. Hoje quero mostrar como fazer um estilo que fará com que o controle onde ele está aplicado faça um fade ao ser carregado. Ou seja, qdo a Window abrir, seus controles irão surgir aos poucos. O style pode ser definido como a seguir:

<Page.Resources>
       <Style x:Key="FadeIn" TargetType="FrameworkElement">
           <Style.Triggers>
               <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                   <BeginStoryboard>
                       <Storyboard>
                           <DoubleAnimation
               Storyboard.TargetProperty="(FrameworkElement.Opacity)"
               From="0.0" To="1.0" Duration="0:0:3"/>
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
           </Style.Triggers>
       </Style> 
</Page.Resources>

Nota: aqui coloquei o estilo em um resource da página que estou usando, mas é totalmente indicado que se crie arquivos de resource para essas situações.

Para utilizar esse estilo:

<TextBlock Name="Message" Text="This is a test." Margin="5,5,5,5"  Style="{StaticResource FadeIn}"/>

<TextBlock Name="Message2" Text="This is a test2." Margin="5,5,5,5"  Style="{StaticResource FadeIn}"/>
<TextBox Width="100" Height="30" Margin="5,5,5,5"  Style="{StaticResource FadeIn}"/>
<Button Content="Fade" Margin="5,5,5,5"  Style="{StaticResource FadeIn}"/>

Como nosso style tem como target o tipo FrameworkElement, podemos aplicá-lo até mesmo em um stackpanel e automaticamente todo seu conteúdo sofrerá o fade:

<StackPanel Orientation="Horizontal" Grid.Row="0" VerticalAlignment="Center" Style="{StaticResource FadeIn}">
            <TextBlock Name="Message" Text="This is a test." Margin="5,5,5,5"  />
            <TextBlock Name="Message2" Text="This is a test2." Margin="5,5,5,5"  />
            <TextBox Width="100" Height="30" Margin="5,5,5,5"  />
            <Button Content="Fade" Margin="5,5,5,5" />
</StackPanel>

Fica aí a dica!

Esse post foi publicado em WPF. Bookmark o link permanente.

2 respostas para WPF: Efeito de fade nos controles de uma janela

  1. Rafael disse:

    Olá Paulo.
    Boa dica!!
    Sou iniciante em WPF e queria saber se você poderia demonstrar como aplicar este efeito em toda a aplicação?
    Obrigado.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s