Display some images on gridview and flipview
Question
I have a gridview that contains some images with XAML and code below:
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>
Code:
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;
}
And when the user clicks the image on the gridview, it will show a flipview with a larger image with XAML and the code below:
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>
Code:
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; }
}
I want to show all the images on the gridview (4 to 6 images corresponding to the image provided on JSON). And after the user selects the image, it will show the image on the flipview. I'm having trouble, that is, it can only show the first index only on the gridview. And in flipview the displayed image does not match the user's selected image on the gridview and the image can not be shifted. How to handle it?
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 answers
solution1
0 ACCPTED 2017-08-15 08:27:09
Since you have same elements in GridView and FlipView , Have a single ItemsSource list this can reduce your code also you don't want to call the same API to go the same Image.
To change the FlipView corresponding to GridView Selected Item, you can use SelectedIndex="{Binding ElementName=MyGridView, Path=SelectedIndex, Mode=TwoWay}"
Sample Code:
<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>
Sample Output:
Set ItemsSource of both GridView and FlipView to listingDatasourceDetail and use below code to Add item to it.
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()))
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display a stream of images in FlipView?
How to display images in a flipview from SQL server
Binding a FlipView with GridView
Display Multiple Images in a gridview
Binding 2 images inside a FlipView
Flipview inside a gridview inside a semantizoom
Display images in gridview on runtime programatically
How to display both images and media element inside flipview in windows app 8.1
How to show 3 images in the FlipView with DataBinding
Displays the image on the flipview, when the image on the gridview is clicked
Related Tags