Animated WPF Menu

Question

If I have something like:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="FIRST"  Margin="5" VerticalAlignment="Center" />
    <TextBlock Text="SECOND" Margin="5" VerticalAlignment="Center" />
    <TextBlock Text="THIRD"  Margin="5" VerticalAlignment="Center" />
    <TextBlock Text="FOURTH" Margin="5" VerticalAlignment="Center" />
    <TextBlock Text="FIFTH"  Margin="5" VerticalAlignment="Center" />
</StackPanel>

Could you please show me how can I create an animation where TextBlocks will roll out from the right side of the screen, each after another?

Could you show me a similar example?

I know that I probably gonna need to use Canvas instead of StackPanel, but how to arrange them properly then I don't know...

Answer 1

Here is a two-example answer. If you truly want to use TextBlocks in a StackPanel, I've shown that. However, if you are actually looking for a menu, I've included that example as well. Both examples are really the same - just the object that gets animated changes.

<DockPanel HorizontalAlignment="Stretch" 
           VerticalAlignment="Stretch" 
           ClipToBounds="True">
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
        <TextBlock Text="FIRST"  Margin="5" VerticalAlignment="Center" />
        <TextBlock Text="SECOND" Margin="5" VerticalAlignment="Center" />
        <TextBlock Text="THIRD"  Margin="5" VerticalAlignment="Center" />
        <TextBlock Text="FOURTH" Margin="5" VerticalAlignment="Center" />
        <TextBlock Text="FIFTH"  Margin="5" VerticalAlignment="Center" />
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="translateTransform"
                                X="{Binding Path=ActualWidth,
                                            RelativeSource={RelativeSource FindAncestor,
                                                                           AncestorType={x:Type DockPanel}}}" />
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="translateTransform"
                                             Storyboard.TargetProperty="(TranslateTransform.X)"
                                             To="0"
                                             BeginTime="0:0:0.5"
                                             AutoReverse="False"
                                             Duration="0:0:2.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
    </StackPanel>

    <Menu DockPanel.Dock="Top">
        <MenuItem Header="First" />
        <MenuItem Header="Second" />
        <MenuItem Header="Third" />
        <MenuItem Header="Fourth" />
        <MenuItem Header="Fifth" />
        <Menu.RenderTransform>
            <TranslateTransform x:Name="translateTransform2"
                                X="{Binding Path=ActualWidth,
                                            RelativeSource={RelativeSource FindAncestor,
                                                                           AncestorType={x:Type DockPanel}}}" />
        </Menu.RenderTransform>
        <Menu.Triggers>
            <EventTrigger RoutedEvent="Menu.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="translateTransform2"
                                             Storyboard.TargetProperty="(TranslateTransform.X)"
                                             To="0"
                                             BeginTime="0:0:3.5"
                                             AutoReverse="False"
                                             Duration="0:0:2.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Menu.Triggers>
    </Menu>

    <Grid>
        <TextBlock FontSize="25"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="Content Goes Here" />
    </Grid>

</DockPanel>