Анимированное меню WPF - PullRequest
Новая
       11

Анимированное меню WPF

1 голос
/ 23 июля 2010

Если у меня есть что-то вроде: 

<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 Ответ

5 голосов
/ 29 июля 2010

Вот ответ из двух примеров.Если вы действительно хотите использовать TextBlocks в 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>
...