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样式
<Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}" >
<WrapPanel Margin="5" IsItemsHost="True" Orientation="Horizontal" ItemHeight="{Binding ElementName=ZoomSlider, Path='Value'}" ItemWidth="{Binding ElementName=ZoomSlider,
Path='Value'}" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ScrollViewer Panel.ZIndex="1" Name="scrolls" Style="{StaticResource for_scrollviewer}" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible" Margin="181,561,1107,0" MaxWidth="560"
Height="174" VerticalAlignment="Top" Canvas.Left="463" Canvas.Top="158" Width="516" HorizontalAlignment="Center" HorizontalContentAlignment="Center">
<ListBox IsSynchronizedWithCurrentItem="True" Name="list1" Style="{StaticResource PhotoListBoxStyle}" Margin="5" SelectionMode="Extended" SelectedIndex="-1" Height="150" SelectionChanged="list1_SelectionChanged"
UIElement.MouseWheel="ImageList_MouseWheel">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Blue" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Blue" Opacity=".3"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="White" />
</Style.Resources>
</Style>
</ListBox.Resources>
</ListBox>
</ScrollViewer>
2.3 Button样式
操作按钮放在一个StackPanel中,当鼠标移入的时候按钮的透明度发生变化,以1:1按钮的样式为例 如下:
<Style x:Key = "ImgButton" TargetType = "P{x:Type Button}">
<Setter Property = "Cursor" Value = "Hand"></Setter>
<Setter Property = "Width" Value = "35"></Setter>
<Setter Property = "Height" Value = "30"></Setter>
</Style>
<Style x:Key = "UndoStyle" TargetType = "{x:Type Button}" BasedOn = "{StaticResource ImgButton}">
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border>
<Image Name="img" Source="/DoctorOld;component/Images/undo.png">
</Image>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.7">
</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图片浏览器(显示大图、小图等)的更多相关文章
- 制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
- wpf图片浏览器,实现缩放平移操作图片切换等功能
wpf经常要用到控件来查看图片,尤其是高清图片,于是做了一个例子: 1.定义图片的队列,用list来存. private readonly List<string> files; 2.切换 ...
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...
- 用WPF窗体打造个性化界面的图片浏览器
原文:用WPF窗体打造个性化界面的图片浏览器 本文使用WPF窗体(XAML及C#)与Win Form控件(FolderBrowserDialog)结合的方式, 演示制作了一个简易漂亮的WPF图片浏览器 ...
- iOS 新浪微博-5.3 首页微博列表_集成图片浏览器
实际上,我们可以使用李明杰在教程里集成的MJPhotoBrowser,地址: http://code4app.com/ios/快速集成图片浏览器/525e06116803fa7b0a000001 使用 ...
- 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用
介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...
- 【Android 应用开发】AndroidUI设计 之 图片浏览器
图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...
- AndroidUI设计 之 图片浏览器
图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...
- iOS:第三方框架MJPhotoBrowser图片浏览器的使用
介绍:MJPhotoBrowser这个第三方库是MJ老师封装的一套用来浏览图片的浏览器,可是是本地图片.网络图片.gif图片等,其也依赖了SDWebImage.SVProgressHUD.YLGIFI ...
随机推荐
- Python爬虫之路——简单的网页抓图
转载自我自己的博客:http://www.mylonly.com/archives/1401.html 用Python的urllib2库和HTMLParser库写了一个简单的抓图脚本.主要抓的是htt ...
- Tidhy
JavaBean.hbm.xml(hibernate配置方面的): <?xml version="1.0" encoding="UTF-8"?> & ...
- (十四)RabbitMQ消息队列-启用SSL安全通讯
原文:(十四)RabbitMQ消息队列-启用SSL安全通讯 如果RabbitMQ服务在内网中,只有内网的应用连接,我们认为这些连接都是安全的,但是个别情况我们需要让RabbitMQ对外提供服务.这种情 ...
- Apache+tomcat的整合 分类: C_OHTERS 2014-05-07 15:08 293人阅读 评论(0) 收藏
http://blog.csdn.net/stefyue/article/details/6918542 为什么要做这个整合呢?当然,首先想到是就是Apache和Tomcat的区别.正因为有区别,有各 ...
- php 根据给定的年份和月份获取该年份该月份的起始和结束时间
function getShiJianChuo($nian=0,$yue=0){ if(empty($nian) || empty($yue)){ $now = time(); $nian = dat ...
- CGI原理解析之二------WEB服务和CGI交互数据
#include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/wait.h ...
- [Angular Unit Testing] Shallow Pipe Testing
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...
- 定时清理tomcat日志文件
原文链接:https://blog.csdn.net/qq_37936542/article/details/78788466 需求:最近公司服务器发现磁盘经常会被占满,查其原因是因为大量的日志文件. ...
- [React] Public Class Fields with React Components
Public Class Fields allow you to add instance properties to the class definition with the assignment ...
- 解决ThinkPad x1 发热的问题
F1进入BIOS界面 将intel speedstep设置为禁用 将CPU Power Manager设置为禁用 重启电脑 电脑不再发热