uwp gridviewitem scale animation partially overlaps other items

Question

Ok so I am trying to create a popup effect in the gridviewitems when they get focused. following is the code to do so.

private async void Container_GotFocus(object sender, RoutedEventArgs e)
    {
    var panel = (sender as FrameworkElement)?.FindDescendant<DropShadowPanel>();
            if (panel != null)
            {
                var parent = panel?.Parent as UIElement;
                if (parent != null)
                {
                    Canvas.SetZIndex(parent, 10);
                    var parentAnimation = new ScaleAnimation() { To = "1.2", Duration = TimeSpan.FromMilliseconds(600) };
                    parentAnimation.StartAnimation(parent);
                    var parentAnimation2 = new ScaleAnimation() { To = "1.2", Duration = TimeSpan.FromMilliseconds(600) };
                    parentAnimation2.StartAnimation(panel);
                }
            }
     }

as you can see I am using Uwp Community Toolkit to scale the items. and I scale them back to 1 on lost focus event, and both of these are working just fine. and I am trying to prevent 1 side overlapp with settings Z index of the focused item.

Problem

as you can see in the image below that left side of the focused item is perfect and above the left sided element, but on the right side, it looks weird because its right edge goes below the item on the right side, which is my main concern because it should look like the left edge and be above all other items.

I think the data template in this case is not needed here so I will leave that out. I just need to somehow manage the zindex of the scaled item so it can be above on everyone else when scaled.

EDIT My question is not duplicate of any other question because I am trying to set the zindex but it is not working in my case.

UPDATE 1

ok so now I am trying to scale the container but now I am getting panel as null.

 var panel = (sender as FrameworkElement)?.Parent as UIElement;
            if (panel != null)
            {
                //var parent = ((panel?.Parent as FrameworkElement)?.Parent) as UIElement;
                //if (parent != null)
               // {
                    Canvas.SetZIndex(panel, 1);
                    //var parentAnimation = new ScaleAnimation() { To = "1.2", Duration = TimeSpan.FromMilliseconds(600) };
                    //parentAnimation.StartAnimation(parent);
                    var parentAnimation2 = new ScaleAnimation() { To = "1.2", Duration = TimeSpan.FromMilliseconds(600) };
                    parentAnimation2.StartAnimation(panel);
               // }
            }

This question is not a duplicate of [GridView selectedItem Popup](https://stackoverflow.com/questions/44681242/uwp-gridview-selecteditem-popup) — Vijay Nirmal, Mar 02 '18 at 16:35
You should scale the container of the item, not the DropShadowPanel. — Vijay Nirmal, Mar 02 '18 at 16:37
You should scale the parent of the parent of the DropShadowPanel. — Vijay Nirmal, Mar 02 '18 at 16:42
@VijayNirmal Actually the gotfocus event I am using to execute this code is on gridviewitem containers already. I assigned these events in the ContainerChanging event of the gridview. so the sender within the gridview is the container I guess? — Muhammad Touseef, Mar 02 '18 at 19:00
yeah I scaled the sender as Framework element, and then I was able to apply the zindex on it as well. Thanks a lot for the help @VijayNirmal :) — Muhammad Touseef, Mar 02 '18 at 19:22

uwp gridviewitem scale animation partially overlaps other items

0 Answers0

Linked