动画 WPF 菜单

Question

如果我有类似的内容：

<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>

您能否向我展示如何创建一个动画，其中 TextBlock 将从屏幕右侧逐个滚动？

你能给我看一个类似的例子吗？

我知道我可能需要使用 Canvas 而不是 StackPanel，但如何正确排列它们我不知道......

Answer 1

这是一个有两个示例的答案。如果您确实想在 StackPanel 中使用 TextBlock，我已经展示过。但是，如果您实际上正在寻找菜单，我也包含了该示例。这两个示例实际上是相同的 - 只是获得动画变化的对象。

<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>