显示在flipview的图像，当在GridView上的图像被点击

我有如下的json：显示在flipview的图像，当在GridView上的图像被点击

我要显示在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; 
     }

如何处理呢？

来源

2017-05-15 Rose

首先，点击该项目时不需要再次获取数据。加载数据时，将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 
}

来源

2017-05-16 18:28:20

我试着加入上面的代码和删除代码删除数据，但在翻转视图上它不显示图像。而如果我只是添加代码，显示的flipview上的图像仍然是gridview上的第一个索引图像（不符合用户在grdiview上选择的图像） – Rose

确保您的FlipView具有与GridView相同的ItemsSource，并且ItemTemplate会相应地调整。 –

是的，我只是添加下面的代码articleImageFullFlipview.ItemsSource = imageinfos;并用articleImageGridView及其作品替换gridview – Rose

显示在flipview的图像，当在GridView上的图像被点击

回答

相关问题