WPF随笔（六）--查看网络图片

现在有一个很简单的需求，在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样式上也可以进一步美化。