欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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样式上也可以进一步美化。

相关标签: WPF 网络图片