Manipulating the opacity of an object(control)

Question

Example: At the push of a button I’ll display a painel editing only its visibility, it works, but is without any effect, is a dry transition.

Then I had the idea of pressing the button to display the panel with 0 opacity and then gradually incrementing it. But as the smartphone processor is fast you can’t even see the effect, so I thought about deploying a sleep, the result was that pressing the button takes about 2 seconds to display the panel, but displays it dry, no transition, the Sleep just took the action of the button.

Code:

private void Button_Click(object sender, RoutedEventArgs e)
{ // Ao apertar o botão
    if (painel.Visibility == System.Windows.Visibility.Visible)
    { //olha se o painel já está visivel
        int cont = 200;
        while (cont > 0)
        { // vai decrementando, e diminuindo sua opacidade
            painel.Opacity = cont * 0.5;
            System.Threading.Thread.Sleep(2); //tentativa de retardar um pouco
            if (cont == 1) // quando a opacidade for 1 eu irei ocultar o painel
                painel.Visibility = System.Windows.Visibility.Collapsed;
            cont -= 1;
        }
    }  
    else
    { // se ao apertao do botão ele estiver oculto
        int cont = 0;
        painel.Visibility = System.Windows.Visibility.Visible; //torna ele visível
        painel.Opacity = 0; // deixa com opacidade 0
        while (cont < 100)
        { //vai aumentando a opacidade ate ela ser 99 
            painel.Opacity = cont * 0.5;
            System.Threading.Thread.Sleep(2); / tentatida de retardar
            cont += 1;
        }
    }     
}

As I said, with the sleep, When I press the button it waits a couple of seconds and displays the panel without going controlling the opacity, just displays it, without 'transition'. I’m implanting this into an app, where the painel is a StackPanel. It’s an app for Windows Phone 8.1 with Silverlight.

Answer 1

Well, then with the help of @ramaral:

.page xaml, part of the panel

<!-- Uma 'div'. -->
<StackPanel Grid.Row="1">

    <StackPanel.Resources>
        <!-- Animação para ocultar o painel -->
        <Storyboard x:Name="ocultar">
            <!-- Uma animação Double, pois opacidade pe float, determino aqui onde vou aplicar,
             quando começa, quando termina e gero um método para quando ele é completada. -->
            <DoubleAnimation Completed="DoubleAnimation_Completed"
                Storyboard.TargetName="painel"
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0"  Duration="0:0:1" />
        </Storyboard>

        <!-- Animação para mostrar o painel -->
        <Storyboard x:Name="mostrar">
        <!-- Mesma coida do anterior, mas aqui estou aumentando a opacidade, e não tenho método
        de complete, pois torno o painel visível antes de executar a animação -->
            <DoubleAnimation x:Name="aMostrar" 
            Storyboard.TargetName="painel"
            Storyboard.TargetProperty="Opacity"
            From="0.0" To="1.0" Duration="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <!-- Painel -->
    <StackPanel Grid.Row="1" Height="700" Name="painel" Background="Crimson"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Width="400"/>
</StackPanel>

.Cs

private void Button_Click(object sender, RoutedEventArgs e)
{ // Ao pressionar do botão
    if (painel.Visibility == System.Windows.Visibility.Visible)
    { //se o painel estiver visivel ele chama a animação p/ ocultar
        ocultar.Begin();
    }  
    else
    { //se o painel estiver oculto, ele torna visivel e chama a animação de mostrar
        painel.Visibility = System.Windows.Visibility.Visible;
        mostrar.Begin();
    }     
}

private void DoubleAnimation_Completed(object sender, EventArgs e)
{ //metodo chamado quando a anicação de ocultar termina, ele apenas deixa o painel oculto
    painel.Visibility = System.Windows.Visibility.Collapsed;
}