Changing opacity of a Grid creating a “fade in” effect?

Question

I'm having some issues on creating a fade in effect of a grid.

I want a grid coming out after a click, is this possible?

Thanks!

Answer 1

You can use a Storyboard and animate the Opacity property to produce a Fade In effect, the following thread covers the code required :-

http://social.msdn.microsoft.com/Forums/is/windowsphone7series/thread/a8e05145-364d-412c-8fb5-faf65e80344e

Answer 2

A tad too late to the party, as I just wrote pretty much the same as Hermit Dave, but maybe it helps to contribute to an even better understanding:

Another way is, setting your Storyboard items in XAML view, which, in my opinion, makes it a little cleaner than pure C# code. For this, you can declare within a <Grid.Resources> your storyboard, like so:

<!-- Animates the a control's height. -->
<Grid.Resources>
    <Storyboard x:Name="Animation_Collapse">
        <DoubleAnimation Storyboard.TargetName="Name_Of_Control"
                             Storyboard.TargetProperty="Height"
                             From="200" To="0" Duration="0:0:0.3" />
    </Storyboard>
    <Storyboard x:Name="Animation_Expand">
        <DoubleAnimation Storyboard.TargetName="Name_Of_Control"
                             Storyboard.TargetProperty="Height"
                             From="0" To="200" Duration="0:0:0.3" />
    </Storyboard>
</Grid.Resources>

Here, you have declared 2 animations, for collapsing and expanding the targetted control. You can also set a lot of attributes, like start and target values (From, To) and Duration (here it takes 300ms).

In your .cs file, you can execute this by simply calling the method

Animation_Collapse.Begin();
or Animation_Expand.Begin();

Just put that into your button_click eventhandler for example. The storyboard is in the System.Windows.Media.Animation namespace.

Answer 3

same answer as Paul but i had it open in a project :P took me a while to understand storyboard to give you a sample

<Storyboard x:Name="fadeText">
    <DoubleAnimation Storyboard.TargetName="tbData"
        Storyboard.TargetProperty="Opacity" From="1.0"
        To="0" Duration="0:0:1" AutoReverse="True" />

    <DoubleAnimation Storyboard.TargetName="btnReset"
        Storyboard.TargetProperty="Opacity" From="1.0"
        To="0" Duration="0:0:1" AutoReverse="True" />
</Storyboard>