当单击gridview上的图像时，在flipview上显示图像

Question

我的json如下：

我想在gridview上显示图库中的数据，那么如果用户点击gridview上的图片，它会根据选择的图片在flipview上显示更大尺寸的图片。我遇到了麻烦，就是当gridview上的图片被选中时，总是在flipview上显示第一个索引的图片（不符合用户选择的图片）。

XAML：

<callisto:CustomDialog x:FieldModifier="public" x:Name="ArticleDetail" 
                       Grid.Row="0" Grid.RowSpan="2" Title="" 
                       Background="White" BackButtonVisibility="Collapsed" BorderBrush="White" >
            <ScrollViewer Margin="0,0,5,5" Background="{x:Null}" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled">
                <StackPanel Height="auto">
                    <ProgressRing x:Name="articleDetailLoading" HorizontalAlignment="Center" VerticalAlignment="Center" Height="50" Width="50" />
                    <StackPanel x:Name="articleDetailBox" Margin="0,0,10,10" Height="auto">
                        <Grid x:Name="articleDetailGrid" BorderBrush="#FF990000" BorderThickness="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="articleIdDetail" Grid.Row="0" Text="{Binding ID}" Visibility="Collapsed"/>
                            <AppBarButton x:Name="closeArticleBtn" Icon="Clear" HorizontalAlignment="Right" Foreground="Black" Click="closeArticleBtn_Click"/>
                            <ScrollViewer x:Name="articleTitleScroll" Grid.Row="1" Margin="10,0,0,0" Width="650" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalScrollBarVisibility="Auto" Background="{x:Null}" HorizontalScrollMode="Disabled">
                                <TextBlock x:Name="articleTitleDetail" Margin="0,0,15,15" FontSize="18" FontFamily="Segoe UI Black" FontWeight="SemiBold" TextWrapping="Wrap" Height="auto" TextAlignment="Center"/>
                            </ScrollViewer>
                            <TextBlock x:Name="articleDateDetail" Grid.Row="3" Margin="10,15,10,0" FontSize="15" FontFamily="Segoe UI Black" FontWeight="SemiLight" TextWrapping="Wrap" Height="auto" TextAlignment="Center"/>
                            <GridView x:Name="articleImageGridView" Grid.Row="5" Margin="10,25,10,0" Height="110" AutomationProperties.AutomationId="ItemDetailScrollViewer" DataContext="{Binding SelectedItem, ElementName=itemListView}"
                                  ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto" IsItemClickEnabled="True"
                                  ScrollViewer.ZoomMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemClick="articleImageGridView_ItemClick">
                                <GridView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Height="90" Width="120" Margin="5,0,0,0" Background="{x:Null}" BorderBrush="#FF646464" BorderThickness="0.5">
                                            <Border x:Name="coverBox" Grid.Row="0" Margin="0,0,0,0" Width="120" Height="90" VerticalAlignment="Top" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="0.5">
                                                <Border.Background>
                                                    <ImageBrush Stretch="UniformToFill" ImageSource="images/IP-placeholder.png"/>
                                                </Border.Background>
                                                <Image x:Name="cover" Source="{Binding ImageURL1}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
                                            </Border>
                                        </Grid>
                                    </DataTemplate>
                                </GridView.ItemTemplate>

                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <ItemsWrapGrid Orientation="Vertical" />
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                            </GridView>
                            <WebView x:Name="articleContentDetail" Grid.Row="6" Margin="10,15,10,10" Width="650" Height="150" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        </Grid>
                    </StackPanel>

                    <StackPanel x:Name="articleFullImageDetailBox" Margin="0,0,10,10" Height="auto" Visibility="Collapsed">
                        <Grid x:Name="articleFullImageDetailGrid" BorderBrush="#FF990000" BorderThickness="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <AppBarButton x:Name="closearticleFullImageBtn" Grid.Column="1" Icon="Clear" HorizontalAlignment="Right" Foreground="Black" Click="closearticleFullImageBtn_Click"/>
                            <TextBlock x:Name="articleFullIdDetail" Grid.Row="0" Text="{Binding ID}" Visibility="Collapsed"/>
                            <FlipView x:Name="articleImageFullFlipview" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="0,0,0,0" ItemsSource="{Binding gallery.Items}" SelectedItem="{Binding gallery, Mode=TwoWay}" Width="650" Height="500" VerticalAlignment="Center" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" Background="{x:Null}">
                                <FlipView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid x:Name="content" Margin="0,0,0,0">
                                            <Border x:Name="coverBox" Width="600" Height="500">
                                                <Border.Background>
                                                    <ImageBrush Stretch="Uniform" ImageSource="images/IP-placeholder.png"/>
                                                </Border.Background>
                                                <Image x:Name="cover" Source="{Binding ImageURLFull}" HorizontalAlignment="Center" Stretch="UniformToFill" AutomationProperties.Name="{Binding ID}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
                                            </Border>
                                        </Grid>
                                    </DataTemplate>
                                </FlipView.ItemTemplate>
                            </FlipView>
                        </Grid>
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </callisto:CustomDialog>

代码：

ObservableCollection<ArticleClass> articleDatasourceDetailImage = new ObservableCollection<ArticleClass>();
            articleDatasourceDetailImage.Clear();
            articleDetailLoading.Visibility = Visibility.Visible;
            articleDetailLoading.IsActive = true;
            articleDetailBox.Visibility = Visibility.Collapsed;
            articleFullImageDetailBox.Visibility = Visibility.Collapsed;
            ArticleDetail.IsOpen = true;
            articleItemDetail = e.ClickedItem as ArticleClass;
            articleIdDetail.Text = articleItemDetail.ID.ToString();

            ConnectionProfile connections = NetworkInformation.GetInternetConnectionProfile();
            if (connections != null && connections.GetNetworkConnectivityLevel() == NetworkConnectivityLevel.InternetAccess)
            {
                articleDetailLoading.IsActive = true;
                try
                {
                    string urlPath = "http://indonesia-product.com/api/v1/articles/"10.json?module=articles&page=1&token=3f63-dc43-c8d5-eb45-8cbf-b72d-9d98-800f";
                    //Debug.WriteLine(urlPath.ToString());
                    var httpClient = new HttpClient(new HttpClientHandler());

                    var values = new List<KeyValuePair<string, string>>
                    {

                    };

                    HttpResponseMessage response = await httpClient.GetAsync(urlPath);
                    response.EnsureSuccessStatusCode();

                    if (!response.IsSuccessStatusCode)
                    {
                        articleDetailLoading.IsActive = false;
                        RequestException();
                    }

                    string jsonText = await response.Content.ReadAsStringAsync();
                    JsonObject jsonObject = JsonObject.Parse(jsonText);
                    JsonObject jsonData = jsonObject["data"].GetObject();

                    JsonObject groupObject1 = jsonData.GetObject();

                    double id = groupObject1["id"].GetNumber();
                    string title = groupObject1["title"].GetString();
                    string date = groupObject1["publication_date"].GetString();

                    JsonArray jsonGallery = groupObject1["gallery"].GetArray();
                    foreach (JsonValue groupValue1 in jsonGallery)
                    {
                        JsonObject groupObject2 = groupValue1.GetObject();

                        string imageUrl = groupObject2.ContainsKey("image_url") && groupObject2["image_url"] != null ? groupObject2["image_url"].GetString() : string.Empty;

                        ArticleClass fileImage = new ArticleClass();
                        fileImage.ImageURL1 = imageUrl;
                        articleDatasourceDetailImage.Add(fileImage);
                    }

                    articleImageGridView.ItemsSource = articleDatasourceDetailImage;
                    articleDetailLoading.IsActive = false;

                    ArticleClass file = new ArticleClass();
                    file.ID = Convert.ToInt32(id);
                    file.Title = title;
                    DateTime dateConvert = Convert.ToDateTime(date);
                    file.Date = dateConvert.ToString("MMM d, yyyy");
                    articleContentDetail.NavigateToString(contentText);

                    articleDetailLoading.IsActive = false;

                    articleDetailBox.Visibility = Visibility.Visible;
                    articleDetailLoading.Visibility = Visibility.Collapsed;
                    articleDetailLoading.IsActive = false;
                }
                catch (HttpRequestException ex)
                {
                    articleDetailLoading.IsActive = false;
                }
            }
            else
            {
                articleDetailLoading.IsActive = false;
            }
        }

        private async void articleImageGridView_ItemClick(object sender, ItemClickEventArgs e)
        {
                    articleDetailLoading.Visibility = Visibility.Visible;
        articleDetailLoading.IsActive = true;
        articleDetailBox.Visibility = Visibility.Collapsed;
        articleFullImageDetailBox.Visibility = Visibility.Collapsed;

        var articleImageGridView = (GridView)sender;
        articleImageFullFlipview.SelectedIndex = articleImageGridView.SelectedIndex;

        articleFullImageDetailBox.Visibility = Visibility.Visible;
        articleDetailLoading.Visibility = Visibility.Collapsed;
        articleDetailLoading.IsActive = false;
        }

如何处理？

Answer 1

首先，点击项目时无需再次获取数据。加载数据时，请将 GridView 和 FlipView 的 ItemsSource 设置为同一个集合。

其次，当你的item被点击时，获取item的SelectedIndex，然后设置你的FlipView的SelectedIndex

private async Task LoadData()
{
    // get data
    var response = await httpClient.GetAsync(url);
    // Convert to your objects
    articleImageFullFlipview.ItemsSource = data;
    articleImageGridView.ItemsSource = data;
}

private void articleImageGridView_ItemClick(object sender, ItemClickEventArgs e)
{
    var gridView = (GridView)sender;
    articleImageFullFlipview.SelectedIndex = gridView.SelectedIndex;
    // show or hide any controls
}