InkCanvas绘图使用

实现功能：1、墨迹绘制，点删，图形删，选中墨迹图形

　　　　　2、绘制文字，绘制矩形，圆形，椭圆，绘制图片，绘制箭头

　　　　　3、复制，粘贴功能，撤销功能

　　　　　4、保存墨迹，读取墨迹

效果图：

实现思路：牵涉定制型墨迹的绘制，比如箭头，图片，需自定义inkcanvas和stroke，编写鼠标点击移动放下事件逻辑

自定义stroke

 

public class customstroke : stroke
{
/// <summary>
/// 文本1，图片2
/// </summary>
public int showtype { get; set; } = 0;
/// <summary>
/// 图片信息
/// </summary>
public imagesource bitmapimage { get; set; }
/// <summary>
/// 文本内容
/// </summary>
public string content { get; set; }
/// <summary>
/// 字体大小
/// </summary>
public double fontsize { get; set; }

 

public customstroke(styluspointcollection styluspoints, drawingattributes drawingattributes)
: base(styluspoints, drawingattributes)
{

}
public override stroke clone()
{
customstroke customstroke = new customstroke(base.styluspoints, base.drawingattributes);
customstroke.showtype = showtype;
customstroke.bitmapimage = bitmapimage;
customstroke.content = content;
customstroke.fontsize = fontsize;
return customstroke;
}

 

protected override void drawcore(drawingcontext drawingcontext,
drawingattributes drawingattributes)
{
if(showtype==0)
{
base.draw(drawingcontext, drawingattributes);
return;
}
// allocate memory to store the previous point to draw from.
point prevpoint = new point(double.negativeinfinity,
double.negativeinfinity);

 

// draw linear gradient ellipses between
// all the styluspoints in the stroke.
for (int i = 0; i < this.styluspoints.count; i++)
{
point pt = (point)this.styluspoints[i];
vector v = point.subtract(prevpoint, pt);

 

// only draw if we are at least 4 units away
// from the end of the last ellipse. otherwise,
// we're just redrawing and wasting cycles.
if (v.length > 4)
{

 

if (showtype == 1)
{
label labelnew = new label();
labelnew.content = content;
labelnew.fontsize = fontsize;
var formattedtext = new formattedtext(labelnew.content.tostring(), cultureinfo.currentculture, flowdirection.lefttoright, new typeface(labelnew.fontfamily, labelnew.fontstyle, labelnew.fontweight, labelnew.fontstretch), labelnew.fontsize, brushes.black);
drawingcontext.drawtext(formattedtext, new point(pt.x - formattedtext.width / 2, pt.y - formattedtext.height / 2));
this.drawingattributes.height = formattedtext.height;
this.drawingattributes.width = formattedtext.width;
}
else
{
drawingcontext.drawimage(bitmapimage, new rect(pt.x - 10, pt.y - 10, 20, 20));

 

}

 

}
}
}
}
public enum showtype
{
/// <summary>
/// 取消操作
/// </summary>
none,
/// <summary>
/// 绘制（画笔）
/// </summary>
ink,
/// <summary>
/// 橡皮擦(点擦)
/// </summary>
erasebypoint,
/// <summary>
/// 图形擦（线擦）
/// </summary>
erasebystroke,
/// <summary>
/// 选择图形
/// </summary>
select,
/// <summary>
/// 输入文本
/// </summary>
text,
/// <summary>
/// 绘制矩形
/// </summary>
rectangle,
/// <summary>
/// 绘制圆形
/// </summary>
round,
/// <summary>
/// 绘制椭圆
/// </summary>
ellipse,
/// <summary>
/// 绘制直线
/// </summary>
line,
/// <summary>
/// 绘制横向箭头
/// </summary>
linearrowh,
/// <summary>
/// 绘制纵向箭头
/// </summary>
linearrowv,
/// <summary>
/// 绘制横向箭头(单)
/// </summary>
linearrowhone,
/// <summary>
/// 绘制纵向箭头(单)
/// </summary>
linearrowvone,
/// <summary>
/// 绘制图形
/// </summary>
image

 

}

 

自定义inkcanvas

 

public class customrenderinginkcanvas : inkcanvas
{
private list<dictionary<int, list<stroke>>> listundostroke = new list<dictionary<int, list<stroke>>>();
public customrenderinginkcanvas() : base()
{
this.previewkeydown += customrenderinginkcanvas_previewkeydown;
this.defaultdrawingattributes.width = 1;
}
/// <summary>
/// 加入撤销清单
/// </summary>
/// <param name="stroke"></param>
/// <param name="type">（0新增，1删除）</param>
public void addundostroke(stroke stroke,int type)
{
if(listundostroke.count==10)
{
listundostroke.removeat(0);
}
listundostroke.add(new dictionary<int, list<stroke>>() { { type, new list<stroke>() { stroke } } });
}
/// <summary>
/// 加入撤销清单
/// </summary>
/// <param name="stroke"></param>
/// <param name="type">（0新增，1删除）</param>
public void addundostroke(list<stroke> strokes, int type)
{
if (listundostroke.count == 10)
{
listundostroke.removeat(0);
}
listundostroke.add(new dictionary<int, list<stroke>>() { { type, strokes } });
}

 

/// <summary>
/// 撤销操作
/// </summary>
public void undostroke()
{
if(listundostroke.count != 0)
{
dictionary<int, list<stroke>> dicstroke = listundostroke[listundostroke.count - 1];
int type=0;
list <stroke> strokes=new list<stroke>();
foreach (var key in dicstroke.keys)
{
type = key;
strokes = dicstroke[key];
}
if(type==0) //新增做删除
{
foreach (var stroke in strokes)
{
this.strokes.remove(stroke);
}
}else
{
foreach (var stroke in strokes)
{
this.strokes.add(stroke);
}
}
listundostroke.remove(dicstroke);
}
}
strokecollection strokesselect;
private void customrenderinginkcanvas_previewkeydown(object sender, keyeventargs e)
{
if (e.key == key.delete)
{
e.handled = true;
if (this.getselectedstrokes().count > 0)
{
list<stroke> listundo = new list<stroke>();
foreach (var stroke in this.getselectedstrokes())
{
listundo.add(stroke);
this.strokes.remove(stroke);
}
addundostroke(listundo, 1);
}

}
else if (e.key == key.c && keyboard.modifiers == modifierkeys.control)
{
strokesselect = this.getselectedstrokes();
e.handled = true;
}
else if (e.key == key.v && keyboard.modifiers == modifierkeys.control)
{
if (strokesselect != null&& strokesselect.count>0)
{
//找到最小坐标
double minxselect = double.maxvalue;
double minyselect = double.maxvalue;
foreach (stroke stroke in strokesselect)
{
double minx = stroke.styluspoints.min(it => it.x);
double miny = stroke.styluspoints.min(it => it.y);
if (minx < minxselect)
{
minxselect = minx;
}
if (miny < minyselect)
{
minyselect = miny;
}

}
point point = mouse.getposition(this);
double mousex = point.x - minxselect;
double mousey = point.y - minyselect;
list<stroke> listundo = new list<stroke>();
foreach (stroke stroke in strokesselect)
{
stroke strokenew = stroke.clone();
styluspointcollection styluspointsnew = new styluspointcollection();
foreach (var styluspoint in stroke.styluspoints)
{
styluspointsnew.add(new styluspoint(styluspoint.x + mousex, styluspoint.y + mousey, styluspoint.pressurefactor));
}
strokenew.styluspoints= styluspointsnew;
this.strokes.add(strokenew);
listundo.add(strokenew);
}
addundostroke(listundo, 0);

 

e.handled = true;
}
}
}
protected override void onselectionchanging(inkcanvasselectionchangingeventargs e)
{
if(e.getselectedelements().count>0)
{
e.cancel = true;
}
}

 

protected override void onstrokecollected(inkcanvasstrokecollectedeventargs e)
{
base.onstrokecollected(e);
addundostroke(e.stroke, 0);
}
protected override void onstrokeerasing(inkcanvasstrokeerasingeventargs e)
{
base.onstrokeerasing(e);
addundostroke(e.stroke, 1);
}

 

}

页面关键代码（因使用了资源图片，只放一些关键代码供参考）因为用了自定义stroks,不能使用inkcanvas自己的保存方法，需自己解析（坑已踩过）

/// <summary>
/// 加载墨迹json
/// </summary>
/// <param name="json"></param>
private void loadjson(string json,customrenderinginkcanvas canvas)
{

foreach (var stroke in jsonhelper.toobject<list<object>>(json))
{
drawingattributes drawingattributes = jsonhelper.toobject<drawingattributes>(jsonhelper.readjsonstring(stroke.tostring(), "drawingattributes"));
styluspointcollection styluspoints = jsonhelper.toobject<styluspointcollection>(jsonhelper.readjsonstring(stroke.tostring(), "styluspoints"));
if (!string.isnullorempty(jsonhelper.readjsonstring(stroke.tostring(), "showtype")))//自定义墨迹
{
customstroke strokenew = new customstroke(styluspoints, drawingattributes);
strokenew.showtype = convert.toint32(jsonhelper.readjsonstring(stroke.tostring(), "showtype"));
strokenew.content = jsonhelper.readjsonstring(stroke.tostring(), "content");
strokenew.fontsize = convert.todouble(jsonhelper.readjsonstring(stroke.tostring(), "fontsize"));
if (!string.isnullorempty(jsonhelper.readjsonstring(stroke.tostring(), "bitmapimage")))
strokenew.bitmapimage = new bitmapimage(new uri(jsonhelper.readjsonstring(stroke.tostring(), "bitmapimage")));
canvas.strokes.add(strokenew);
}
else
{
canvas.strokes.add(new stroke(styluspoints, drawingattributes));
}
}
}
/// <summary>
/// 保存墨迹json
/// </summary>
public bool saveimagejson()
{
try
{

if (file.exists(localsheet))
{
string json = jsonhelper.tojson(this.inkcanvassheet.strokes);
file.writealltext(localsheetjson, json);
}
if (file.exists(localpanela))
{
string json = jsonhelper.tojson(this.inkcanvaspanela.strokes);
file.writealltext(localpanelajson, json);
}
if (file.exists(localpanelb))
{
string json = jsonhelper.tojson(this.inkcanvaspanelb.strokes);
file.writealltext(localpanelbjson, json);
}
return true;
}
catch (exception ex)
{
return false;
}
}

 

private void customrenderinginkcanvas_previewmouseup(object sender, mousebuttoneventargs e)
{
if (strokemove != null)
{
customrenderinginkcanvas inkcanvas = sender as customrenderinginkcanvas;
inkcanvas.addundostroke(strokemove, 0);
strokemove = null;
}
}

stroke strokemove;
private void customrenderinginkcanvas_previewmousemove(object sender, mouseeventargs e)
{
if (e.leftbutton == mousebuttonstate.pressed)
{
customrenderinginkcanvas inkcanvas = sender as customrenderinginkcanvas;
point pointend = e.getposition(inkcanvas);
if (showtype == showtype.rectangle)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointstart.x, pointend.y),
new point(pointend.x, pointend.y),
new point(pointend.x, pointstart.y),
new point(pointstart.x, pointstart.y),
};
addcustomstorke(pointlist, inkcanvas);
}
else if (showtype == showtype.ellipse)
{
list<point> pointlist = generateeclipsegeometry(pointstart, pointend);
addcustomstorke(pointlist, inkcanvas);
}
else if (showtype == showtype.round)
{
list<point> pointlist = generateroundgeometry(pointstart, pointend);
addcustomstorke(pointlist, inkcanvas);
}
else if (showtype == showtype.line)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointend.x, pointend.y)
};
addcustomstorke(pointlist, inkcanvas);
}
else if (showtype == showtype.linearrowh)//横向箭头
{
if (pointend.x < pointstart.x)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointend.x, pointstart.y),
new point(pointend.x+10, pointstart.y+5),
new point(pointend.x, pointstart.y),
new point(pointend.x+10, pointstart.y-5)
};
addcustomstorke(pointlist, inkcanvas);
}
else
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointend.x, pointstart.y),
new point(pointend.x-10, pointstart.y-5),
new point(pointend.x, pointstart.y),
new point(pointend.x-10, pointstart.y+5)
};
addcustomstorke(pointlist, inkcanvas);
}
}
else if (showtype == showtype.linearrowhone)//横向箭头单
{
if (pointend.x < pointstart.x)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointend.x, pointstart.y),
new point(pointend.x+10, pointstart.y+5)
};
addcustomstorke(pointlist, inkcanvas);
}
else
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointend.x, pointstart.y),
new point(pointend.x-10, pointstart.y+5)
};
addcustomstorke(pointlist, inkcanvas);
}
}
else if (showtype == showtype.linearrowv)//纵向箭头
{
if (pointend.y < pointstart.y)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointstart.x, pointend.y),
new point(pointstart.x+5, pointend.y+10),
new point(pointstart.x, pointend.y),
new point(pointstart.x-5, pointend.y+10)
};
addcustomstorke(pointlist, inkcanvas);
}
else
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointstart.x, pointend.y),
new point(pointstart.x+5, pointend.y-10),
new point(pointstart.x, pointend.y),
new point(pointstart.x-5, pointend.y-10)
};
addcustomstorke(pointlist, inkcanvas);
}
}
else if (showtype == showtype.linearrowvone)//纵向箭头(单)
{
if (pointend.y < pointstart.y)
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointstart.x, pointend.y),
new point(pointstart.x+5, pointend.y+10)
};
addcustomstorke(pointlist, inkcanvas);
}
else
{
list<point> pointlist = new list<point>
{
new point(pointstart.x, pointstart.y),
new point(pointstart.x, pointend.y),
new point(pointstart.x+5, pointend.y-10)
};
addcustomstorke(pointlist, inkcanvas);
}
}
}
}
private void addcustomstorke(list<point> pointlist, customrenderinginkcanvas inkcanvas)
{
styluspointcollection point = new styluspointcollection(pointlist);
stroke stroke = new stroke(point)
{
drawingattributes = inkcanvas.defaultdrawingattributes.clone()
};
if (strokemove != null)
{
inkcanvas.strokes.remove(strokemove);
}
inkcanvas.strokes.add(stroke);
strokemove = stroke;
}
private void customrenderinginkcanvas_previewmousedown(object sender, mousebuttoneventargs e)
{
//本身操作不执行
if(showtype == showtype.none|| showtype == showtype.ink || showtype == showtype.erasebypoint || showtype == showtype.erasebystroke || showtype == showtype.select)
{
return;
}
customrenderinginkcanvas inkcanvas = sender as customrenderinginkcanvas;
styluspointcollection styluspoints = new styluspointcollection();
pointstart = e.getposition(inkcanvas);
styluspoints.add(new styluspoint(pointstart.x, pointstart.y));
customstroke customstroke = new customstroke(styluspoints,new drawingattributes());
if (showtype == showtype.image)
{
customstroke.showtype = 2;
customstroke.bitmapimage = imagesourceselect;
inkcanvas.strokes.add(customstroke);
inkcanvas.addundostroke(customstroke, 0);
}
else if(showtype==showtype.text)
{
if(string.isnullorempty(tboxtext.text))
{
vicmessageboxnormal.show("请输入文字！");
return;
}
customstroke.showtype = 1;
customstroke.content = tboxtext.text;
customstroke.fontsize = (double)numfontsize.value;
inkcanvas.strokes.add(customstroke);
inkcanvas.addundostroke(customstroke, 0);
}

}
private list<point> generateeclipsegeometry(point st, point ed)
{
double a = 0.5 * (ed.x - st.x);
double b = 0.5 * (ed.y - st.y);
list<point> pointlist = new list<point>();
for (double r = 0; r <= 2 * math.pi; r = r + 0.01)
{
pointlist.add(new point(0.5 * (st.x + ed.x) + a * math.cos(r), 0.5 * (st.y + ed.y) + b * math.sin(r)));
}
return pointlist;
}
private list<point> generateroundgeometry(point st, point ed)
{
double rlength = math.abs(ed.x - st.x) > math.abs(ed.y - st.y) ? math.abs(ed.x - st.x) : math.abs(ed.y - st.y);
point pointstart = new point(st.x - rlength, st.y - rlength);
point pointend = new point(st.x + rlength, st.y + rlength);
double a = 0.5 * (pointend.x - pointstart.x);
double b = 0.5 * (pointend.y - pointstart.y);
list<point> pointlist = new list<point>();
for (double r = 0; r <= 2 * math.pi; r = r + 0.01)
{
pointlist.add(new point(0.5 * (pointstart.x + pointend.x) + a * math.cos(r), 0.5 * (pointstart.y + pointend.y) + b * math.sin(r)));
}
return pointlist;
}
private point pointstart;
private void vicradiobuttonnormal_click(object sender, routedeventargs e)
{
setinkcanvasstate(inkcanvaseditingmode.none);
vicradiobuttonnormal radiobuttonnormal = sender as vicradiobuttonnormal;
switch(radiobuttonnormal.tooltip)
{
case "输入文字":
showtype = showtype.text;
break;
case "取消操作":
showtype = showtype.none;
break;
case "特殊符号":
showtype = showtype.image;
image image = (image)radiobuttonnormal.template.findname("image1", radiobuttonnormal);
imagesourceselect = image.source;
break;
case "选择图形":
showtype = showtype.select;
setinkcanvasstate(inkcanvaseditingmode.select);
break;
case "橡皮檫":
showtype = showtype.erasebypoint;
setinkcanvasstate(inkcanvaseditingmode.erasebypoint);
break;
case "删除图形":
showtype = showtype.erasebystroke;
setinkcanvasstate(inkcanvaseditingmode.erasebystroke);
break;
case "画笔":
showtype = showtype.ink;
setinkcanvasstate(inkcanvaseditingmode.ink);
break;
case "绘制矩形":
showtype = showtype.rectangle;
//逻辑
break;
case "绘制直线":
showtype = showtype.line;
//逻辑
break;
case "绘制圆":
showtype = showtype.round;
//逻辑
break;
case "绘制椭圆":
showtype = showtype.ellipse;
//逻辑
break;
case "画箭头横":
showtype = showtype.linearrowh;
//逻辑
break;
case "画箭头纵":
showtype = showtype.linearrowv;
//逻辑
break;
case "画箭头横(单)":
showtype = showtype.linearrowhone;
//逻辑
break;
case "画箭头横(纵)":
showtype = showtype.linearrowvone;
//逻辑
break;
}
}
/// <summary>
/// 设置画布编辑状态
/// </summary>
/// <param name="editingmode"></param>
private void setinkcanvasstate(inkcanvaseditingmode editingmode)
{
inkcanvassheet.editingmode = editingmode;
inkcanvaspanela.editingmode = editingmode;
inkcanvaspanelb.editingmode = editingmode;
}

private void btncancel_click(object sender, routedeventargs e)
{
if (inkcanvassheet.visibility == visibility.visible)
{
inkcanvassheet.undostroke();
}else if (inkcanvaspanela.visibility == visibility.visible)
{
inkcanvaspanela.undostroke();
}
else if (inkcanvaspanelb.visibility == visibility.visible)
{
inkcanvaspanelb.undostroke();
}
}

前端xaml布局局部代码

<window.resources>
<converters:imagesourceconveter x:key="imagesourceconveter"/>

<style x:key="radiobuttontab" targettype="radiobutton">
<setter property="background" value="transparent"/>
<setter property="minwidth" value="60"/>
<setter property="isthreestate" value="false"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type radiobutton}">
<border borderthickness="1" x:name="border" borderbrush="#b9b9b9" background="{templatebinding background}" verticalalignment="center">
<label content="{templatebinding content}"/>

</border>
<!--触发器：设置选中状态符号-->
<controltemplate.triggers>
<trigger property="ischecked" value="true">
<setter property="background" value="#ccebf8"></setter>
<setter targetname="border" property="borderbrush" value="#199ed8"></setter>
</trigger>
<trigger property="ismouseover" value="true">
<setter property="background" value="#9de0fc"></setter>
<setter targetname="border" property="borderbrush" value="#199ed8"></setter>
</trigger>

</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
<style x:key="radiobutton" targettype="radiobutton">
<setter property="background" value="transparent"/>
<setter property="isthreestate" value="false"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type radiobutton}">
<border borderthickness="1" x:name="border" width="30" height="30" borderbrush="#b9b9b9" background="{templatebinding background}" verticalalignment="center">
<image x:name="image1" width="25" height="25" source="{templatebinding content,converter={staticresource imagesourceconveter}}"/>

</border>
<!--触发器：设置选中状态符号-->
<controltemplate.triggers>
<trigger property="ischecked" value="true">
<setter property="background" value="#ccebf8"></setter>
<setter targetname="border" property="borderbrush" value="#199ed8"></setter>
</trigger>
<trigger property="ismouseover" value="true">
<setter property="background" value="#9de0fc"></setter>
<setter targetname="border" property="borderbrush" value="#199ed8"></setter>
</trigger>

</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
<style x:key="button" targettype="button">
<setter property="background" value="transparent"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type button}">
<border borderthickness="1" x:name="border" width="40" height="40" borderbrush="#b9b9b9" background="{templatebinding background}" verticalalignment="center">
<image x:name="image1" width="25" height="25" source="{templatebinding content,converter={staticresource imagesourceconveter}}"/>

</border>
<!--触发器：设置选中状态符号-->
<controltemplate.triggers>
<trigger property="ismouseover" value="true">
<setter property="background" value="#9de0fc"></setter>
<setter targetname="border" property="borderbrush" value="#199ed8"></setter>
</trigger>

</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
</window.resources>
<grid>
<grid.columndefinitions>
<columndefinition width="auto"/>
<columndefinition width="*"/>
</grid.columndefinitions>
<grid.rowdefinitions>
<rowdefinition height="auto"/>
<rowdefinition height="auto"/>
<rowdefinition height="*"/>
</grid.rowdefinitions>
<controls:vicwrappanelnormal grid.column="0" grid.rowspan="3" margin="5" width="60">
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="输入文字" content="输入文字.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="取消操作" content="取消操作.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="绘制矩形" content="绘制矩形.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="橡皮檫" content="橡皮檫.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="绘制直线" content="绘制直线.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="删除图形" content="删除图形.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="绘制圆" content="绘制圆.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="选择图形" content="选择图形.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="绘制椭圆" content="绘制椭圆.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="画笔" content="画笔.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicbuttonnormal style="{staticresource button}" tooltip="取消" content="取消.bmp" x:name="btncancel" click="btncancel_click"/>

<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="画箭头横" content="画箭头.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="画箭头纵" content="画箭头2.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="画箭头横(单)" content="画箭头3.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="画箭头横(纵)" content="画箭头4.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号16.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号17.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号18.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号19.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号20.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号21.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号22.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号23.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号2.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号3.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号4.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号5.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号6.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号7.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号8.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号9.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号10.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号11.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号12.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号13.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号14.bmp" click="vicradiobuttonnormal_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobutton}" tooltip="特殊符号" content="插入特殊符号15.bmp" click="vicradiobuttonnormal_click"/>
</controls:vicwrappanelnormal>

<controls:vicstackpanelnormal orientation="horizontal" grid.column="1" grid.row="0" margin="5">
<controls:viclabelnormal content="笔画："/>
<controls:vicnumericupdown x:name="numwidth" valuechanged="numwidth_valuechanged" minimum="1" maximum="50" value="1" margin="0,5,5,5" numkind="integernum"/>
<controls:viclabelnormal content="文字："/>
<controls:victextboxnormal x:name="tboxtext" width="120" margin="0,5,5,5"/>
<controls:viclabelnormal content="字体："/>
<controls:vicnumericupdown x:name="numfontsize" minimum="6" maximum="72" value="12" numkind="integernum"/>
</controls:vicstackpanelnormal>

<controls:vicstackpanelnormal orientation="horizontal" grid.column="1" grid.row="1">
<controls:vicradiobuttonnormal style="{staticresource radiobuttontab}" content="sheet图" ischecked="true" name="rbtnsheet" click="rbtnsheet_click"/>
<controls:vicradiobuttonnormal style="{staticresource radiobuttontab}" content="panel a" name="rbtnpanela" click="rbtnpanela_click" />
<controls:vicradiobuttonnormal style="{staticresource radiobuttontab}" content="panel b" name="rbtnpanelb" click="rbtnpanelb_click"/>
</controls:vicstackpanelnormal>
<local:customrenderinginkcanvas x:name="inkcanvassheet" grid.column="1" grid.row="2">
<controls:vicimagenormal x:name="imagesheet" width="{binding elementname=inkcanvassheet,path=actualwidth}" height="{binding elementname=inkcanvassheet,path=actualheight}"/>
</local:customrenderinginkcanvas>

<local:customrenderinginkcanvas x:name="inkcanvaspanela" grid.column="1" grid.row="2" visibility="hidden">
<controls:vicimagenormal x:name="imagepanela" width="{binding elementname=inkcanvaspanela,path=actualwidth}" height="{binding elementname=inkcanvaspanela,path=actualheight}"/>
</local:customrenderinginkcanvas>
<local:customrenderinginkcanvas x:name="inkcanvaspanelb" grid.column="1" grid.row="2" visibility="hidden">
<controls:vicimagenormal x:name="imagepanelb" width="{binding elementname=inkcanvaspanelb,path=actualwidth}" height="{binding elementname=inkcanvaspanelb,path=actualheight}"/>
</local:customrenderinginkcanvas>

</grid>

 

触发器

 

public class imagesourceconveter : ivalueconverter
{
public object convert(object value, type targettype, object parameter, system.globalization.cultureinfo culture)
{
imagesource source = new bitmapimage();
try
{
if (value != null && !string.isnullorwhitespace(value.tostring()))
{
imagesource imagesource = new bitmapimage(new uri("pack://application:,,,/showdemo;component/images/" + value.tostring()));
return imagesource;
}
else
{
return source;
}
}
catch (exception ex)
{
return source;
}
}

 

public object convertback(object value, type targettype, object parameter, system.globalization.cultureinfo culture)
{
return null;
}
}