CODEWITHSUNDEEP
c#wpfwindows-store-apps
Ron
Ron

Reputation: 4095

Fade in hidden element

I can fade in / out using the following code

<Storyboard x:Name="EnterStoryboard">
     <FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
     <FadeInThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>

To fadein:

EnterStoryboard.Begin();

To fadeout:

ExitStoryboard.Begin();

How can I fadein if the element is hidden from the beginning (I tried to set opacity=0 and visibility=collapsed).

EDIT:
based on AstiK solution, here's the new Storyboards (Instead of the built-in FadeInThemeAnimation / FadeOutThemeAnimation)

<Storyboard x:Name="EnterStoryboard">
    <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:00.3"  Storyboard.TargetName="Image"/>
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
    <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:00.3"  Storyboard.TargetName="Image"/>
</Storyboard>

Upvotes: 1

Views: 470

Answers (2)

AsitK
AsitK

Reputation: 673

In your original approach, you should have kept Opacity ="0" and Visibility="Visible" from the beginning. I think you are looking for something like this:

<Grid Height="50" Width="100" Background="Red" Opacity="0">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <Storyboard  >
                                    <DoubleAnimation BeginTime="00:00:00"  Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:03"/>
                                </Storyboard>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>

Upvotes: 1

thumbmunkeys
thumbmunkeys

Reputation: 20764

use this:

<Storyboard  x:Name="EnterStoryboard">
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PauseImage">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />

set to collapsed in the same way for ExitStoryboard

Upvotes: 0

Related Questions