Utilizzando XAML e WPF, come si fa animare una proprietà su clic, e poi invertire sui clic successivi
-
13-09-2019 - |
Domanda
Vorrei sapere se c'è un modo per utilizzare solo XAML per eseguire un'animazione su una proprietà, e poi sul clic successivo eseguire l'animazione inverso?
Ecco un esempio del trigger ho su un oggetto Border per dare l'apparenza di scivolare fuori:
<!-- 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>
Soluzione
È possibile creare un ControlTemplate per un ToggleButton e mettere confine in esso. E Button ControlTemplate può dare proprietà IsPressed per l'animazione.
<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>
Altri suggerimenti
Bella idea sulla ToggleButton da Jobi, grazie! È possibile aggirare il problema ambito anche definendo l'innesco per la ToggleButton di fuori del ControlTemplate e dentro l'UserControl (o pagina) Trigger zona, per es.
<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>
Sembra che il campo di applicazione della ControlTemplate è completamente diverso dal UserControl / pagina quindi non è possibile fare riferimento a obiettivi tra questi ambiti.