单击gridview上的图像时，在flipview上显示图像
我的json如下：
我想在gridview上的图库中显示数据，然后如果用户点击gridview上的图像，它将根据所选图像在flipview上显示更大尺寸的图片。我遇到了麻烦，就是当选择了gridview上的图像时，它总是在flipview上显示第一个索引的图像（不符合用户选择的图片）。
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;
}
如何处理？
1 个答案:
答案 0 :(得分：0)
首先，单击该项目时无需再次获取数据。加载数据时，将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
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？