wpf中让控件进行移动的动画

Posted 2023-05-03

按下button后,让一个border的位置进行动画
宽度与高度的动画已经会了,但是移动的动画不知道怎么做
如让border的left从100到200
注:需要C#代码

Border 自身没有 Left 属性, 要描述一个 border 相对于它父窗口(Parent container) 的偏移量, 可以通过其 Margin 属性描述(Margin 是 一个 Thickness 类型的变量), 或通过父容器的附加属性来描述(例如 Canvas.left).

并非所有父容器都提供位置偏移支持, 因此, 使用 margin 来表示其位置偏移是比较好的, 下面是一个例子 (保存为一份 xaml 文档, 在 ie 中打开即可, 例子中, 单击按钮产生 上偏移的动画, 点击铵钮右键产生左偏移动画):
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Border Width="200" Height="200" Background="red" Name="bdr"/>
<Button Content="abc">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseRightButtonUp">
<EventTrigger.Actions>
<BeginStoryboard Name="sb1">
<Storyboard>
<ThicknessAnimation From="0,0,0,0" To="100,0,0,0" Storyboard.TargetName="bdr" Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click">
<EventTrigger.Actions>
<BeginStoryboard Name="sb2">
<Storyboard>
<ThicknessAnimation From="0,0,0,0" To="0,100,0,0" Storyboard.TargetName="bdr" Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>

当然, 如果父容器提供了位置偏移的附加属性, 也可以利用(如 Canvas 提供了 Left, Top 等来描述其子元素的位置偏移), 下面也是一个例子(保存为 xaml 文档, 在 ie 中打开也可以了, 例子中, 单击按钮产生 上偏移的动画, 点击铵钮右键产生左偏移动画):
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Border Width="200" Height="200" Background="red" Name="bdr"/>
<Button Content="abc">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseRightButtonUp">
<EventTrigger.Actions>
<BeginStoryboard Name="sb1">
<Storyboard>
<DoubleAnimation From="0" To="100" Storyboard.TargetName="bdr" Storyboard.TargetProperty="(Canvas.Top)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click">
<EventTrigger.Actions>
<BeginStoryboard Name="sb2">
<Storyboard>
<DoubleAnimation From="0" To="100" Storyboard.TargetName="bdr" Storyboard.TargetProperty="(Canvas.Left)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>

-------------
至于另一个需求 --- 需要 C# 代码, 其实也不难实现, 设置 Margin 的话, 直接就是 bdr.Margin=new Thickness(......)
设置 Canvas.Left 附加属性的就是 bdr.SetValue(Canvas.LeftProperty, yourNewValue);
适当将 xaml 的内容转换为 C# 就可以了 参考技术A WPF的控件分几种，要根据情况来删除。
如果是Border中的控件要被删除，需要将Border.Child设置为null——因为Border这类控件内部只能容纳一个内嵌控件。
而如果是Grid/StackPanel/DockPanel/Canvas等面板，因为这类控件内部可以同时嵌入多个子级控件，因此，要删除其中的子级控件得用类似Grid.Children.RemoveAt()或RemoveAt()这类的办法。
而TabControl之类的Item容器则需要调用类似tabControl.Items.Remove()或RemoveAt()之类的方法才能删除一个Tab页。
================================
——总之，要删除某个控件，需要先看看它在什么样的容器控件中，然后调用相应的方法。
追问

不是要删除,是移动,是对某个控件进行移动的动画

WPF动画：检测是不是有任何动画正在进行中？

【中文标题】WPF动画：检测是不是有任何动画正在进行中？

【英文标题】：WPF Animation: Detect if any animation is in process?WPF动画：检测是否有任何动画正在进行中？

【发布时间】：2011-03-24 17:47:40

【问题描述】：

有没有一种快速的方法来确定 WPF 控件中的任何动画是否正在处理。

我有一个树视图，我在其中动画树节点的扩展，我想等到所有这些动画都完成后再将焦点项目滚动到视图中。我不想单独跟踪我所有故事板的进度。

理想情况下，我的伪代码如下所示：

myTreeView.ExpandAll(); // I have written this part

while (myTreeView.IsAnimating()) // I need the 'IsAnimating' property or extension method

   // wait


selectedTreeviewItem.BringIntoView(); // I have written this too.

【问题讨论】：

您尝试过 StoryBoard“已完成”活动吗？

由于有多个故事板动画（每个正在扩展的树视图项目一个），我不确定我会知道最后一个何时完成。

所以只需在故事板开始事件中增加一个计数器，并在完成事件上减少计数器，如果减少后计数器为零，则所有动画都已完成。

【参考方案1】：

为什么不使用情节提要的completed event？您将不得不使用事件或其他线程，否则您将使用 while 语句阻塞 UI 线程，并且不会播放任何动画。

【讨论】：

这就是我要避免的，因为我同时触发了 1 和 x 动画之间的任何地方......不过，这是我正在考虑的一个后备选项。

嗯，你的答案基本上就是它。我缺少的是在 myTreeView 的静态构造函数中使用 EventManager.RegisterClassHandler(...,Storyboard.CompletedEvent,...) 以便我可以观看所有动画完成。