uwp GridView selectedItem Popup

Question

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

Answer 1

方法1：选择更改

XAML部分

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

示例输出

方法2：指针悬停

XAML部分

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

示例输出

方法3：使用投影

XAML部分

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

示例输出

（旧帖子）

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

XAML部分

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

示例输出

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

XAML部分

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

示例输出