使用Canvas基于图标集

Question

我刚刚发现一个图标设置在这里： http://www.archetype-inc.com/yard/fundamentals/icons/

我一直在寻找类似的东西很长一段时间，但是这并没有给大量的PNG文件，而是一个Adobe Illustrator和XAML文件。

幸运的是我使用WPF，所以希望我应该能够使用XAML文件。事实上，我认为这是PNG的想法，因为它具有可扩展性。

无论如何，我的问题是我有没有想法如何使用它。我对XAML比较陌生。

它与画布组格式化，例如，这里是一个位从开始：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="fundamental_icons" Width="1000" Height="1225" Clip="F1 M 0,0L 1000,0L 1000,1225L 0,1225L 0,0"> 
    <Canvas x:Name="Document" Width="1000" Height="1225" Canvas.Left="0" Canvas.Top="0"> 
     <Rectangle Width="1000" Height="1225" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#FFFFFFFF"/> 
     <Rectangle Width="0.75" Height="7.85938" Canvas.Left="449.967" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000"/> 
     <Path Width="2.92188" Height="7.85938" Canvas.Left="451.573" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000" Data="F1 M 454.354,21.1823L 453.245,21.1823L 453.245,20.6823C 453.245,20.0729 453.229,19.5885 453.995,19.5885C 454.167,19.5885 454.323,19.6041 454.495,19.6354L 454.495,19.0416C 454.276,19.0104 454.12,18.9948 453.917,18.9948C 452.807,18.9948 452.526,19.6823 452.542,20.6666L 452.542,21.1823L 451.573,21.1823L 451.573,21.7604L 452.542,21.7604L 452.542,26.8541L 453.245,26.8541L 453.245,21.7604L 454.354,21.7604L 454.354,21.1823 Z "/> 
     <Path Width="5.0625" Height="7.76563" Canvas.Left="457.433" Canvas.Top="21.1823" Stretch="Fill" Fill="#FF000000" Data="F1 M 459.699,26.8385L 459.464,27.4791C 459.23,28.0104 459.089,28.3698 458.48,28.3698C 458.324,28.3698 458.168,28.3541 457.996,28.3229L 457.996,28.901C 458.105,28.9479 458.261,28.9479 458.527,28.9479C 459.402,28.9479 459.636,28.6823 460.027,27.7291L 462.496,21.1823L 461.793,21.1823L 460.043,26.0104L 458.183,21.1823L 457.433,21.1823L 459.699,26.8385 Z "/> 
     <Path Width="5.35938" Height="6.01563" Canvas.Left="462.742" Canvas.Top="21.0104" Stretch="Fill" Fill="#FF000000" Data="F1 M 465.43,21.0104C 463.68,21.0104 462.742,22.3854 462.742,24.0104C 462.742,25.651 463.68,27.026 465.43,27.026C 467.164,27.026 468.102,25.651 468.102,24.0104C 468.102,22.3854 467.164,21.0104 465.43,21.0104 Z M 465.43,21.5885C 466.758,21.5885 467.414,22.8073 467.414,24.0104C 467.414,25.2291 466.758,26.4323 465.43,26.4323C 464.102,26.4323 463.43,25.2291 463.43,24.0104C 463.43,22.8073 464.102,21.5885 465.43,21.5885 Z "/> 
     <Path Width="4.60938" Height="5.84375" Canvas.Left="469.151" Canvas.Top="21.1823" Stretch="Fill" Fill="#FF000000" Data="F1 M 473.76,21.1823L 473.057,21.1823L 473.057,24.1666C 473.057,25.3073 472.541,26.4323 471.354,26.4323C 470.26,26.4323 469.87,25.901 469.838,24.8698L 469.838,21.1823L 469.151,21.1823L 469.151,24.8698C 469.151,26.1823 469.698,27.026 471.135,27.026C 471.979,27.026 472.729,26.5885 473.088,25.8385L 473.12,25.8385L 473.12,26.8541L 473.76,26.8541L 473.76,21.1823 Z "/> 
     <Rectangle Width="0.6875" Height="7.85938" Canvas.Left="478.131" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000"/> 
     <Path Width="0.6875" Height="7.85938" Canvas.Left="480.155" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000" Data="F1 M 480.155,26.8541L 480.843,26.8541L 480.843,21.1823L 480.155,21.1823L 480.155,26.8541 Z M 480.155,20.1041L 480.843,20.1041L 480.843,18.9948L 480.155,18.9948L 480.155,20.1041 Z "/> 

我将如何把这些图标放到一个正规WPF应用程序？有什么办法吗？

Answer 1

WPF中的每个控件都可以成为其他控件的容器..所以在按钮中添加一个xaml图片真的很有意思。复制你的iconset的一行放入按钮的内容。

<Button Width="30" Height="30"> 
    <Button.Content> 
     <Path Width="4.60938" Height="5.84375" Canvas.Left="539.166" Canvas.Top="21.0104" Stretch="Fill" Fill="#FF000000" Data="F1 M 539.166,26.8541L 539.853,26.8541L 539.853,23.5416C 539.869,22.4323 540.541,21.5885 541.635,21.5885C 542.76,21.5885 543.072,22.3385 543.072,23.3073L 543.072,26.8541L 543.775,26.8541L 543.775,23.1979C 543.775,21.8541 543.291,21.0104 541.681,21.0104C 540.885,21.0104 540.119,21.4791 539.869,22.151L 539.853,22.151L 539.853,21.1823L 539.166,21.1823L 539.166,26.8541 Z "/> 
    </Button.Content> 
</Button> 

对于第二个问题。可以简单地通过调用其关键字添加图标之后，使用不同的关键字映射资源中的每个几何图形。

<Window.Resources> 
    <StreamGeometry x:Key="Geometry1">F1M539.166,26.8541L539.853,26.8541 539.853,23.5416C539.869,22.4323 540.541,21.5885 541.635,21.5885 542.76,21.5885 543.072,22.3385 543.072,23.3073L543.072,26.8541 543.775,26.8541 543.775,23.1979C543.775,21.8541 543.291,21.0104 541.681,21.0104 540.885,21.0104 540.119,21.4791 539.869,22.151L539.853,22.151 539.853,21.1823 539.166,21.1823 539.166,26.8541z</StreamGeometry> 
</Window.Resources> 

<Grid> 
    <Button Width="30" Height="30"> 
     <Button.Content> 
      <Path Width="9.2" Height="11.6" Stretch="Fill" Fill="#FF000000" Data="{DynamicResource Geometry1}"/> 
     </Button.Content> 
    </Button> 
</Grid>