WPF随笔(六)--简单的网络图片查看器
程序员文章站
2024-03-08 20:26:34
...
现在有一个很简单的需求,在WPF中显示来自于网络的图片,实现过程如下。
查看单张网络图片
private void ViewImage(string fileUri)
{
BitmapImage bitImage = new BitmapImage();
bitImage.BeginInit();
bitImage.UriSource = new Uri(fileUri, UriKind.Absolute);
bitImage.DecodePixelWidth = 300;
bitImage.EndInit();
imgView.Source = bitImage;
}
在这个方法中使用了BitmapImage,将访问网络图片地址得到的数据流转换为BitmapImage,然后使用Image控件显示。上述代码中的imgView是前台显示的Image控件。
查看多张网络图片
当一次性获取到多张图片地址时,就考虑用自定义控件做一个简单的图片查看器,能够实现上翻下翻查看。
搭建布局。
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Image x:Name="imgView" />
<WrapPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="btnPre" Click="btnPre_Click" Margin="0,0,50,0" Content="上一项">
</Button>
<Button x:Name="btnNext" Click="btnNext_Click" Content="下一项">
</Button>
</WrapPanel>
</Grid>
设置数据源
创建自定义依赖属性DataSource,当DataSource值改变时,修改控件内部数据。
private static DataTable _dt;
#region 自定义依赖属性
public DataTable DataSource
{
get { return (DataTable) GetValue(DataSourceProperty); }
set { SetValue(DataSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for DataSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataSourceProperty =
DependencyProperty.Register("DataSource", typeof (DataTable), typeof (ImageViewer),
new PropertyMetadata(new DataTable(), DataSourceChanged));
private static void DataSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
_dt = e.NewValue as DataTable;
ImageViewer viewer = d as ImageViewer;
viewer.index = 0;
viewer.ViewImage(viewer.index);
}
#endregion
图片浏览方法
核心方法与浏览单张图片相同,增加了上翻查看和下翻查看的方法。
public partial class ImageViewer : UserControl
{
private int index;
private static DataTable _dt;
public ImageViewer()
{
InitializeComponent();
Loaded += ImageViewer_Loaded;
}
private void ImageViewer_Loaded(object sender, RoutedEventArgs e)
{
ViewImage(index);
}
//上一张
private void btnPre_Click(object sender, RoutedEventArgs e)
{
if (index > 0)
{
index--;
}
ViewImage(index);
}
//下一张
private void btnNext_Click(object sender, RoutedEventArgs e)
{
if (index < _dt.Rows.Count - 1)
{
index++;
}
ViewImage(index);
}
//浏览图片
private void ViewImage(int num)
{
if (_dt != null && _dt.Rows.Count > 0)
{
if (num == 0)
{
btnPre.IsEnabled = false;
btnNext.IsEnabled = true;
}
else if (0 < num && num < _dt.Rows.Count - 1)
{
btnPre.IsEnabled = true;
btnNext.IsEnabled = true;
}
else
{
btnPre.IsEnabled = true;
btnNext.IsEnabled = false;
}
//显示图片
string fileUri = _dt.Rows[num]["FilePath"];
BitmapImage bitImage = new BitmapImage();
bitImage.BeginInit();
bitImage.UriSource = new Uri(fileUri, UriKind.Absolute);
// bitImage.DecodePixelWidth = 2048;
bitImage.DecodePixelWidth = 300;
bitImage.EndInit();
imgView.Source = bitImage;
}
else
{
btnPre.IsEnabled = false;
btnNext.IsEnabled = false;
imgView.Source = new BitmapImage(new Uri("../Resources/Images/404.png", UriKind.Relative)); //暂时
}
}
}
如此,一个简单的网络图片查看器就完成了。
如果继续拓展,考虑将数据源的类型改为通用的集合类型,在UI样式上也可以进一步美化。
推荐阅读