uwp GridView selectedItem Popup

Question

I am using AdaptiveGridView by UWP Community toolkit. I want the selected Item of the gridview to popup on the Z-axis, meaning the selected Item must scale up to a specific size, but it should not disturb the size of other gridview items, rather it should scale on Z axis of the canvas. what are possibilities to animate this effect also maybe using UWP community toolkit scale effect ( but that effects the size of other items as well). if its not possible on selected Item can it be somehow possible on pointer hover?

Which scale method did you try? Normally a scale change don't affect layout, a size change does. — Justin XL, Jun 21 '17 at 22:18
@JustinXL I am trying to solve this question. I get the selected Item's container using `var container = AdaptiveGridViewControl.ContainerFromIndex(AdaptiveGridViewControl.SelectedIndex) as FrameworkElement` and tried to increase the Scale using `container.Scale(2, 2, 0, 0, 500, 0, EasingType.Default)` but it doesn't increase the scale but when I change the Width(or Height) it affects the selected Item as expected. Why doesn't scale affect layout? — Vijay Nirmal, Jun 22 '17 at 07:56
It doesn't change the scale most likely because each gridview item is within a certain boundary. — Justin XL, Jun 22 '17 at 09:01
sorry by scale I meant size change, which affects the layout, and as @VijayNirmal tested, scale isn't causing any effect on the item because of the boundary, we need a way to bypas the boundary maybe on Z axis? — Muhammad Touseef, Jun 22 '17 at 09:24
@JustinXL Then how change the Width(or Height) affects the selected Item? — Vijay Nirmal, Jun 22 '17 at 09:40
Z-Index won't work here. You will need something extra. Changing the height and width is basically changing the boundaries.... — Justin XL, Jun 22 '17 at 09:43
No, not really. The only way I can think of, is to use `RenderTargetBitmap` to capture the look of the clicked item, and then set its source to an `Image` which overlays the `GridView`. — Justin XL, Jun 22 '17 at 10:53
but that would actually overlay the whole gridview , I am looking for a 150 percent or so scaling of a specific item on its center point — Muhammad Touseef, Jun 22 '17 at 11:07
Negative margins works(I have tested). Use [DropShadowPanel](http://www.uwpcommunitytoolkit.com/en/master/controls/DropShadowPanel/) to create PopUp effect. If you like I can give you step by step answer will all of our discussion. — Vijay Nirmal, Jun 22 '17 at 12:58
Yes Please provide a tested sample with answer that would be really appreciated thanks @VijayNirmal — Muhammad Touseef, Jun 22 '17 at 13:31
@JustinXL I found a way to get the element within the container. `var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement; var innerElement = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;` But still Scale didn't work. Does Scale only works with Image? because I tried Scaling with `Button` and `Grid` both didn't work — Vijay Nirmal, Jun 22 '17 at 15:25
haha @VijayNirmal its ok it happens a lot we sometimes forget the most obvious code :) is it working now? — Muhammad Touseef, Jun 22 '17 at 15:38
@touseef Currently I can't make the PopUp effect to overlay Other Item otherwise Its fine. I will try it and let you know. — Vijay Nirmal, Jun 22 '17 at 16:37
@JustinXL It seems we can Scale the container of GridViewItem. It works perfectly. — Vijay Nirmal, Aug 26 '17 at 16:33
@VijayNirmal that's only because you manually set the size of the template to be much emaller than the size of the gridview... This is not what I would recommend. — Justin XL, Aug 26 '17 at 21:02
@JustinXL So your recommended method is *Method 2 in Old Post* but that method affects the functionality of the Item. — Vijay Nirmal, Aug 27 '17 at 05:17
@VijayNirmal that's because the image is not placed in the right place. It should be at a higher level where it's not clipped by anything. — Justin XL, Aug 27 '17 at 05:45
@VijayNirmal Oh Thanks, it looks better can you also suggest how can we put shadows around the items so that when they scale up the shadow scales up with them too? — Muhammad Touseef, Aug 27 '17 at 06:35
@JustinXL I didn't talk about Image Placement. I talk about the image itself. If the ItemTemplate contains some other control Like button then After PopUp, it loses its functionality(Like Click Event). But with the new method, the control doesn't lose its functionality. — Vijay Nirmal, Aug 27 '17 at 06:43
Nope it's got nothing to do with that. You must have done something wrong. — Justin XL, Aug 27 '17 at 06:44
@JustinXL `RenderTargetBitmap` with return Image then how can it contain the functionality of a button? Also, the resolution of the image doesn't can after PopUp so the PopUp image doesn't look good — Vijay Nirmal, Aug 27 '17 at 06:49
@VijayNirmal you have a good point image wont look good on all screens with renderTargetBitmap — Muhammad Touseef, Aug 27 '17 at 09:27
@touseef I have updated my answer with Method 3(With drop shadow) — Vijay Nirmal, Aug 27 '17 at 09:46
Well... If you are using images, you don't need RTB at all. All you need is an overlayed Image control that renders the selected image in your GridView. You can even make a usercontrol that has everything inside your data template, and render it over the entire GridView. Make sense? — Justin XL, Aug 27 '17 at 22:11
@JustinXL It will only work when GridView contains Image. If the GridView has other control like Button, TextBox then your method doesn't work. Also, you are right, setting GridView Height manually is not a perfect solution. It seems "To get something we have to lose something" :( — Vijay Nirmal, Aug 28 '17 at 15:51
Please read my last comment again. "You can even make a usercontrol that has everything inside your data template..." — Justin XL, Aug 28 '17 at 20:34

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

Method 1: On Selection changed

XAML Part

<GridView Height="200" SelectionChanged="GridView_SelectionChanged">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemSource">
            <Grid Width="100" Height="100">
                <!-- Content -->
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

C# Part

FrameworkElement lastPopUpElement = null;
private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (lastPopUpElement != null)
    {
        Canvas.SetZIndex(lastPopUpElement, 0);
        lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
    }

    lastPopUpElement = (sender as GridView).ContainerFromIndex((sender as GridView).SelectedIndex) as FrameworkElement;

    if (lastPopUpElement != null)
    {
        Canvas.SetZIndex(lastPopUpElement, 1);
        lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
    }
}

Sample Output

Method 2: On Pointer Hover

XAML Part

<GridView Height="200">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemSource">
            <Grid Width="100" Height="100" PointerEntered="GridView_PointerEntered" PointerExited="GridView_PointerExited">
                <!-- Content -->
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

C# Part

FrameworkElement lastPopUpElement = null;
private void GridView_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    lastPopUpElement = VisualTreeHelper.GetParent(VisualTreeHelper.GetParent(sender as FrameworkElement) as FrameworkElement) as FrameworkElement;
    Canvas.SetZIndex(lastPopUpElement, 1);
    lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}

private void GridView_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (lastPopUpElement != null)
    {
        Canvas.SetZIndex(lastPopUpElement, 0);
        lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
    }
}

Sample Output

Method 3: With Drop Shadow

XAML Part

<GridView Height="200">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemSource">
            <controls:DropShadowPanel OffsetX="5" OffsetY="5" Color="Black" BlurRadius="5" ShadowOpacity="0" PointerEntered="myListView_PointerEntered" PointerExited="myListView_PointerExited">
                <Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <!-- Content -->
                </Grid>
            </controls:DropShadowPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

C# Part

private void myListView_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    DropShadowPanel DropShadow = sender as DropShadowPanel;
    lastPopUpElement = VisualTreeHelper.GetParent(VisualTreeHelper.GetParent(DropShadow) as FrameworkElement) as FrameworkElement;
    DropShadow.ShadowOpacity = 0.5;
    Canvas.SetZIndex(lastPopUpElement, 10);
    lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}

private void myListView_PointerExited(object sender, PointerRoutedEventArgs e)
{
    if (lastPopUpElement != null)
    {
        DropShadowPanel DropShadow = sender as DropShadowPanel;
        DropShadow.ShadowOpacity = 0;
        Canvas.SetZIndex(lastPopUpElement, 0);
        lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
    }
}

Sample Output

(Old Post)

Method 1 (Doesn't overlay with other items)

XAML Part

<Grid Name="MainGrid" Height="200">
    <controls:AdaptiveGridView x:Name="myAdaptiveGridView" SelectionChanged="myAdaptiveGridView_SelectionChanged" VerticalAlignment="Center" HorizontalAlignment="Left">
        <controls:AdaptiveGridView.ItemTemplate>
            <DataTemplate>
                <Grid Width="150" Height="150">
                    <Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <!-- Content -->
                    </Grid>
                </Grid>
            </DataTemplate>
        </controls:AdaptiveGridView.ItemTemplate>
    </controls:AdaptiveGridView>
</Grid>

C# Part

FrameworkElement oldSetectedItem = null;

private void myAdaptiveGridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (oldSetectedItem != null)
        oldSetectedItem.Scale(1, 1, 50, 50, 500).Start();

    var container = myAdaptiveGridView.ContainerFromIndex(myAdaptiveGridView.SelectedIndex) as FrameworkElement;
    var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement;
    var outerGrid = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;
    var grid = VisualTreeHelper.GetChild(outerGrid, 0) as FrameworkElement;
    oldSetectedItem = grid;

    grid.Scale(1.5f, 1.5f, 50, 50, 500).Start();
}

Sample Output

Method 2 (will overlay with other items)

XAML Part

<Grid Name="MainGrid" Height="200">
    <controls:AdaptiveGridView x:Name="myAdaptiveGridView" SelectionChanged="myAdaptiveGridView_SelectionChanged" VerticalAlignment="Center" HorizontalAlignment="Left">
        <controls:AdaptiveGridView.ItemTemplate>
            <DataTemplate>
                <Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <!-- Content -->
                </Grid>
            </DataTemplate>
        </controls:AdaptiveGridView.ItemTemplate>
    </controls:AdaptiveGridView>
    <Image x:Name="RenderedImage" Stretch="None" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>

C# Part

private async void myAdaptiveGridView_SelectionChangedAsync(object sender, SelectionChangedEventArgs e)
{
    RenderedImage.Scale(1, 1, 0, 0, 0).Start();

    var container = myAdaptiveGridView.ContainerFromIndex(myAdaptiveGridView.SelectedIndex) as FrameworkElement;
    var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement;
    var grid = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;
    oldSetectedItem = grid;

    var TTV = grid.TransformToVisual(MainGrid);
    Point screenCoords = TTV.TransformPoint(new Point(0, 0));

    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(grid);
    RenderedImage.Source = renderTargetBitmap;
    RenderedImage.Margin = new Thickness(screenCoords.X, screenCoords.Y, 0, 0);
    RenderedImage.Width = grid.ActualWidth;
    RenderedImage.Height = grid.ActualHeight;
    RenderedImage.Visibility = Visibility.Visible;

    RenderedImage.Scale(1.5f, 1.5f, 50, 50, 500).Start();
}

Sample Output

this is brilliant answer, good job @VijayNirmal I think we can also add shadow effect which will improve the overlay effect but you have done the core task, thanks a lot :) — Muhammad Touseef, Jun 22 '17 at 19:28
by the way in 2nd method, why you put height 150 of outer grid? it will work with 100 height I guess as well because it is supposed to overlay — Muhammad Touseef, Jun 22 '17 at 19:35
I have opened an [issue](https://github.com/Microsoft/UWPCommunityToolkit/issues/1231) in UWPCommunityToolkit to create a PopUp animation. — Vijay Nirmal, Jun 23 '17 at 09:07
@touseef If you have any suggestions then you can say it on that issue. — Vijay Nirmal, Jun 23 '17 at 12:15
@VijayNirmal Hey U answered me this question long time ago, and it worked good for me and we took it to the community toolkit as well, but now I am trying it an another app with updated toolkit animations and I am having problems in setting the zindex, can u please have a look at my other question? I would really appreciate it . https://stackoverflow.com/questions/49049521/uwp-gridviewitem-scale-animation-partially-overlaps-other-items — Muhammad Touseef, Mar 02 '18 at 16:26

uwp GridView selectedItem Popup

1 Answers1

Method 1: On Selection changed

Method 2: On Pointer Hover

Method 3: With Drop Shadow

Method 1 (Doesn't overlay with other items)

Method 2 (will overlay with other items)

Linked

Related