在gridview和flipview上显示一些图像答案

【问题标题】：Display some images on gridview and flipview在gridview和flipview上显示一些图像
【发布时间】：2017-08-16 15:38:01
【问题描述】：

我有一个 gridview，其中包含一些带有 XAML 的图像和以下代码：

XAML：

<ProgressRing x:Name="busyIndicator" Margin="10,0,10,10" VerticalAlignment="Top" HorizontalAlignment="Right" Width="45" Height="45"/>
         <GridView x:Name="ImageGridView" Margin="15,100,10,0" Height="600" Width="1200" ItemsSource="{x:Bind listingDatasourceDetail}" AutomationProperties.AutomationId="ItemDetailScrollViewer" DataContext="{Binding SelectedItem, ElementName=itemListView}"
                              ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" IsItemClickEnabled="True"
                              ScrollViewer.ZoomMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemClick="ImageGridView_ItemClick" SelectionChanged="ImageGridView_SelectionChanged" >
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="local:ListingClass">
                <Grid Height="320" Width="250" Margin="10,0,0,0" Background="{x:Null}" BorderBrush="#FF646464" BorderThickness="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Image x:Name="cover1" Grid.Column="0" Source="{Binding ImageURL1}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                        <Image x:Name="cover2" Grid.Column="1" Source="{Binding ImageURL2}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                        <Image x:Name="cover3" Grid.Column="2" Source="{Binding ImageURL3}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                        <Image x:Name="cover4" Grid.Column="3" Source="{Binding ImageURL4}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                        <Image x:Name="cover5" Grid.Column="4" Source="{Binding ImageURL5}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                        <Image x:Name="cover6" Grid.Column="5" Source="{Binding ImageURL6}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

代码：

public async void Listing()
        {
            try
            {
                busyIndicator.IsActive = true;
                string urlPath = "http://.../API/detail";
                var httpClient = new HttpClient(new HttpClientHandler());

                var values = new List<KeyValuePair<string, string>>
                    {
                        new KeyValuePair<string, string>("api_key", "b1729409..."),
                        new KeyValuePair<string, string>("id-sekolah", "60400172")

                    };

                var response = await httpClient.PostAsync(urlPath, new FormUrlEncodedContent(values));
                response.EnsureSuccessStatusCode();

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

                JsonObject groupObject1 = jsonData.GetObject();

                string id = groupObject1["id"].GetString();
                string title = groupObject1["nama"].GetString();
                string urlImage1 = groupObject1.ContainsKey("img_1") && groupObject1["img_1"] != null ? groupObject1["img_1"].GetString() : string.Empty;
                string urlImage2 = groupObject1.ContainsKey("img_2") && groupObject1["img_2"] != null ? groupObject1["img_2"].GetString() : string.Empty;
                string urlImage3 = groupObject1.ContainsKey("img_3") && groupObject1["img_3"] != null ? groupObject1["img_3"].GetString() : string.Empty;
                string urlImage4 = groupObject1.ContainsKey("img_4") && groupObject1["img_4"] != null ? groupObject1["img_4"].GetString() : string.Empty;
                string urlImage5 = groupObject1.ContainsKey("img_5") && groupObject1["img_5"] != null ? groupObject1["img_5"].GetString() : string.Empty;
                string urlImage6 = groupObject1.ContainsKey("img_6") && groupObject1["img_6"] != null ? groupObject1["img_6"].GetString() : string.Empty;

                ListingClass file = new ListingClass();
                file.ID = Int32.Parse(id);
                file.Title = title;
                file.ImageURL1 = urlImage1;
                file.ImageURL2 = urlImage2;
                file.ImageURL3 = urlImage3;
                file.ImageURL4 = urlImage4;

                listingDatasourceDetail.Add(file);
                ImageGridView.ItemsSource = listingDatasourceDetail;
                busyIndicator.IsActive = false;
            }

当用户点击 gridview 上的图片时，它会显示一个带有 XAML 和以下代码的更大图片的翻转视图：

XAML：

<StackPanel x:Name="listingFullImageDetailBox" Margin="0,0,10,10" Height="auto" Visibility="Collapsed">
            <ProgressRing x:Name="listingDetailLoading" Margin="10,0,10,10" VerticalAlignment="Center" HorizontalAlignment="Center" Width="45" Height="45"/>
            <Grid x:Name="listingFullImageDetailGrid" BorderBrush="#FF990000" BorderThickness="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <AppBarButton x:Name="closeListingFullImageBtn" Grid.Column="1" Icon="Clear" HorizontalAlignment="Right" Foreground="Black" Click="closeListingFullImageBtn_Click"/>
               <FlipView x:Name="listingImageFullFlipview" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="0,0,0,0" ItemsSource="{x:Bind listingDatasourceDetail}" SelectedIndex="{Binding ElementName=ImageGridView, Path=SelectedIndex, Mode=TwoWay}" Width="650" Height="500" VerticalAlignment="Center" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" Background="{x:Null}">
                <FlipView.ItemTemplate>
                    <DataTemplate x:DataType="local:ListingClass">
                            <Grid x:Name="content" Margin="0,0,0,0">
                                <Image x:Name="cover1" Source="{Binding ImageURLFull1}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                                <Image x:Name="cover2" Source="{Binding ImageURLFull2}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                                <Image x:Name="cover3" Source="{Binding ImageURLFull3}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                                <Image x:Name="cover4" Source="{Binding ImageURLFull4}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                                <Image x:Name="cover5" Source="{Binding ImageURLFull5}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                                <Image x:Name="cover6" Source="{Binding ImageURLFull6}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding ID}"/>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>
            </Grid>
        </StackPanel>

代码：

private async void ImageGridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            try
            {
                busyIndicator.IsActive = true;
                string urlPath = "http://.../API/detail";
                var httpClient = new HttpClient(new HttpClientHandler());

                var values = new List<KeyValuePair<string, string>>
                    {
                        new KeyValuePair<string, string>("api_key", "b1729409..."),
                        new KeyValuePair<string, string>("id-sekolah", "60400172")

                    };

                var response = await httpClient.PostAsync(urlPath, new FormUrlEncodedContent(values));
                response.EnsureSuccessStatusCode();

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

                JsonObject groupObject1 = jsonData.GetObject();

                string id = groupObject1["id"].GetString();
                string title = groupObject1["nama"].GetString();
                string urlImage1 = groupObject1.ContainsKey("img_1") && groupObject1["img_1"] != null ? groupObject1["img_1"].GetString() : string.Empty;
                string urlImage2 = groupObject1.ContainsKey("img_2") && groupObject1["img_2"] != null ? groupObject1["img_2"].GetString() : string.Empty;
                string urlImage3 = groupObject1.ContainsKey("img_3") && groupObject1["img_3"] != null ? groupObject1["img_3"].GetString() : string.Empty;
                string urlImage4 = groupObject1.ContainsKey("img_4") && groupObject1["img_4"] != null ? groupObject1["img_4"].GetString() : string.Empty;
                string urlImage5 = groupObject1.ContainsKey("img_5") && groupObject1["img_5"] != null ? groupObject1["img_5"].GetString() : string.Empty;
                string urlImage6 = groupObject1.ContainsKey("img_6") && groupObject1["img_6"] != null ? groupObject1["img_6"].GetString() : string.Empty;

                ImageGridView.Visibility = Visibility.Collapsed;
                listingFullImageDetailBox.Visibility = Visibility.Visible;
                listingDetailLoading.IsActive = true;

                ObservableCollection<ListingClass> imageinfos = new ObservableCollection<ListingClass>();
                ListingClass info = new ListingClass();
                info.ImageURLFull1 = new BitmapImage(new Uri(urlImage1));
                info.ImageURLFull2 = new BitmapImage(new Uri(urlImage2));
                info.ImageURLFull3 = new BitmapImage(new Uri(urlImage3));
                info.ImageURLFull4 = new BitmapImage(new Uri(urlImage4));
                imageinfos.Add(info);

                listingImageFullFlipview.ItemsSource = imageinfos;
                var listingImageFlipview = (GridView)sender;
                listingImageFullFlipview.SelectedIndex = listingImageFlipview.SelectedIndex;
                listingDetailLoading.IsActive = false;
            }
}

列表类：

class ListingClass
    {
        public int ID { get; set; }

        public string Title { get; set; }

        public string ImageURL1 { get; set; }

        public string ImageURL2 { get; set; }

        public string ImageURL3 { get; set; }

        public string ImageURL4 { get; set; }

        public string ImageURL5 { get; set; }

        public string ImageURL6 { get; set; }

        public ImageSource ImageURLFull1 { get; set; }

        public ImageSource ImageURLFull2 { get; set; }

        public ImageSource ImageURLFull3 { get; set; }

        public ImageSource ImageURLFull4 { get; set; }

        public ImageSource ImageURLFull5 { get; set; }

        public ImageSource ImageURLFull6 { get; set; }
    }

我想在 gridview 上显示所有图像（4 到 6 个图像对应于 JSON 上提供的图像）。并且在用户选择图像后，它会在翻转视图上显示图像。我遇到了麻烦，就是它只能在gridview上显示第一个索引。并且在flipview中显示的图像与用户在gridview上选择的图像不匹配，并且图像无法移动。如何处理？

JSON：

"img_1": "http://sekolah.pendidikan.id/gb/1-60400172.jpg",
"img_2": "http://sekolah.pendidikan.id/gb/2-60400172.jpg",
"img_3": "http://sekolah.pendidikan.id/gb/3-60400172.jpg",
"img_4": "http://sekolah.pendidikan.id/gb/4-60400172.jpg",
"img_5": "",
"img_6": "",

【问题讨论】：

如果我是对的，您在GridView 和FlipView 上拥有相同的项目。我说的对吗？
是的，gridview和flipview的item是一样的
那你为什么不把listingFullImageDetailGrid.SelectedIndex = ImageGridView.SelectedIndex设置成ImageGridView_SelectionChanged副Versa
@VijayNirmal 我已经在ImageGridView_SelectionChanged中添加了listingFullImageDetailGrid.SelectedIndex = ImageGridView.SelectedIndex，但是出现了错误信息：1drv.ms/i/s!Auqiv8Ukng7U7mHGqqoIIY6LJgvy如何解决gridview上的图像只显示1并在flipview上显示图像不能移动的（移动到之前或之后的图像）？
只有当GridView 只包含一项时才会出现此错误？在listingImageFlipview.SelectedIndex 中检查null。另外，使用上述方法时，您不想使用SelectedItem="{Binding gallery, Mode=TwoWay}"

标签： c# json gridview uwp flipview

【解决方案1】：

由于您在 GridView 和 FlipView 中具有相同的元素，因此有一个 ItemsSource 列表，这可以减少您的代码，而且您不希望调用相同的 API 来获取相同的图像。

要更改FlipView对应的GridView Selected Item，可以使用SelectedIndex="{Binding ElementName=MyGridView, Path=SelectedIndex, Mode=TwoWay}"

示例代码：

<GridView x:Name="MyGridView" ItemsSource="{x:Bind ItemsSourceCollection}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemSource">
            <!-- Your Code -->
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

<FlipView ItemsSource="{x:Bind ItemsSourceCollection}" SelectedIndex="{Binding ElementName=MyGridView, Path=SelectedIndex, Mode=TwoWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="local:ItemSource">
            <!-- Your Code -->
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

样本输出：

将GridView 和FlipView 的ItemsSource 设置为listingDatasourceDetail 并使用以下代码向其中添加项目。

string id = groupObject1["id"].GetString();
string title = groupObject1["nama"].GetString();

for (int i = 1; i <= 6; i++)
{
    if (groupObject1[$"img_{i}"] != null && groupObject1.ContainsKey($"img_{i}") && !String.IsNullOrEmpty(groupObject1[$"img_{i}"].GetString()))
    {
        listingDatasourceDetail.Add(new ListingClass
        {
            ID = id,
            Title = title,
            ImageURL = new BitmapImage(new Uri(groupObject1[$"img_{i}"].GetString()))
        });
    }
}

【讨论】：

@Rose 您必须将ItemsSource 更改为您的x:DataType。上面的代码只是一个示例。另外，我附上了样本输出
我已经把ItemSource改成ItemsSource = "{x: Bind listingDatasourceDetail}" 并且x:DataType变成了x:DataType = "local: ListingClass"，但是gridview上显示的数据还是只有1和on翻转视图不能移动。如何处理？注意：我已经更改了上面帖子中的代码。
“gridview 上显示的数据仍然只有 1”是什么意思？您的意思是GridView 仅包含一个元素（或）GridView 选择不会影响FlipView？
我有4到6张图片（取决于JSON数据），但是在gridview上成功显示的图片只有1张。请注意我上面发布的JSON。
@Rose 我会尽快回复您。我有点忙