WPF, анимировать над границами контейнера

Question

Я изучаю WPF и имею конкретную цель.

Представьте, что у вас есть сетка (3 строки по 3 столбца) и элемент управления, скажем, простой синий прямоугольник, заполняющий среднюю ячейку.Когда я нажимаю на ячейку, я хочу, чтобы квадрат плавно поворачивался на 180 градусов.

Особая проблема, с которой я столкнулся на данный момент;поскольку прямоугольник вращается, он не изменит свои размеры, поэтому он будет выходить за границы ячейки.Я не хочу, чтобы это обрезало, я хочу, чтобы это появилось сверху, частично скрывая окружающие клетки.

Во-вторых, если одна ячейка заполняет все окно, и я нажимаю на синий прямоугольник в этой ячейке, могу ли я сделать так, чтобы прямоугольник вращался и выходил за пределы сторон формы?

Если это не имеет смысла, пожалуйста, спросите.Мне трудно гуглить, потому что я не знаю точных терминов, которые мне следует использовать.

Спасибо

Answer 1

Первая часть может быть выполнена с помощью вложенного свойства Panel.ZIndex , установите для него высокое значение при запуске анимации и более низкое значение, когда анимация завершена.Вторая часть (имеющая контроль за окном) является более сложной.Я попробовал несколько вещей, и этот метод оказался лучшим.Он использует полноэкранное окно вместо Popup , так как я столкнулся с проблемами с клипированием.Копия элемента выполняется с использованием RenderTargetBitmap, который затем помещается в ту же позицию.Оригинальный элемент скрыт, а копия анимирована.

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();
}