uwp GridView selectedItem Popup

我正在使用UWP社区工具包的AdaptiveGridView 。 我希望在Z轴上弹出 gridview的选定项目，这意味着所选项目必须缩放到特定大小，但它不应该干扰其他gridview项目的大小，而应该在canvas的Z轴上缩放。 设置动画效果的可能性也可能是使用UWP社区工具包缩放效果 （但也会影响其他项目的大小）。 如果在选定的项目上不可能它可以在指针hover上以某种方式可能吗？

Answer 1

方法1：选择已更改

XAML部分

C＃部分

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

样本输出

方法2：指针hover

XAML部分

C＃部分

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

样本输出

方法3：使用投影

XAML部分

C＃部分

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

样本输出

---

（老邮报）

方法1（不与其他项目重叠）

XAML部分

C＃部分

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

样本输出

方法2（将与其他项目重叠）

XAML部分

C＃部分

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

样本输出