1.解释说明
- 使用ScrollViewer控件来达到滑动的效果
- 使用WrapPanel的自动换行特性，保证图片在占满横向空间后自动往下排布
- 使用foreach的方法来游历所有的图片url
2.xaml代码示例
<Grid><ScrollViewer VerticalScrollBarVisibility="Auto"><WrapPanel Name="imageWrapPanel" Orientation="Horizontal" Margin="10"><!-- 图片将动态添加到这里 --></WrapPanel></ScrollViewer>
</Grid>3.cs代码示例
//加载url转换成BitmapImage
private async Task<BitmapImage> LoadImageFromUrl(string url)
{try{using (HttpClient client = new HttpClient()){byte[] imageBytes = await client.GetByteArrayAsync(url);using (var stream = new System.IO.MemoryStream(imageBytes)){BitmapImage bitmapImage = new BitmapImage();bitmapImage.BeginInit();bitmapImage.StreamSource = stream;bitmapImage.CacheOption = BitmapCacheOption.OnLoad;bitmapImage.EndInit();return bitmapImage;}}}catch (Exception ex){Console.WriteLine($"Error loading image: {ex.Message}");return null;}
}//显示图片
private async void LoadImagesFromServer()
{// 模拟从服务器获取图片URL列表string[] imageUrls = new string[]{"https://example1.png","https://example2.png","https://example3.png",// 添加更多图片URL};foreach (var imageUrl in imageUrls){BitmapImage bitmapImage = await LoadImageFromUrl(imageUrl);if (bitmapImage != null){Image image = new Image{Source = bitmapImage,Width = 200, // 设置图片宽度Height = 200, // 设置图片高度Margin = new Thickness(5) // 设置图片间距};imageWrapPanel.Children.Add(image);}}
}