How to create an animated message banner in WPF

Question

Any pointers on how would I create one of those (usually yellow) popup animated banners used in web apps (like stackoverflow FAQ)?

Answer 1

I really want to give the answer "use jQuery", but since this is WPF, I suppose something better would be needed. To start out, I'd define where in your xaml file the bar would live. I'd do it something like this:

<Window ...>
    <Grid>
        <Grid x:Name="DropDownBar" HorizontalAlignment="Stretch" Height="0">
            <Rectangle Fill="Orange" />
        </Grid>

        <!-- rest of your content here -->
    </Grid>
</Window>

To get that nice animation effect, something like:

<Window.Resources>
    <Storyboard x:Key="LoadAnimation" Duration="0:0:3">
        <DoubleAnimation Storyboard.TargetName="DropDownBar" Storyboard.TargetProperty="Height" From="0" To="30" />
    </Storyboard>
</Window.Resources>

And then you just need to trigger it when the page loads:

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard Storyboard="{StaticResource LoadAnimation}" />
    </EventTrigger>
</Window.Triggers>

I typed this up in this box, so there's bound to be a few typos here and there. But that's basically how i'd do it. Another alternative is to fix the height, and move the margin from -height to 0.