WPF: Добавить анимацию через встроенный в элемент стиль?

Question

[Никита Траторов]

Вопрос к знатокам.

У меня есть Expander.

Я добавил к нему стиль, в котором определил анимацию для свертывания/развертывания содержимого (Content):

<Expander>
...
<Expander.Style>
	<Style>
		<Setter Property="Expander.BorderBrush" Value="LightBlue" />
		<Setter Property="Expander.BorderThickness" Value="1" />
		<Style.Triggers>
			<Trigger Property="Expander.IsExpanded" Value="True">
				<Trigger.EnterActions>
					<BeginStoryboard>
						<Storyboard>
							<DoubleAnimation From="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
						</Storyboard>
					</BeginStoryboard>
				</Trigger.EnterActions>
				<Trigger.ExitActions>
					<BeginStoryboard>
						<Storyboard>
							<DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
						</Storyboard>
					</BeginStoryboard>
				</Trigger.ExitActions>
			</Trigger>
		</Style.Triggers>
	</Style>
</Expander.Style>
</Expander>

Содержимое плавно разворачивается.

Теперь о проблемах:

1. Содержимое плавно не сворачивается.

2. Хочется чтобы стрелочка на кнопке крутилась на 180 градусов, согласно примеру:

<ControlTemplate.Triggers>
    <!-- Animate arrow when toggled-->
    <Trigger Property="IsChecked"
             Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Arrow"
                         Storyboard.TargetProperty=
                           "(Path.RenderTransform).(RotateTransform.Angle)"
                         To="180"
                         Duration="0:0:0.4"/>
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Arrow"
                         Storyboard.TargetProperty=
                           "(Path.RenderTransform).(RotateTransform.Angle)"
                         To="0"
                         Duration="0:0:0.4"/>
                </Storyboard>
            </BeginStoryboard>
        </Trigger.ExitActions>
    </Trigger>
</ControlTemplate.Triggers>

т.е. изменить первоначальный код на этот:

<Expander.Style>
    <Style>
        <Setter Property="Expander.BorderBrush" Value="LightBlue" />
        <Setter Property="Expander.BorderThickness" Value="1" />
        <Style.Triggers>
            <Trigger Property="Expander.IsExpanded" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                            <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" To="180" Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                            <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" To="0" Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Expander.Style>

Но, как вы понимаете. Этот код не работает. Подскажите пожалуйста, что здесь не так?


Навеяно этой статьей.

Answer 1

[Paulskit]

Лучше сразу делать правильно.
1) Ваш подход с Content.Height неверен. Если Height не задан, то есть равен NaN, получим RuntimeException.
2) Вместо того, чтобы писать стиль внутрь элемента сохраните его в Resources для данного окна/страницы.
3) Переопределите ContentTemplate, чтобы анимация работала для всех случаев.

Теперь о том, почему не работает.
Изначально всё работает таким образом. Свойство Visibility нашего ContentPresenter установлено в значение Collapsed. Раскрытие производится следующим триггером.

<Trigger Property="IsExpanded" Value="true">
   <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</Trigger>

Для того, чтобы исправить ситуацию немного перепишем ControlTemplate.
Для начала удалим свойство Visibility.

После этого, добавим внутрь следующий блок:

<ContentPresenter.LayoutTransform>
   <ScaleTransform ScaleX="1" ScaleY="0"/>
</ContentPresenter.LayoutTransform>

И в завершении, заменим вышеуказанный триггер на эти:

<EventTrigger RoutedEvent="Expander.Expanded">
   <BeginStoryboard>
      <Storyboard Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="LayoutTransform.ScaleY">
          <DoubleAnimation To="1" Duration="0:0:0.2"/>
      </Storyboard>
   </BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
   <BeginStoryboard>
      <Storyboard Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="LayoutTransform.ScaleY">
          <DoubleAnimation To="0" Duration="0:0:0.2"/>
      </Storyboard>
   </BeginStoryboard>
</EventTrigger>

Пример:
pastebin.com/FmGAVbA5

Comments

[Никита Траторов]

Я искал как раз подобное решение: переопределение поведения, с сохранением исходного дизайна. Спасибо большое.
Я попробовал его применить и он прекрасно работает. Лишь одно НО, не дает мне покоя:
при использовании масштабирования, происходит очень некрасивое растягивание содержимого Expander. Поэтому я искал решение, с применением анимации к высоте его контента. Возможно Вы могли бы подсказать, можно ли использовать здесь PrefferedHeight.

А применяю я его сразу к элементу, т.к. анимация требуется только в нем. Хотя можно использовать определение стиля через указание его KEY в элементе.

[Paulskit]

Не уверен, что сработает, впрочем можете попробовать. Есть вариант с TranslateTransform, если не нравится растягивание. В этом случае компоненты просто будут уезжать в одну из сторон без изменения размера. Использовать в сочетании с ClipToBounds=«True».
Можете попробовать, также, изменение Opacity как вариант для анимации.
На самом деле, вариантов много. Главное — понимать, что именно Вы хотите добиться.

[Никита Траторов]

Вот этого: http://www.codeproject.com/Articles/248112/Templating-WPF-Expander-Control
вариант «Reveal» Content

Answer 2

[renny]

1) Вы создали триггер только для разворота, поэтому и сворачиваеться без анимации.

Создайте триггер и для
и будет вам счастье

2) у «стрелочки» создайте пустую трансформацию (те без значений) и все заработает
<Стрелочка RenderTransformOrigin=«0.5,0.5»>
<Стрелочка .RenderTransform>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform />

</Стрелочка .RenderTransform>
</Стрелочка >

Comments

[renny]

1) * откусилось почему-то часть комментария
Создайте триггер и для Property=«Expander.IsExpanded» Value=«False»

[Никита Траторов]

Спасибо большое за ответ, Вы навели меня на правильный путь. Я написал следующее:

                               <Trigger Property="Expander.IsExpanded" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>
                                <Trigger Property="Expander.IsExpanded" Value="False">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>

теперь он ни сворачивается и не разворачивается вообще. Я подумал и попробовал изменить момент начала анимации:

<Trigger Property="Expander.IsExpanded" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>
                                <Trigger Property="Expander.IsExpanded" Value="False">
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>

теперь, в первый раз, когда я его разворачиваю — он плавно разворачивается и сразу сворачивается. А дальше снова ни туда ни сюда.
Я попробовал разные комбинации EnterAction и ExitAction, но успеха не добился. Очевидно что анимации запускаются одна за другой, а дальше возникает какая-то ошибка или зацикленность, хотя программа не падает.

[Никита Траторов]

А по поводу стрелочки, я не допер, как добратья до нее, находясь внутри тегов STYLE?

[Никита Траторов]

А вот еще попытка, в результате которой нет анимации разворачивания, но плавно сворачивается. И продолжает работать после первой попытки. Я добавил точные размеры числами (что не есть правильно).

                                <Trigger Property="Expander.IsExpanded" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0" To="200"  Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>
                                <Trigger Property="Expander.IsExpanded" Value="False">
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="200" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="Content.Height" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>

[Никита Траторов]

Анимации путаются местами или запускаются одновременно. Неужели все так сложно?

Answer 3

[Никита Траторов]

У кого-нибудь есть мысли?