2011-05-23 144 views
5

我需要一个控件来渲染SVG图形。数据以StreamReader对象的形式出现。渲染这样的图像最简单的方法是什么?控制渲染SVG图形?

目前,我使用的是PNG格式:

但是我喜欢的东西更高的分辨率。 SVGs对此非常完美。


样品SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Generated by graphviz version 2.28.0 (20110507.0327) 
--> 
<!-- Title: G Pages: 1 --> 
<svg width="262pt" height="216pt" 
viewBox="0.00 0.00 262.00 216.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 212)"> 
<title>G</title> 
<polygon fill="white" stroke="white" points="-4,5 -4,-212 259,-212 259,5 -4,5"/> 
<!-- a --> 
<g id="node1" class="node"><title>a</title> 
<polygon fill="purple" stroke="purple" points="159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523"/> 
<polygon fill="none" stroke="purple" points="165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397"/> 
<polygon fill="none" stroke="purple" points="170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272"/> 
<text text-anchor="middle" x="133" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">a</text> 
</g> 
<!-- b --> 
<g id="node3" class="node"><title>b</title> 
<ellipse fill="none" stroke="black" cx="133" cy="-100" rx="27" ry="18"/> 
<text text-anchor="middle" x="133" y="-96.3" font-family="Times New Roman,serif" font-size="14.00">b</text> 
</g> 
<!-- a&#45;&gt;b --> 
<g id="edge2" class="edge"><title>a&#45;&gt;b</title> 
<path fill="none" stroke="black" d="M133,-158.413C133,-149.086 133,-138.069 133,-128.192"/> 
<polygon fill="black" stroke="black" points="136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057"/> 
</g> 
<!-- c --> 
<g id="node4" class="node"><title>c</title> 
<polygon fill="none" stroke="black" points="144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41"/> 
<text text-anchor="middle" x="72" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">hello world</text> 
</g> 
<!-- b&#45;&gt;c --> 
<g id="edge3" class="edge"><title>b&#45;&gt;c</title> 
<path fill="none" stroke="black" d="M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327"/> 
<polygon fill="black" stroke="black" points="95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031"/> 
</g> 
<!-- d --> 
<g id="node6" class="node"><title>d</title> 
<polygon fill="none" stroke="black" points="194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015"/> 
<text text-anchor="middle" x="194" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">d</text> 
</g> 
<!-- b&#45;&gt;d --> 
<g id="edge5" class="edge"><title>b&#45;&gt;d</title> 
<path fill="none" stroke="black" d="M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489"/> 
<polygon fill="black" stroke="black" points="181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757"/> 
</g> 
<!-- e --> 
<g id="node7" class="node"><title>e</title> 
<polygon fill="none" stroke="black" points="254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199"/> 
<text text-anchor="middle" x="222" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">e</text> 
</g> 
</g> 
</svg> 

回答

1

当我看着我的WPF应用程序中使用SVGs,我发现有可能被添加到提供此功能的情侣套餐,但最终我使用了转换为XAML的SVG,这些SVG可以在WPF应用程序中进行缩放,就像SVG图像可以在浏览器上进行缩放等一样。如果你有权访问SVG代码(看起来像你),那么这对你来说可能是一个很好的解决方案。

这些都是我用它来实现这一目标的步骤:

SVG转换为XAML 我更喜欢使用Inkscape的下列步骤。

  1. 在图像编辑器(例如Inkscape)中打开SVG。编辑器必须支持打开SVG并将SVG另存为XAML文件。
  2. 在编辑器中,将文件另存为XAML。如果给出选择,该文件应该保存为兼容Silverlight。关闭图像编辑器。
  3. 如果需要进行任何颜色更改,请在文本编辑器(例如Notepad ++,Visual Studio)中打开该文件,然后查找具有颜色值的任何路径(查找类似'fill =“#000000”')的路径并将其更改为所需的十六进制颜色值。完成后保存文件并关闭文本编辑器。

在WPF项目

  1. 使用XAML图片用鼠标右键单击资源文件夹中的图像应保持在(如\资源\图像),拣去添加exisitng文件的选项。 确保文件选择类型包含XAML文件。导航到要使用的文件并添加它。
  2. 在Visual Studio中打开属性窗格(右键单击该文件并单击“属性”选项)。在“属性”窗格的“高级”部分下,将“构建操作”设置为“资源”并将“复制到输出目录”设置为“不要复制”。

现在可以通过设置项目的来源来使用图像来显示图像(例如Frame)到资源路径(例如“/resources/images/.xaml”)。这可以直接或通过绑定来设置。

示例用于显示XAML图像的WPF/XAML代码 以下代码显示了如何显示使用上述步骤添加的XAML图像的示例。此代码将缩放图像以填充它添加到的容器。图像的来源通过用于Frame元素源的绑定提供。这可以替换为图像路径的字符串(这是通过绑定值提供的内容)。

<Viewbox Stretch="Uniform" 
     Margin="4,4" 
     VerticalAlignment="Center"> 
      <Frame Source="{Binding ImageSource}" 
        NavigationUIVisibility="Hidden"/> 
</Viewbox> 

路径字符串的一个例子是:

/resources/images/<file-name>.xaml 

如果图像位于一个DLL和在相同的DLL被使用时,路径串需要使用以包括以下的详细信息格式:

/<AssemblyName>;component/resources/images/<file-name>.xaml