使用基于画布的图标集

本文关键字：图标 于画布 | 更新日期: 2023-09-27 18:30:27

我刚刚在这里找到了一个图标集：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 应用程序中？有什么办法吗？

使用基于画布的图标集

WPF 中的每个控件都可以是其他控件的容器......因此，在按钮中添加 XAML 图像确实如此。复制一行您的图标集，并将其放入按钮内容中。

<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>
相关文章：