Как анимировать объект в Центре разметки в Silverlight - PullRequest
Новая
       12

Как анимировать объект в Центре разметки в Silverlight

0 голосов
/ 01 марта 2010

Привет и спасибо за чтение.

Я создаю простую страницу Silverlight и испытываю трудности с анимацией элементов по центру экрана.

Пример ...

MouseLeftButtonDown> анимирует прямоугольник к центру экрана.

Есть ли способ сделать это?

1 Ответ

1 голос
/ 02 марта 2010

Способ, которым я справляюсь с этим в моем приложении MVVM, заключается в привязке расположения прямоугольника к объекту ViewModel. Когда эта позиция обновляется, прямоугольник перемещается. Затем я привязал поведение к событию LayoutUpdated самого прямоугольника, который использует преобразование translate, чтобы переместить элемент обратно в его исходное местоположение, а затем запускает анимацию по этому преобразованию translate, чтобы переместить значения X и Y до 0, поэтому элемент оживляет до своего «реального» местоположения. 

                <Border Width="{Binding PositionRectangle.Width}" 
                        Height="{Binding PositionRectangle.Height}" 
                        BorderBrush="{Binding OptionColorBrush}" 
                        BorderThickness="3">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform/>
                            <ScaleTransform/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LayoutUpdated">
                            <ic:AnimationTriggerAction LocationPropertyName="Location"/>
                        </i:EventTrigger>
                        <i:EventTrigger EventName="Loaded">
                            <ic:AnimationTriggerAction LocationPropertyName="Location"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <TextBlock Text="{Binding Name}" 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                               TextWrapping="Wrap"/>
                </Border>

Используемый мной триггер (AnimationTriggerAction) был свернут вручную, поскольку я хотел, чтобы он также делал несколько других вещей (например, он обрабатывает анимацию масштабирования над элементом при его первой загрузке, поэтому он масштабируется). само по себе существует), но здесь ничего сложного. Он спускается с TargetedTriggerAction<FrameworkElement> и отслеживает предыдущее местоположение объекта в свойстве зависимостей этого элемента. Он создает раскадровку, если она не существует, и добавляет к ней 2 DoubleAnimation s, чтобы запустить свойства X и Y TranslateTransform.

Положительные моменты этого подхода: Не нужно обрабатывать события в .xaml.cs для запуска анимации. Все это происходит из событий LayoutUpdated и Loaded. Факт появления анимации полностью скрыт от ViewModel.

Отрицательные баллы: При появлении объекта возникает небольшое мерцание, а затем устанавливается преобразование преобразования, поэтому оно возвращается к исходному положению до начала анимации. Это очень тонко, но оно есть.

Это еще не готово к публичному потреблению, но мое подтверждение концепции находится здесь: http://www.benvonhandorf.com/Apps/WOM/WheelOfMeat.html Введите имя опции в текстовое поле и нажмите Enter, и вы увидите, что опция исчезает в существовании , Введите еще несколько, и вы увидите, как они перестроились вокруг колеса.

...