Задать вопрос Войти Регистрация
Авто и мото Бизнес и финансы Видеоигры Животные Здоровье и гигиена Знакомства и любовь Интернет Кино Компьютерные технологии Кулинария Мобильные технологии Мода и красота Музыка Наука и философия Недвижимость Образование Праздники Природа Работа и карьера Семья и дети Советы и Лайфаки Спорт Строительство Товары и услуги Туризм и путешествия
Категории

Как добавить анимацию переходов (transition animations) между страницами в XAML?

Пользователь

от millie , в категории: Компьютерные технологии , год назад

Как добавить анимацию переходов (transition animations) между страницами в XAML?

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

Пользователь

от kathryn , год назад

@millie 

Для добавления анимации переходов между страницами в XAML можно использовать элемент TransitioningContentControl из библиотеки контролов MahApps.Metro.

  1. Установите пакет MahApps.Metro в свой проект.
  2. В разметке страницы замените элемент UserControl на TransitioningContentControl.
  3. Установите свойство Transition на нужный тип анимации перехода (например, Slide).
  4. Добавьте нужные анимации в ресурсы (в примере ниже анимации для SlideLeftIn и SlideLeftOut).


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<controls:TransitioningContentControl Transition="Slide">
    <controls:TransitioningContentControl.Resources>
        <Storyboard x:Key="SlideLeftIn">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="ContentPresenter">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="ContentPresenter">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="SlideLeftOut">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                Storyboard.TargetName="ContentPresenter">
                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                Storyboard.TargetName="ContentPresenter">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-250" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </controls:TransitioningContentControl.Resources>
    <controls:TransitioningContentControl.TransitioningContent>
        <ContentPresenter Opacity="0">
            <ContentPresenter.RenderTransform>
                <CompositeTransform TranslateX="-250" />
            </ContentPresenter.RenderTransform>
        </ContentPresenter>
    </controls:TransitioningContentControl.TransitioningContent>
    <Grid>
        <!-- Контент страницы здесь -->
    </Grid>
</controls:TransitioningContentControl>


Похожие обсуждения:

Как добавить анимацию к элементам в XAML?
Как добавить изображение (image) в XAML?
Как добавить вкладки (tab control) в XAML?
Как добавить элементы меню (menu items) в XAML?
Как добавить событие (event) к элементу управления в XAML?
Как добавить кнопку (button) с обработчиком события нажатия в XAML?