Использование Blend для установки таймера в ActionState / Transition с Silverlight 4 - PullRequest
Новая
       8

Использование Blend для установки таймера в ActionState / Transition с Silverlight 4

0 голосов
/ 17 августа 2010

Я разработчик, который недавно загрузил пробную версию Blend, и я пытаюсь справиться с тем, чтобы не использовать CodeBehind для выполнения каких-либо задач - это очень круто, но у него довольно крутая кривая обучения!началось с этих здесь и реализовало некоторую простую анимацию в меню, как в примере с моим таймером покера .То, что я хочу сделать сейчас, это сделать, чтобы переход меню начинался только через 20 секунд - т.е.так, чтобы меню слева, которое исчезает при MouseLeave (см. ссылку выше) - делает это только через 20 секунд после того, как мышь ушла (и отменяется, если они снова MouseOver).Это заставит меню остаться дольше, если они случайно отключатся.

Я уверен, что это действительно просто в Blend, но я изо всех сил пытаюсь найти какую-нибудь приличную документацию - я с удовольствием RTFM - мне просто нужнознаю, с чего начать поиск (я гуглил «Смешать таймерную операцию» без радости).

Спасибо за любые советы!

Ответы [ 2 ]

1 голос
/ 18 августа 2010

Если я правильно понимаю вашу проблему:

  • Когда вы получаете событие Mouse Enter над боковым меню, оно анимируется (например, «ShowMenuStoryboard»).
  • Затем выВы хотите, чтобы «HideMenuStoryboard» снова сдвинул меню, но только начал его изменения через 20 секунд после его запуска (событием MouseLeave), но его необходимо отменить, если сработает последующее событие Mouse Enter.
  • youхочу сделать все это без логики кода.

Есть 2 вещи, которые нужно сделать.

  1. Убедитесь, что раскадровки указывают только значения конечного состояния (без начальных состояний) и

  2. Вам просто нужно установить BeginTime = "0: 0: 20" вXAML для HideStoryboard например

Я не нашел нигде свойства для BeginTime в редакторе наложения Expression, поэтому это нужно сделать в представлении XAML.В свойствах отображаются только AutoReverse и RepeatBehavior.

В этом типе анимации есть внутренняя проблема, но она должна быть в порядке в вашем примере.Длительность времени фиксирована, поэтому, если вы запускаете противоположную анимацию во время ее запуска, она будет на самом деле медленнее анимироваться до своей конечной позиции, поскольку для перехода от конечной позиции к конечной позиции требуется фиксированное время.

Надеюсь, это поможет.Полный пример MainPage.XAML с меню memu приведен ниже.Это требует только 2 раскадровок и режимов управления раскадровкой: 

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Storyboard x:Name="ShowMenuStoryboard">
            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="HideMenuStoryboard" BeginTime="0:0:20">
            <DoubleAnimation Duration="0:0:0.5" To="-100" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel x:Name="stackPanel" HorizontalAlignment="Left" Orientation="Vertical" Width="150" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5" Background="#FF646CE7">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeave">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource HideMenuStoryboard}"/>
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseEnter">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource ShowMenuStoryboard}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <StackPanel.RenderTransform>
                <CompositeTransform TranslateX="-100"/>
            </StackPanel.RenderTransform>
            <StackPanel.Projection>
                <PlaneProjection/>
            </StackPanel.Projection>
            <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
            <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
            <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
            <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
            <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
        </StackPanel>
    </Grid>
</UserControl>
0 голосов
/ 18 августа 2010

Вы можете добавить «фальшивую» игровую доску, которая служит триггером для второй анимации.Вам понадобятся две доски рассказов.Поддельные и HideMenu.Вам нужно ControlStoryboardActions, чтобы запустить каждый из них.Первый из них будет иметь триггер события (Mouse out).Первый будет иметь StoryboardCompleterTrigger, связанный с «ложной» анимацией.

...