Используя Xaml и WPF, как вы анимируете свойство при щелчке, а затем отменяете его при последовательных щелчках
-
13-09-2019 - |
Вопрос
Я хотел бы знать, есть ли способ использовать только XAML для выполнения анимации в свойстве, а затем при следующем нажатии выполнить обратную анимацию?
Вот пример триггера, который у меня есть на пограничном объекте, чтобы создать видимость скольжения:
<!-- Animates the Width to Slide It Out. -->
<EventTrigger RoutedEvent="Border.MouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="theFilterControl"
Storyboard.TargetProperty="Width"
From="16"
To="170"
Duration="0:0:.7" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Решение
Вы можете создать ControlTemplate для кнопки переключения и поместить в нее границу.И кнопка ControlTemplate может предоставить вам свойство IsPressed для анимации.
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="theFilterControl" Background="#FF686868"
BorderBrush="Black" Width="16" />
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="theFilterControl"
Storyboard.TargetProperty="Width"
From="16"
To="170"
Duration="0:0:.7" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="theFilterControl"
Storyboard.TargetProperty="Width"
From="170"
To="16"
Duration="0:0:.7" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Другие советы
Отличная идея с переключателем от Джоби, спасибо!Вы также можете обойти проблему области видимости, определив триггер для кнопки переключения вне ControlTemplate и внутри области триггеров UserControl (или Страницы), например
<UserControl.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked"
SourceName="ExpandCollapseToggleButton">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SidebarCanvas"
Storyboard.TargetProperty="Width"
To="0"
Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked"
SourceName="ExpandCollapseToggleButton">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SidebarCanvas"
Storyboard.TargetProperty="Width"
To="250"
Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
Похоже, что область ControlTemplate полностью отличается от UserControl / Page, поэтому вы не можете ссылаться на цели между этими областями.