Usando Xaml e WPF, como você animar uma propriedade no clique, e depois reversa em cliques sucessivos
-
13-09-2019 - |
Pergunta
Gostaria de saber se existe uma maneira de usar somente XAML para executar uma animação em uma propriedade, e em seguida, no próximo clique executar a animação inversa?
Aqui está um exemplo do Impulso tenho em um objeto Border para dar a aparência de deslizamento:
<!-- 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>
Solução
Você pode criar um ControlTemplate para um ToggleButton e borda colocar nele. E Button ControlTemplate pode dar-lhe IsPressed propriedade para a animação.
<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>
Outras dicas
idéia de Nice sobre o ToggleButton de Jobi, obrigado! Você pode obter em torno da questão escopo também definindo o gatilho para o ToggleButton fora do ControlTemplate e dentro do UserControl (ou página) Área Triggers, por exemplo.
<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>
Parece que o âmbito do ControlTemplate é completamente diferente do UserControl / Página para que você não pode se referir a alvos entre esses âmbitos.