WinFrm程序使用的图片展示控件.带删除的
界面很简单. 新建一个用户控件. 然后再拖一个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);
