1.解释说明
-
使用ScrollViewer控件来达到滑动的效果
-
使用WrapPanel的自动换行特性,保证图片在占满横向空间后自动往下排布
-
使用foreach的方法来游历所有的图片url
2.xaml代码示例
cs
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<WrapPanel Name="imageWrapPanel" Orientation="Horizontal" Margin="10">
<!-- 图片将动态添加到这里 -->
</WrapPanel>
</ScrollViewer>
</Grid>
3.cs代码示例
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);
}
}
}