Zeigt das Bild auf dem FlipView, wenn das Bild auf dem gridview geklickt wird

Question

Ich habe json wie folgt:

Ich möchte auf dem Gridview die Daten in der Galerie angezeigt wird, dann, wenn der Benutzer klickt auf das Bild auf In der Gridview wird auf dem Flipview entsprechend dem ausgewählten Bild ein Bild mit einer größeren Größe angezeigt. Ich habe Probleme, wenn das Bild auf der Gridview ausgewählt ist, zeigt es immer das Bild auf der Flipview für den ersten Index (nicht in Übereinstimmung mit dem vom Benutzer gewählten Bild).

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> 

Code:

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

Wie es behandeln?

Answer 1

Zunächst müssen Sie Ihre Daten nicht erneut abrufen, wenn Sie auf den Artikel klicken. Wenn Sie Ihre Daten laden, legen Sie die ItemsSource Ihrer GridView und Ihres FlipView als dieselbe Sammlung fest.

Zweitens, wenn Sie Ihren Artikel geklickt wird, stellen Sie die SelectedIndex des Elements und dann die SelectedIndex Ihrer FlipView

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 
}