c# WPF .NET 核心 - 如何在父母之外进行动画控制？

Question

I've got a tabbed UI (WPF) like this:

 ___   ___
/ A \_/_B_\_____
|  ___________  |
| |  (List)   | |
| |  ______   | |
| | | Data |  | |
| | |______|  | |
| |  ______   | |
| | | Data |  | |
| | |______|  | |
| |  ______   | |
| | | Data |  | |
| | |______|  | |
| |___________| |
|_______________|

In each "Data" section there is data (duh) but also a button that causes the state of the data to change so that it disappears from tab A and appears instead in tab B. For better or worse, this is the design the client wants, so unfortunately restructuring is not an option.

So right now when the user hits the button in a Data section, the Data just disappears and the user has to "know" that it's now moved to tab B. To show the user what is happening, I was imagining animating the data block when the user hits the button so that it shrinks and moves up to the tab labeled "B" and maybe even have the tab pulse when it gets there or something.

I've got the animation code working, it was a little tricky to convince a Storyboard to animate position and size at the same time, but thanks to a previous StackOverflow answer I was able to write this and it works:

TransformGroup group = new TransformGroup();
TranslateTransform trans = new TranslateTransform();
group.Children.Add(trans);
ScaleTransform scale = new ScaleTransform(1, 1);
group.Children.Add(scale);
RenderTransform = group;

var storyBoard = new Storyboard();

var yMove = new DoubleAnimation(0, newY, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(yMove, this);
Storyboard.SetTargetProperty(yMove, new PropertyPath("RenderTransform.Children[0].Y"));
storyBoard.Children.Add(yMove);

var xMove = new DoubleAnimation(0, newX, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(xMove, this);
Storyboard.SetTargetProperty(xMove, new PropertyPath("RenderTransform.Children[0].X"));
storyBoard.Children.Add(xMove);

var width = new DoubleAnimation(1, scaledWidth, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(width, this);
Storyboard.SetTargetProperty(width, new PropertyPath("RenderTransform.Children[1].ScaleX"));
storyBoard.Children.Add(width);

var height = new DoubleAnimation(1, scaledHeight, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(height, this);
Storyboard.SetTargetProperty(height, new PropertyPath("RenderTransform.Children[1].ScaleY"));
storyBoard.Children.Add(height);

storyBoard.Begin(this);

The problem is that as soon as a Data control tries to move outside of its parent, it gets clipped. I tried setting ClipToBounds to false but it didn't help.

Is there a way to "set my control free" so it can move around the screen without getting clipped?

Answer 1

You could try to use an adorner layer, there you should be free to move the objects wherever you want. You can create the same the control in the adorner layer, collapse you actual control and then animate the control in the adorner layer.