如何在 MaterialDesignInXamlToolkit 中添加个人图标? [英] How to add personal icons in MaterialDesignInXamlToolkit?

问题描述

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

The Material Design Icons project contains large number of icons, but it is not enough for non English country. So how to add another pack icon in personal project without modifying Source Code?

推荐答案

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

As @mm8 has said, yes it's just a path; but yes, you can build your own "PackIcon" classes to follow with what you see in MaterialDesignInXaml (and MahApps) pack icons:

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

1: Create an Enum for each icon in your new set:

public enum MyPackIconKind
{
    Happy,
    Sad
}

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

2: Inherit from PackIconBase. You must provide the path data(see note at bottom) for each icon:

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 中)，例如:

3: Provide a default style (typically in your Generic.xaml), e.g:

<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 以将您的绘图保存为路径数据格式.

这篇关于如何在 MaterialDesignInXamlToolkit 中添加个人图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！