Uwp image scaling

Question

I am trying to scale images in gridview items using RenderTransform. Scaling performed successfully but scaled image is in behind the gridview items. how to bring it to front.

<VisualState x:Name="PointerOver">
 <Storyboard  >
  <DoubleAnimation Duration="0" Storyboard.TargetName="BorderRectangle" 
   Storyboard.TargetProperty="Opacity" To="1" />
    <ObjectAnimationUsingKeyFrames  
      Storyboard.TargetName="contentborderscale" 
      Storyboard.TargetProperty="ScaleY" >
       <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
   </ObjectAnimationUsingKeyFrames>
   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentborderscale" 
    Storyboard.TargetProperty="ScaleX">
     <DiscreteObjectKeyFrame  KeyTime="0" Value="2"  />
   </ObjectAnimationUsingKeyFrames>
   <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
 </Storyboard>
</VisualState>

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

In short, you want to scale the Container of the GridViewItem.

I check my answer to GridView selectedItem Popup (Method 2)

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

Uwp image scaling

1 Answers1

Method 2: On Pointer Hover