WPF, animate over container boundaries

Question

Hi,

I'm learning WPF and have a specific goal.

Imagine you have a grid (3 rows by 3 columns), and a control, say a simple blue rectangle fills the middle cell. When I click on the cell I want the square to rotate smoothly through 180 degrees.

The specific issue I have at the moment is; as the rectangle rotates, it won't change its dimensions, so it will extend beyond the boundary of the cell. I don't want it to clip, i want it to appear on top, partially obscuring surrounding cells.

The second part of this is, if there is one cell that fills the entire window, and I click on the blue rectangle in that cell, can I make the rectangle rotate and extend beyond the sides of the form?

If that doesn't make sense, please ask. I'm finding it hard to google because I don't know the exact terms I should be using.

Thank you

Answer 1

The first part can be acomplished by using the attached property Panel.ZIndex, set it to a high value when you start the animation and a lower value when the animation is complete. The second part (having a control outside of the window) is more complicated. I tried a few things and this method seemed to be the best. It uses a full screen window instead of a Popup as I encountered cliping issues. A copy of the element is made using RenderTargetBitmap this is then placed in the same position. The original element is hidden whilst the copy is animated.

public void PopupAnimation(UIElement element)
{
    double w = element.RenderSize.Width,h = element.RenderSize.Height;
    var screen = new Canvas();
    var pos = element.PointToScreen(new Point(0, 0));
    var rtb = new RenderTargetBitmap((int)w,(int)h, 96, 96, PixelFormats.Pbgra32);
    rtb.Render(element);
    Image i = new Image { Source = rtb, Width = w, Height = h,Stretch=Stretch.Fill};
    Canvas.SetLeft(i, pos.X);
    Canvas.SetTop(i, pos.Y);
    screen.Children.Add(i);

    var window = new Window() {
        Content = screen, AllowsTransparency = true,
        Width=SystemParameters.PrimaryScreenWidth,Height=SystemParameters.PrimaryScreenHeight,
        WindowStyle=WindowStyle.None,ShowInTaskbar=false,Topmost=true,
        Background=Brushes.Transparent,ShowActivated=false,Left=0,Top=0
    };
    var transform = new RotateTransform();
    i.RenderTransformOrigin = new Point(0.5, 0.5);
    i.RenderTransform = transform;

    var anim = new DoubleAnimation { To = 360 };
    anim.Completed += (s,e) => 
    {
        element.Visibility = Visibility.Visible;
        var delay = new Storyboard { Duration = TimeSpan.FromSeconds(0.1) };
        delay.Completed += (s2, e2) => window.Close();
        delay.Begin();
    };

    window.ContentRendered += (s, e) =>
    {
        transform.BeginAnimation(RotateTransform.AngleProperty, anim);
        element.Visibility = Visibility.Hidden;
    };
    window.Show();
}