C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    最近在写WPF界面的时候遇到一个情况,由于界面已经由UI设计师用PS和AI软件画好了,在做UI的时候直接照着图做就行.

wpf中UI编辑是非常方便的.但是如果界面已经有PS或者AI的原图的时候,如果所有的控件都用xaml代码重新画,那势必会占用大量重复的时间. 将PS的原图切图意识一个方法,但是有些UI的控件需要我们在拖动界面的时候或者有些时候放大和缩小,这样切图的png图片如果DPI很低就会失真,DPI高优惠占用大量的资源空间.有没有一个方法能直接使用PS中自定义的形状等资源呢?

在VS2015之前是很方便的,可以用Blend直接导入PS的SVG路径资源,但是在VS2015 及2017以后,胃软取消了导入功能,导致直接使用没有那么方便了.

今天我们就来看看在没有导入功能的情况下怎么使用第三方编辑好的SVG图像.

1. 取SVG路径代码

在PS中可以直接复制图层为SVG : 点击需要导出的图层 --> 右键 --> 复制SVG --> 粘贴到文本编辑器中

也可以直接导出为SVG文件. AI中直接另存为选择SVG文件就行了.

2.取出需要的路径代码

导出的SVG代码长什么样子呢? 我们来看看:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="图层_2"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="671.571px"
	 height="841.89px" viewBox="0 0 671.571 841.89" xml:space="preserve">
<g>
	<polygon fill="#101010" points="382.258,914.655 376.335,908.732 341.414,943.75 353.227,943.75 	"/>
	<polygon fill="#101010" points="325.899,927.681 337.743,927.68 366.514,898.911 360.591,892.988 	"/>
	<polygon fill="#101010" points="391.373,923.771 348.227,966.916 308.328,927.021 351.477,883.874 351.364,883.762 
		286.336,893.748 286.352,1003.748 316.353,1033.811 316.383,990.787 361.383,983.739 361.341,1033.754 391.347,1033.775 
		391.359,988.78 371.371,968.799 391.384,948.765 391.394,923.791 	"/>
</g>
<path fill="#101010" d="M279.305,1006.818l0.068-63.068l-258.172,0.047l-4.865,89.959l290.132-0.002L279.305,1006.818z
	 M92.208,952.799c-0.038,0.449-0.133,2.084-0.283,4.9l-0.339,6.143c-0.076,1.314-0.113,2.648-0.113,4
	c-7.274-0.301-13.379-0.453-18.316-0.453c-5.427,0-9.093,0.01-10.995,0.029c-1.904,0.02-4.872,0.104-8.904,0.254l-0.687,13.002
	c4.449,0.113,9.632,0.17,15.55,0.17c2.111,0,7.728-0.131,16.851-0.396c-0.377,4.825-0.735,10.571-1.073,17.241
	c-6.517-0.074-11.526-0.113-15.028-0.113c-5.198,0-11.018,0.133-17.458,0.396l-0.672,13.736h6.497c1.92,0,5.894-0.055,11.92-0.168
	l11.695-0.283c1.732-0.037,4.632-0.188,8.7-0.453c-0.452,5.578-0.829,11.346-1.13,17.299c-9.196-0.074-19.277-0.113-30.244-0.113
	l-24.874,0.057l-8.027,0.057c0.944-9.723,1.634-17.863,2.069-24.422c0.435-6.557,0.869-15.271,1.304-26.145
	s0.652-18.08,0.652-21.623l-0.057-4.975c8.892,0.075,19.65,0.112,32.274,0.112c11.644,0,21.911-0.037,30.804-0.112L92.208,952.799z
	 M159.659,999.047c-0.563,7.387-0.997,17.072-1.297,29.057c-3.696-0.074-7.372-0.113-11.03-0.113c-3.544,0-7.315,0.039-11.313,0.113
	c0.514-4.145,1.085-12.699,1.71-25.664c-1.429,0.678-2.547,1.168-3.356,1.469c-0.809,0.303-2.229,0.754-4.258,1.357
	s-3.619,1.111-4.765,1.525c-1.147,0.416-2.143,0.943-2.989,1.584s-1.448,1.299-1.805,1.979c-0.357,0.678-0.535,1.432-0.535,2.262
	c0,1.281,0.509,2.373,1.526,3.277s2.637,1.357,4.862,1.357c0.791,0,1.639-0.064,2.543-0.197c0.905-0.133,2.148-0.461,3.731-0.99
	c-1.094,2.902-2.394,7.143-3.901,12.721c-3.242,0.527-6.313,0.791-9.214,0.791c-4.674,0-8.564-0.65-11.674-1.951
	c-3.109-1.299-5.503-3.4-7.18-6.303c-1.677-2.902-2.516-5.803-2.516-8.705c0-1.771,0.31-3.506,0.932-5.201
	c0.622-1.697,1.592-3.354,2.91-4.975c1.318-1.621,2.863-3.006,4.634-4.156c1.771-1.148,4.191-2.232,7.262-3.25
	s6.959-1.979,11.669-2.883c1.959-0.377,3.757-0.782,5.397-1.216c1.639-0.433,2.806-0.81,3.503-1.13
	c0.697-0.32,1.263-0.697,1.695-1.131s0.744-0.885,0.933-1.357c0.188-0.471,0.283-0.97,0.283-1.498c0-1.432-0.603-2.534-1.808-3.307
	c-1.206-0.771-2.976-1.159-5.311-1.159c-6.48,0-14.484,1.829-24.015,5.483c0.716-3.73,1.168-6.303,1.357-7.717
	c0.188-1.412,0.489-3.627,0.904-6.643c10.854-2.373,20.183-3.561,27.986-3.561c4.447,0,8.519,0.5,12.212,1.498
	s6.578,2.609,8.651,4.833c2.073,2.224,3.11,5.409,3.11,9.554C160.505,986.912,160.222,991.66,159.659,999.047z M196,988.984
	c0.15,0.377,0.424,0.773,0.819,1.188c0.396,0.414,0.885,0.839,1.47,1.271c0.584,0.434,2.007,1.441,4.269,3.025
	c2.261,1.582,4.032,2.883,5.314,3.9c2.11,1.658,3.721,3.193,4.833,4.607c1.111,1.412,1.959,2.92,2.544,4.521
	c0.584,1.604,0.876,3.289,0.876,5.061c0,2.676-0.65,5.135-1.95,7.377c-1.3,2.242-3.26,4.117-5.879,5.625
	c-2.62,1.508-5.456,2.553-8.508,3.137c-3.053,0.584-6.2,0.877-9.441,0.877c-2.186,0-4.928-0.189-8.225-0.566
	c-3.298-0.377-7.133-1.035-11.504-1.979c-0.151-1.658-0.302-3.4-0.452-5.229c-0.151-1.828-0.396-4.344-0.735-7.547l-0.452-4.07
	c3.647,1.434,6.786,2.498,9.418,3.193c2.632,0.699,5.057,1.047,7.276,1.047c1.842,0,3.337-0.17,4.483-0.51
	c1.146-0.338,1.984-0.828,2.51-1.469c0.527-0.641,0.79-1.301,0.79-1.979c0-0.604-0.198-1.197-0.592-1.781
	c-0.395-0.584-1.288-1.385-2.678-2.402c-3.082-2.262-5.797-4.314-8.146-6.162c-2.35-1.846-4.116-3.486-5.3-4.918
	s-2.085-2.977-2.706-4.636c-0.62-1.658-0.93-3.372-0.93-5.145c0-3.128,0.895-6.049,2.686-8.763c1.79-2.713,4.428-4.682,7.914-5.907
	c3.486-1.224,7.735-1.837,12.748-1.837c5.238,0,11.928,0.678,20.068,2.035l0.905,15.828c-4.561-1.809-8.952-2.713-13.172-2.713
	c-2.978,0-5.136,0.307-6.473,0.918c-1.338,0.613-2.007,1.551-2.007,2.813C195.773,988.213,195.848,988.607,196,988.984z
	 M255.604,1009.506c0.396,1.205,1.094,2.072,2.093,2.6c0.999,0.529,2.103,0.791,3.309,0.791c0.905,0,1.849-0.064,2.829-0.197
	c0.98-0.131,2.714-0.537,5.203-1.215c-0.679,3.166-1.263,6.256-1.753,9.271l-1.243,6.896c-3.731,0.828-6.643,1.355-8.734,1.582
	s-4.118,0.34-6.077,0.34c-3.204,0-6.049-0.273-8.536-0.82s-4.561-1.545-6.218-2.996c-1.659-1.451-2.79-3.117-3.392-5.002
	c-0.603-1.885-0.904-3.883-0.904-5.994c0-0.375,0.019-1.045,0.056-2.006s0.168-3.1,0.394-6.416l1.236-19.561h-8.808
	c0.187-2.6,0.357-6.029,0.508-10.289l0.169-5.257h9.368c0.224-1.733,0.505-5.521,0.843-11.362l9.677-1.979
	c1.773-0.34,5.545-1.206,11.319-2.602c-0.265,4.938-0.454,10.252-0.567,15.942h12.891c-0.302,7.839-0.451,13.022-0.451,15.546
	h-13.007l-0.681,14.133c-0.076,2.111-0.113,3.469-0.113,4.07C255.011,1006.791,255.209,1008.299,255.604,1009.506z"/>
<g>
	<path fill="#101010" d="M434.512,968.363c4.707,0,9.236,0.722,13.584,2.164c4.348,1.443,8.021,3.523,11.021,6.237
		c3,2.716,5.213,5.887,6.637,9.513s2.136,7.528,2.136,11.705c0,4.063-0.636,7.927-1.908,11.591
		c-1.272,3.665-3.427,7.102-6.465,10.31c-3.038,3.21-6.901,5.611-11.591,7.206c-4.691,1.595-9.655,2.392-14.896,2.392
		c-4.823,0-9.455-0.702-13.897-2.107c-4.443-1.404-8.156-3.454-11.137-6.151c-2.98-2.695-5.221-5.924-6.721-9.683
		c-1.5-3.76-2.25-7.709-2.25-11.848s0.73-8.089,2.193-11.848c1.461-3.76,3.777-7.139,6.949-10.139c3.17-3,7.091-5.307,11.762-6.921
		S429.461,968.363,434.512,968.363z M434.113,985.109c-2.432,0-4.596,0.627-6.494,1.88s-3.332,3.085-4.301,5.496
		c-0.968,2.412-1.452,5.041-1.452,7.89c0,4.177,1.044,7.376,3.133,9.598c2.088,2.221,4.708,3.332,7.86,3.332
		c2.393,0,4.537-0.636,6.437-1.908c1.898-1.272,3.332-3.151,4.3-5.64c0.969-2.486,1.453-5.154,1.453-8.002
		c0-2.354-0.38-4.48-1.139-6.38c-0.761-1.898-2.004-3.418-3.731-4.557C438.451,985.679,436.428,985.109,434.113,985.109z"/>
	<path fill="#101010" d="M524.85,1009.83c-0.191,1.519-0.646,4.31-1.367,8.373l-1.481,9.113c-5.962,1.442-11.79,2.164-17.486,2.164
		c-4.14,0-7.767-0.418-10.88-1.253c-3.684-0.986-6.986-2.733-9.91-5.24c-3-2.582-5.184-5.639-6.551-9.17
		c-1.633-4.139-2.449-8.772-2.449-13.898c0-4.708,0.797-9.246,2.393-13.613c1.595-4.366,3.949-7.965,7.063-10.794
		c3.113-2.828,6.569-4.728,10.367-5.695c3.797-0.969,7.992-1.453,12.588-1.453c2.695,0,5.411,0.143,8.145,0.428
		c2.734,0.284,6.114,0.902,10.14,1.851l0.114,1.31c0.113,1.367,0.199,2.764,0.256,4.188s0.18,3.674,0.37,6.749l0.342,5.069
		c-5.431-1.898-10.233-2.848-14.411-2.848c-3,0-5.63,0.579-7.889,1.737c-2.26,1.159-3.93,2.829-5.012,5.013
		c-1.083,2.184-1.624,4.719-1.624,7.604c0,2.925,0.484,5.374,1.452,7.348c0.969,1.976,2.516,3.456,4.643,4.443
		c2.127,0.988,4.461,1.48,7.006,1.48c1.291,0,2.82-0.132,4.586-0.398c1.766-0.265,3.303-0.56,4.613-0.883
		C521.176,1011.131,522.836,1010.59,524.85,1009.83z"/>
	<path fill="#101010" d="M534.045,1028c0.527-4.86,0.905-8.81,1.131-11.848c0.303-4.139,0.604-9.321,0.906-15.55l0.621-13.5
		c0.264-6.113,0.453-11.961,0.566-17.543c0.15-6.683,0.227-13.12,0.227-19.31c5.32,0.076,9.313,0.114,1