CODEWITHSUNDEEP
visual-c++windows-store-apps
Francesco Bonizzi
Francesco Bonizzi

Reputation: 5302

Simple animations of TextBlock and Grid controls

My goal is to do simple animations (es fadeIn, fadeOut) of a TextBlock for example. How can I do it? I searched some explanation but I found them very very complicated, talking about scenarios, ecc. I would know if it can be more simple, or if someone can give me a simple explanation of the procedure.

Thanks in advance.

Upvotes: 0

Views: 285

Answers (2)

Ross Dargan
Ross Dargan

Reputation: 6021

This code should give you an idea how to do it (the duration could be reduced if it's too slow for you) This is the Xaml:

<Grid Grid.Row="1">
    <Grid.Resources>
        <Storyboard x:Name="FadeOutStoryboard">
            <!-- This animation will animate the value of the Canvas.Left property of the rectangle Scenario1Rectangle to 300. -->
            <DoubleAnimation 
        Storyboard.TargetName="txtToFade" 
        Storyboard.TargetProperty="Opacity" 
        Duration="0:0:1" 
        To="0" 
        />
        </Storyboard>
        <Storyboard x:Name="FadeInStoryboard">
            <!-- This animation will animate the value of the Canvas.Left property of the rectangle Scenario1Rectangle to 300. -->
            <DoubleAnimation 
        Storyboard.TargetName="txtToFade" 
        Storyboard.TargetProperty="Opacity" 
        Duration="0:0:1" 
        To="1" 
        />
        </Storyboard>
    </Grid.Resources>
    <StackPanel>
        <TextBox Name="txtToFade"></TextBox>
    </StackPanel>
</Grid>

And in the code behind this is how you execute the storyboards:-

 FadeOutStoryboard->Begin();

or

 FadeInStoryboard->Begin();

You can use the VisualStateManager to control the animations based on events (such as mouse over etc).

Upvotes: 1

Raman Sharma
Raman Sharma

Reputation: 4581

Have you tried the animation sample at this location?

http://code.msdn.microsoft.com/windowsapps/Animations-f758de70

Upvotes: 0

Related Questions