XAMLとWPFを使用して、どのようにクリックでプロパティをアニメーション化した後、連続したクリックで逆転ん
-
13-09-2019 - |
質問
私は、プロパティにアニメーションを実行するだけXAMLを使用する方法があるかどうかを知りたいし、次のクリックで逆アニメーションを行うのでしょうか?
ここで私は、スライドの外観を与えるためにBorderオブジェクトの上に持っているトリガーのサンプルです:
<!-- 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>
他のヒント
Jobiからトグルボタンに
ニースのアイデア、ありがとう!あなたはControlTemplateの外およびユーザーコントロール(またはページ)内のトグルボタンのためのトリガーを定義することによっても、スコープの問題を回避することができる領域、例えばをトリガします。
<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の範囲は、ユーザーコントロール/ページとは完全に異なっているようです。
所属していません StackOverflow