Question

        <GridView x:Name="ForegroundElement" ItemsSource="{x:Bind Icons}" IsItemClickEnabled="True" ItemClick="Grid_Clicked">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="data:Icon">
                    <StackPanel>
                        <Image x:Name="ConnectedElement" Width="200" Height="200" HorizontalAlignment="Center" Source="{x:Bind ImageCover}"/>
                        <TextBlock FontSize="16" VerticalAlignment="Center" Text="{x:Bind Title}"/>
                        <TextBlock FontSize="10" VerticalAlignment="Center" Text="{x:Bind Room}"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

这是我的gridView包含的数据这是我点击的活动

    private void Grid_Clicked(object sender, ItemClickEventArgs e)
    {
        var icon = (Icon)e.ClickedItem;
        IconResult.Text = "You selected a " + icon.Title;

    }

我想在“GridView”中单击“堆栈”以导航其他页面时添加ConnectedAnimation 微软我必须创建“PrepareConnectedAnimation”方法使用它但在我的情况下，我有一个点击事件，那么我应该怎么做才能创建和使用这个方法？

Answer 1

将它放在Clicked事件中是完全可以的。首先必须掌握物品容器本身。您可以使用ContainerFromItem：

的GridView方法执行此操作

private void Grid_Clicked(object sender, ItemClickEventArgs e)
{
    var icon = (Icon)e.ClickedItem;
    IconResult.Text = "You selected a " + icon.Title;

    var container = ForegroundElement.ContainerFromItem(e.ClickedItem) as GridViewItem;
    if (container != null)
    {
        //find the image
        var root = (FrameworkElement)container.ContentTemplateRoot;
        var image = (UIElement)root.FindName("ConnectedElement");

        //prepare the animation
        ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("Image", image);
    }

    Frame.Navigate(typeof(SecondPage));
}

现在，在第二页上，您将获得动画并连接它：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    ConnectedAnimation imageAnimation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("Image");
    imageAnimation?.TryStart(TargetElement);
}

您可以在GitHub上的UWP示例库中提供check out the exmple，以查看实施中的完整实施。

使用连接动画

1 个答案: