顯示在flipview的圖像，當在GridView上的圖像被點擊

Question

我有如下的json：

我要顯示在GridView控件庫中的數據，那麼如果用戶點擊圖片gridview會根據選定的圖像在翻轉視圖上顯示更大尺寸的圖片。我遇到了麻煩，那就是當gridview上的圖像被選中時，它總是在第一個索引的翻轉視圖上顯示圖像（不符合用戶選擇的圖像）。

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的ItemsSource和FlipView設置爲相同的集合。

第二，點擊您的項目時，獲得該項目的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 
}