在gridview和flipview上显示一些图像
我有一个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": "",
1 个答案:
答案 0 :(得分：0)
由于您在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
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？