Question

我有一个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;
            }
}

ListingClass：

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上提供的图像）。在用户选择图像后，它将在flipview上显示图像。我遇到了麻烦，也就是说，它只能在gridview上显示第一个索引。在flipview中，显示的图像与网格视图上用户选择的图像不匹配，图像无法移动。如何处理？

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": "",

Answer 1

由于您在GridView和FlipView中有相同的元素，因此只需一个ItemsSource列表，这可以减少您的代码，您也不希望调用相同的API来实现相同的图像。

要更改与FlipView所选项目相对应的GridView，您可以使用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>

示例输出：

将ItemsSource和GridView的{{1}}设置为FlipView，然后使用以下代码将项目添加到其中。

listingDatasourceDetail

在gridview和flipview上显示一些图像

1 个答案: