WinFrm程序使用的图片展示控件.带删除的
2013-09-02 12:09
253 查看
界面很简单. 新建一个用户控件. 然后再拖一个WebBrowser 控件. 边框什么的.通通为none
先上个使用后的效果图片
上代码
先上个使用后的效果图片
上代码
[System.Runtime.InteropServices.ComVisibleAttribute(true)] public partial class ucWebImageList : System.Windows.Forms.UserControl { public ucWebImageList() { InitializeComponent(); this.webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted); this.webBrowser1.ScrollBarsEnabled = false; } string bigPicDisplay = "display:none;"; int styleMargin_photos = 6; #region 属性 int widthBigPic = 640; /// <summary> /// 大图的宽【单位px】 /// </summary> public int WidthBigPic { get { return widthBigPic; } set { widthBigPic = value; } } int heightBigPic = 400; /// <summary> /// 大图的高【单位px】 /// </summary> public int HeightBigPic { get { return heightBigPic; } set { heightBigPic = value; } } int widthSmallPic = 80; /// <summary> /// 小图的宽【单位px】 /// </summary> public int WidthSmallPic { get { return widthSmallPic; } set { widthSmallPic = value; } } int heightSmallPic = 50; /// <summary> /// 小图的高【单位px】 /// </summary> public int HeightSmallPic { get { return heightSmallPic; } set { heightSmallPic = value; } } bool isBigPicture = false; /// <summary> /// 是否显示大图【设置此属性值会初始化大小图得宽度】 /// </summary> public bool IsBigPicture { get { return isBigPicture; } set { isBigPicture = value; IsBigPriceEvent(); } } List<string> imageListPath = new List<string>(); /// <summary> /// 所有小图的 完整地址url /// </summary> public List<string> ImageListPath { get { return imageListPath; } set { imageListPath = value; } } List<string> imageAltList = new List<string>(); /// <summary> /// 设置鼠标放到图片上显示的文字 /// </summary> public List<string> ImageAltList { get { return imageAltList; } set { imageAltList = value; } } List<string> imageLinkList = new List<string>(); /// <summary> /// 点击小图打开此链接 /// </summary> public List<string> ImageLinkList { get { return imageLinkList; } set { imageLinkList = value; } } List<string> imageBigListPath = new List<string>(); /// <summary> /// 小图对应大图的地址 /// </summary> public List<string> ImageBigListPath { get { return imageBigListPath; } set { imageBigListPath = value; } } int widthImageList = 650; /// <summary> /// 整个图片的宽度 /// </summary> public int WidthImageList { get { return widthImageList; } set { widthImageList = value; UpdateBigPicWidth(); } } int speed = 1; /// <summary> /// 滚动的速度 越大越慢 /// </summary> public int Speed { get { return speed; } set { speed = value; } } int spec = 20; /// <summary> /// 滚动间距 越大滚动越快 /// </summary> public int Spec { get { return spec; } set { spec = value; } } int opa = 100; /// <summary> /// 滤镜效果 越小越明显【100为没有滤镜效果】 /// </summary> public int Opa { get { return opa; } set { opa = value; } } bool isLink = false; /// <summary> /// 点击图片是否可以打开图片链接[浏览器方式打开][默认不可打开] /// </summary> public bool IsLink { get { return isLink; } set { isLink = value; } } List<string> imgID = new List<string>(); /// <summary> /// 图片的ID 用于删除图片使用. /// </summary> public List<string> ImgID { get { return imgID; } set { imgID = value; } } //bool isRun = false; ///// <summary> ///// 是否正在加载中.... ///// </summary> //public bool IsRun //{ // get { return isRun; } // set { isRun = value; } //} #endregion #region 修改属性引发的方法 /// <summary> /// 当设定了图片列表。即修改大图的宽度 /// </summary> private void UpdateBigPicWidth() { WidthBigPic = widthImageList; } /// <summary> /// 当属性IsBigPicture改变时执行的方法 /// </summary> private void IsBigPriceEvent() { if (isBigPicture) { bigPicDisplay = "display:block;"; styleMargin_photos = 10; int Height = this.webBrowser1.Height - 25; double hsp = Height * 0.23; double hbp = Height * 0.75; hsp = hsp.ToString().IndexOf('.') < 0 ? (hsp + 0.01) : hsp; hbp = hbp.ToString().IndexOf('.') < 0 ? (hbp + 0.01) : hbp; HeightSmallPic = int.Parse(hsp.ToString().Substring(0, hsp.ToString().IndexOf('.'))); HeightBigPic = int.Parse(hbp.ToString().Substring(0, hbp.ToString().IndexOf('.'))); this.WidthImageList = this.Width - 20; //设置列表的宽度等于用户控件的宽度 } else { bigPicDisplay = "display:none;"; styleMargin_photos = 6; HeightSmallPic = this.webBrowser1.Height - 20; WidthSmallPic = HeightSmallPic; this.WidthImageList = this.Width - 20; //设置列表的宽度等于用户控件的宽度 } } #endregion #region 设置图片 /// <summary> /// 快捷设置图片[大图地址将与小图地址一样.alt会为空] /// </summary> /// <param name="list">传入小图地址</param> /// <param name="isLink"></param> public void SetImageList(List<string> list) { for (int i = 0; i < list.Count; i++) imageAltList.Add(""); this.imageListPath = list; if (!IsLink) { for (int i = 0; i < list.Count; i++) this.imageLinkList.Add(""); } else { this.imageLinkList = list; } this.imageBigListPath = list; } /// <summary> /// 添加一个图片 /// </summary> /// <param name="imgsrc">小图地址</param> /// <param name="imgalt">鼠标放小图上显示的字符</param> /// <param name="imglink">点击此图片打开得地址</param> /// <param name="imgBigsrc">此小图对应的大图地址</param> public void SetImageList(string imgsrc, string imgalt, string imglink, string imgBigsrc) { this.imageListPath.Add(imgsrc); this.imageAltList.Add(imgalt); this.imageLinkList.Add(imglink); this.imageBigListPath.Add(imgBigsrc); } /// <summary> /// 设置图片 /// </summary> /// <param name="path">图片路径【不含文件名】</param> /// <param name="fileName">图片文件名【以参数c字符分隔】</param> /// <param name="c">分隔文件名的字符</param> public void SetImageList(string path, string fileName, char c) { List<string> ImageListPath = fileName.Split(c).ToList<string>(); for (int i = 0; i < ImageListPath.Count; i++) { if (ImageListPath[i] != "") ImageListPath[i] = path + ImageListPath[i]; } SetImageList(ImageListPath); } #endregion /// <summary> /// 清除数据 /// </summary> public void ClearImageList() { this.imageAltList.Clear(); this.imageBigListPath.Clear(); this.imageLinkList.Clear(); this.imageListPath.Clear(); this.webBrowser1.DocumentText = ""; } /// <summary> /// 加载控件数据【运行前需要对imageListPath属性赋值】 /// </summary> public void Run() { StringBuilder strHtml = new StringBuilder(); if (imageListPath.Count > 0) { strHtml.Append(GetHTML()); } this.webBrowser1.DocumentText = strHtml.ToString(); webBrowser1.ObjectForScripting = this; //用于前台JS调用后台方法. } /// <summary> /// 停止文档加载[并同时把isRun修改为false] /// </summary> public void Stop() { if (this.webBrowser1.ReadyState != WebBrowserReadyState.Complete) { this.webBrowser1.Stop(); //IsRun = false; } } /// <summary> /// 根据属性list拼接字符串html /// </summary> /// <returns></returns> private string GetHTML() { StringBuilder strHtml = new StringBuilder(); strHtml.Append("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); strHtml.Append("<html xmlns=\"http://www.w3.org/1999/xhtml\">"); strHtml.Append("<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />\n<title></title>\n"); strHtml.Append("<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />"); strHtml.Append("<style type=\"text/css\">\n"); strHtml.Append("body {margin:0;font:12px Verdana;text-align:center;}\n"); strHtml.Append("#tbody {width:" + (WidthImageList + 10) + "px;margin:0px auto;text-align:left; border:1px solid white; }\n"); strHtml.Append("#mainbody {width:" + (widthBigPic) + "px;margin:5px;border:1px solid #ccc;padding:1px; " + bigPicDisplay + " }\n"); strHtml.Append("#mainphoto {cursor:pointer;display:block;}\n"); strHtml.Append("#goleft {float:left;clear:left;margin:6px 5px 0px 3px;}\n"); strHtml.Append("#goright {float:right;clear:right;margin:6px 3px 0px 5px;}\n"); strHtml.Append("#photos {width:" + (WidthImageList - 22 - 13) + "px;height:" + (HeightSmallPic + 4) + "px;line-height:" + (HeightSmallPic + 4) + "px;border:1px solid white;margin:" + styleMargin_photos + "px 0;overflow:hidden;}\n"); strHtml.Append("#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #ccc;}\n"); strHtml.Append(".txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}\n"); strHtml.Append("</style>\n</head>"); strHtml.Append("<body><div id=\"tbody\"><div id=\"mainbody\">"); strHtml.Append("<img src=\"" + imageListPath[0] + "\" alt=\"\" width=\"" + WidthBigPic + "px\" height=\"" + heightBigPic + "px\" id=\"mainphoto\" rel=\"" + imageListPath[0] + "\" name=\"" + imageListPath[0] + "\" /></div>"); strHtml.Append("<span id=\"goleft\" style=\"width:11px; height:" + (HeightSmallPic + 4) + "px; text-align:center; line-height:" + (HeightSmallPic + 4) + "px; border:1px solid #ccc;\"><</span>"); strHtml.Append("<span id=\"goright\" style=\"width:11px; height:" + (HeightSmallPic + 4) + "px; text-align:center; line-height:" + (HeightSmallPic + 4) + "px;border:1px solid #ccc;\">></span><div id=\"photos\"><div id=\"showArea\">"); for (int i = 0; i < imageListPath.Count; i++) { /* SRC: 缩略图地址 REL: 大图地址 NAME: 网址 */ string del = ""; if (imgID.Count > 0) { del = " id=\"" + ImgID[i] + "\" ondblclick=\"fundel(this)\""; } strHtml.Append("<img " + del + " src=\"" + ImageListPath[i] + "\" alt=\"" + ImageAltList[i] + "\" width=\"" + widthSmallPic + "px\" height=\"" + HeightSmallPic + "px\" rel=\"" + ImageBigListPath[i] + "\" name=\"" + ImageLinkList[i] + "\" />"); } strHtml.Append("</div></div></div></body></html>"); //javascript strHtml.Append("<script language=\"javascript\" type=\"text/javascript\"> function fundel(obj){ if(!confirm('确定要删除此图片?')) return; var did= obj.id; obj.parentNode.removeChild(obj); window.external.DeleteImage(did); } \n" + "var browse = window.navigator.appName.toLowerCase(); \n" + "var MyMar; \n" + "var speed = " + Spec + "; \n" + "var spec = " + Spec + "; \n" + "var minOpa = 80; \n" + "var maxOpa = 100; \n" + "var spa = 2; \n" + "var w = 0; \n" + "spec = (browse.indexOf(\"microsoft\") > -1) ? spec : ((browse.indexOf(\"opera\") > -1) ? spec*10 : spec*20); \n" + "function $(e) {return document.getElementById(e);} \n" + "function goleft() {$('photos').scrollLeft -= spec;} \n" + "function goright() {$('photos').scrollLeft += spec;} \n" + "function setOpacity(e, n) { \n" + " if (browse.indexOf(\"microsoft\") > -1) e.style.filter = 'alpha(opacity=' + n + ')'; \n" + " else e.style.opacity = n/100; \n" + "} \n" + "$('goleft').style.cursor = 'pointer'; \n" + "$('goright').style.cursor = 'pointer'; \n" + "$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);} \n" + "$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);} \n" + "$('mainphoto').onclick = function() { var url = this.getAttribute('name'); if(url != '') window.open(url);} \n" + "$('goleft').onmouseover = function() { MyMar=setInterval(goleft, speed);} \n" + "$('goleft').onmouseout = function() { clearInterval(MyMar);} \n" + "$('goright').onmouseover = function() { MyMar=setInterval(goright,speed);} \n" + "$('goright').onmouseout = function() { clearInterval(MyMar);} \n" + "window.onload = function () { \n" + " setOpacity($('mainphoto'), minOpa); \n" + " var rHtml = ''; \n" + " var p = $('showArea').getElementsByTagName('img'); \n" + " for (var i = 0; i < p.length; i++) { \n" + " w += parseInt(p[i].getAttribute('width')) + spa; \n" + " setOpacity(p[i], minOpa); \n" + " p[i].onclick = function () { var url = this.getAttribute('name'); if(url != '') window.open(url); } \n" + " p[i].onmouseover = function () { \n" + " setOpacity(this, maxOpa); \n" + " $('mainphoto').src = this.getAttribute('rel'); \n" + " $('mainphoto').setAttribute('name', this.getAttribute('name')); \n" + " setOpacity($('mainphoto'), maxOpa); \n" + " } \n" + " p[i].onmouseout = function () { \n" + " setOpacity(this, minOpa); \n" + " setOpacity($('mainphoto'), minOpa); \n" + " } \n" + " rHtml += '<img src=\"' + p[i].getAttribute('rel') + '\" width=\"0\" height=\"0\" alt=\"\" />'; \n" + " } \n" + " $('showArea').style.width = parseInt(w) + 'px'; \n" + " var rLoad = document.createElement(\"div\"); \n" + " $('photos').appendChild(rLoad); \n" + " rLoad.style.width = \"1px\"; \n" + " rLoad.style.height = \"1px\"; \n" + " rLoad.style.overflow = \"hidden\"; \n" + " rLoad.innerHTML = rHtml; \n" + " } </script> "); return strHtml.ToString(); } /// <summary> /// 删除图片方法.[前台js会调用此方法.无需手动调用.] /// </summary> /// <param name="imgid"></param> public void DeleteImage(string imgid) { onDeleteImage(imgid); } /// <summary> /// 加载完成时. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { if (webBrowser1.ReadyState == WebBrowserReadyState.Complete) { //IsRun = false; //加载完成. 修改加载状态 } } /// <summary> /// 删除图片事件 /// </summary> public event DeleteImage onDeleteImage; } /// <summary> /// 删除图片的委托 /// </summary> /// <param name="imgid"></param> public delegate void DeleteImage(string imgid);
相关文章推荐
- 使用HorizontalScrollView和ImageView编写简单的图片展示程序
- 在安卓4.x上使用Switch控件,并且替换thumb和track的图片时,Switch展示的width会明显大于设置的宽度,导致图片变形
- Halcon的HWindowControl控件在WinForm程序中的使用介绍(重点解决图片缩放的问题)
- Android 控件使用教程(一)—— ListView 展示图片
- Android 在ViewPager中使用的可以画线,放大,保存,点击删除线条的自定义图片显示控件
- Android 控件使用教程(二)—— RecyclerView 展示图片
- Android 控件使用教程(三)—— NineGridImageView 展示图片
- WPF使用Page创建显示不同控件的程序
- TabCtrl控件的使用一则——程序架构
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图(原创)
- UpdatePanel控件中使用GridView时,RowCommand事件执行删除后,GridView不刷新问题。
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- InfoPath2010五分钟新特体验系列之使用图片按钮控件来创建标签导航栏
- Asp.net之使用GridView控件的RowCommand事件实现修改和删除
- 安卓控件使用系列16:ImageView实现图片缩放和旋转
- 一个可以显示图片(包括GIF动画)的ATL控件,以及在RichEdit中如何使用此控件插入图片
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏
- 使用jQuery简单实现产品展示的图片左右滚动功能