WPF图片浏览器（显示大图、小图等）

1.概述

最近利用WPF做了一个图片浏览器，能够将文件夹中的所有图片以小图的形式显示，并将选中的图片以512*512大小显示。显示大图当然用的是WPF自带的Image控件，而显示小图则需要将所有的图片放入ListBox控件中，ListBox里的每一个Item为Image控件。为了方便显示多张小图，在ListBox控件外加入了ScrollViewer控件，以便可以拖动显示ListBox中的Item。并实现了对图片的一系列操作，如放大、缩小、恢复1:1的比例、上一张、下一张等功能。效果图如下：

2.XAML设计

2.1 ScrollViewer样式

即为滚动条添加一个动画，只有鼠标移到滚动条或是通过滑轮切换图片，或是连续点击上一张、下一张按钮时，滚动条才会显示，其他状态下隐藏。

2.2 ListBox样式

<Setter.Value>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ListBox.Resources>

<Style.Resources>

</Style.Resources>

</Style>

</ListBox.Resources>

</ListBox>

</ScrollViewer>

2.3 Button样式

操作按钮放在一个StackPanel中，当鼠标移入的时候按钮的透明度发生变化，以1:1按钮的样式为例如下：

</Style>

<Setter.Value>

</Image>

</Border>

<ControlTemplate.Triggers>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

3.后台代码

3.1 初始化

首先定义一个ArrayList用于存放图片的名称，即 ArrayList myArrayList = new ArrayList();

然后将指定文件夹中的所有图像的名称信息放到myArrayList中

DirectoryInfo Dir = new DirectoryInfo("D:\\myPic);

foreach (FileInfo file in Dir.GetFiles("*.png", System.IO.SearchOption.AllDirectories))

{

str = file.ToString();

myArrayList.Add(str);

}

如果图片的数量大于0，就执行AddImg（）函数

if (newArrayList.Count > 0)

{

for (int i = 0; i < newArrayList.Count; i++)

{

AddImg("D:\\myPic + "\\" + newArrayList[i].ToString());

}

将图片添加到ListBox中的函数如下：

public void AddImg(string szPath)

{

string[] s = szPath.Split(new char[] { '\\' }); //按照“\\”截取字符串，即为了获取图片的名称

System.Windows.Controls.Image listImage = new System.Windows.Controls.Image(); //创建一个Image控件

Border br = new Border();

BitmapImage bitmapImage = new BitmapImage();

ListBoxItem newListBox = new ListBoxItem(); //创建一个ListBoxItem，作为ListBox的元素

//将指定路径的图片加载到名为listImage的Image控件中，请参考http://blog.csdn.net/wangshubo1989/article/details/46710411

bitmapImage.BeginInit();

bitmapImage.CacheOption = BitmapCacheOption.OnLoad;

bitmapImage.UriSource = new Uri(szPath);

bitmapImage.EndInit();

bitmapImage.Freeze();

listImage.Source = bitmapImage;

//设置border的高、宽、圆角

br.Width = 106;

br.Height = 106;

br.CornerRadius = new CornerRadius(10);

Label PicLabel = new Label();//鼠标移到图片上显示图片的名称

listImage.ToolTip = s[2]; //获得图片的名称，例如全路径为 D：\\myPic\\123.png，即将提示的字符串赋值为123.png

//Image添加到Border中

br.Child = listImage;

br.Padding = new System.Windows.Thickness((float)1.1f);

br.Background = System.Windows.Media.Brushes.White;

br.BorderThickness = new System.Windows.Thickness((int)3);

//阴影效果

DropShadowEffect myDropShadowEffect = new DropShadowEffect();

// Set the color of the shadow to Black.

System.Windows.Media.Color myShadowColor = new System.Windows.Media.Color();

myShadowColor.A = 255;

// Note that the alpha value is ignored by Color property.

// The Opacity property is used to control the alpha.

myShadowColor.B = 50;

myShadowColor.G = 50;

myShadowColor.R = 50;

myDropShadowEffect.Color = myShadowColor;

// Set the direction of where the shadow is cast to 320 degrees.

myDropShadowEffect.Direction = 310;

// Set the depth of the shadow being cast.

myDropShadowEffect.ShadowDepth = 20;

// Set the shadow softness to the maximum (range of 0-1).

myDropShadowEffect.BlurRadius = 10;

// Set the shadow opacity to half opaque or in other words - half transparent.

// The range is 0-1.

myDropShadowEffect.Opacity = 0.4;

// Apply the effect to the Button.

newListBox.Effect = myDropShadowEffect;

newListBox.Content = br;

newListBox.Margin = new System.Windows.Thickness((int)10);

newListBox.DataContext = szPath;

list1.Items.Add(newListBox); //list1为界面上ListBox控件的名称

list1.SelectedIndex = list1.Items.Count - 1;

scrolls.ScrollToRightEnd(); //使得滚动条滚到最后， scrolls为ScrollViewer控件的名称

}

3.2 放大

首先写一个图片大小变化的函数，参数为布尔型，用于判断是放大还是缩小，其中image1为显示大图的Image控件的名称

private void ChangImgSize(bool big)

{

Matrix m = image1.RenderTransform.Value;

System.Windows.Point p = new System.Windows.Point((image1.ActualWidth) / 2, (image1.ActualHeight) / 2);

if (big)

{

m.ScaleAtPrepend(1.1, 1.1, p.X, p.Y);

}

else

{

m.ScaleAtPrepend(1 / 1.1, 1 / 1.1, p.X, p.Y);

}

image1.RenderTransform = new MatrixTransform(m);

}

所以对于点击放大按钮函数如下：

private void btnBig_Click(object sender, RoutedEventArgs e)

{

ChangImgSize(true);

}

同时，可以通过滚动鼠标滑轮来进行放大缩小，通过判断e.Delta的正负来判读是向上还是向下滚动鼠标换轮

private void Image_MouseWheel(object sender, RoutedEventArgs e)

{

ChangImgSize(e.Delta>0);

}

3.3 缩小

原理如上，顾点击缩小按钮的函数如下

private void btnSmall_Click(object sender, RoutedEventArgs e)

{

ChangImgSize(false);

}

同时，可以通过滚动鼠标滑轮来进行缩小

3.4 恢复1:1

点击1:1按钮即恢复512*512的大小的图像

private void btnUndo_Click(object sender, RoutedEventArgs e)//恢复图像512*512大小

{

image1.RenderTransform = new MatrixTransform(new Matrix(1, 0, 0, 1, 0, 0));

}

3.5 下一张

private void nextStyle_Click(object sender, RoutedEventArgs e)//点击下一张按钮

{

m_nImgCount = list1.SelectedIndex + 1; //m_nImgCount 为静态全局变量，用于存储当前小图的数量

if (m_nImgCount < m_nPicNum)

{

list1.SelectedIndex++;

BitmapImage bitmapImage1 = new BitmapImage();

bitmapImage1.BeginInit();

bitmapImage1.CacheOption = BitmapCacheOption.OnLoad;

bitmapImage1.UriSource = new Uri("D:\\myPic" + newArrayList[list1.SelectedIndex].ToString());

bitmapImage1.EndInit();

bitmapImage1.Freeze();

image1.Source = bitmapImage1;

scrolls.ScrollToHorizontalOffset(list1.SelectedIndex * 130);

}

else

{

MessageBox.Show("No Image");

}

3.6 上一张

原理和下一张操作相同，不在赘述。

3.7 删除

请参照文章 http://blog.csdn.net/wangshubo1989/article/details/46710411

4.总结

一个图片查看器就此呈现在你的眼前，可以进一步的丰富界面效果。如果有疑问、错误、代码优化、需要更多源码等问题，欢迎留言。

邮箱：wangshubo1989@126.com

WPF图片浏览器（显示大图、小图等）相关推荐

php鼠标显示图片,鼠标放在图片上显示大图的JS代码
显示大图和隐藏大图的js代码: //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; ...
用WPF窗体打造个性化界面的图片浏览器
本文使用WPF窗体(XAML及C#)与Win Form控件(FolderBrowserDialog)结合的方式, 演示制作了一个简易漂亮的WPF图片浏览器. 首先看看运行中的样子: XAML源码: ...
【Android 应用开发】AndroidUI设计之图片浏览器
图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...
jQuery 仿淘宝鼠标悬停显示大图效果
页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果. <script type="text/javascript& ...
【Android】显示高清大图，可缩放类库 - SubsamplingScaleImageView（可用于做图片浏览器）使用说明
之前的图片浏览器一直都是压缩过的bitmap,在显示一些长图.高清原图的时候就杯具了,全是马赛克,后来需求来了,只好借助第三方库,功夫不负有心人,找到一个不错的库,功能也齐全,效果也好,现在就推荐给大 ...
功能强大漂亮的js图片相册,js点击小图显示大图
原生js点击图片触发弹窗页面显示模糊的小图片(small_X.jpg),点击全屏显示高清大图片(large_X.jpg) 可实现放大.缩小.拖拽.旋转.上一张.下一张以下为demo相关页面展示: ...
Android开发之--读取文件夹下图片生成略缩图并点击显示大图
这是一个简单的Demo,目的是:读取文件夹下图片生成略缩图并点击显示大图. 先新建一个工程,创建一个ThumbnailsWindows的类,继承LinearLayout.代码如下: package o ...
图片的略小图图片不显示的处理方法
刚才写博客不小心勾选了其中的一项图片的略小图不显示图片只显示背景,例如如下让人感觉很不好, 处理方法: 也是开发文件夹,计算机,或我的电脑找到工具点击 ---在点击下面的文件夹选项会弹出一个界面如 ...
php帝国系统调出图片内空,帝国CMS图集字段的大图,小图,说明的调用方法
本文实例讲述了帝国CMS图集字段的大图,小图,说明的调用方法.分享给大家供大家参考.具体方法如下: 复制代码代码如下: $arr = array(); $arr = $navinfor['morepi ...

WPF图片浏览器（显示大图、小图等）

WPF图片浏览器（显示大图、小图等）相关推荐

最新文章

热门文章