wpf - 如何在 MaterialDesignInXamlToolkit 中添加个人图标？

Question

Material Design Icons 项目包含大量图标，但对于非英语国家来说还不够。那么如何在不修改源代码的情况下在个人项目中添加另一个包图标呢？

Answer 1

正如@mm8 所说，是的，这只是一条路径；但是，是的，您可以构建自己的“PackIcon”类来遵循您在 MaterialDesignInXaml(和 MahApps)包图标中看到的内容:

1:为新集合中的每个图标创建一个枚举:

public enum MyPackIconKind
{
    Happy,
    Sad
}

2:继承自PackIconBase。您必须为每个图标提供路径数据(见底部注释):

public class MyPackIcon : PackIconBase<MyPackIconKind>
{        
    static MyPackIcon()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyPackIcon), new FrameworkPropertyMetadata(typeof(MyPackIcon)));
    }     

    public MyPackIcon() : base(CreateIconData)
    { }

    private static IDictionary<MyPackIconKind, string> CreateIconData()
    {
        return new Dictionary<MyPackIconKind, string>
        {
            {MyPackIconKind.Happy, "M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"},
            {MyPackIconKind.Sad, "M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z""}
        };
    }
}

3:提供默认样式(通常在您的 Generic.xaml 中)，例如:

<Style TargetType="{x:Type local:MyPackIcon}">
    <Setter Property="Height" Value="16" />
    <Setter Property="Width" Value="16" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyPackIcon}">
                <Viewbox>
                    <Canvas Width="24" Height="24">
                        <Path Data="{Binding Data, RelativeSource={RelativeSource TemplatedParent}}"                                  
                              Fill="{TemplateBinding Foreground}" />
                    </Canvas>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

4:利润!

<ns:MyPackIcon Kind="HappyIcon" />

如果您不熟悉路径数据，您可以先查看 Blend 或 Inkscape 以将您的绘图保存为路径数据格式。