代码之家 › 专栏 › 技术社区 › iLemming

动画WPF菜单

textblock menu animation wpf c#

iLemming · 技术社区 · 16 年前

如果我有类似的东西:

<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 S将从屏幕的右侧依次推出?

你能给我举个类似的例子吗?

我知道我可能需要使用 Canvas 而不是 StackPanel 但是我不知道如何正确地安排它们…

1 回复 | 直到 15 年前

Wonko the Sane 16 年前

下面是一个两个例子的答案。如果您真的想在StackPanel中使用文本块,我已经展示了这一点。但是,如果您实际上在寻找菜单,我也包括了这个例子。这两个例子实际上是相同的——只是得到动画变化的对象。

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