MaterialDesignInXamlToolkit 如何添加个人图标？

Question

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

Answer 1

一个图标基本上就是一个Path:

<Canvas Width="24" Height="24">
    <Path Data="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" Fill="Red" />
</Canvas>

您可以定义任意数量的图标资源，例如直接在您的 App.xaml 或 ResourceDictionary:

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <Canvas x:Key="myIcon" x:Shared="False" Width="24" Height="24">
                <Path Data="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" Fill="Red" />
            </Canvas>
        </ResourceDictionary>
    </Application.Resources>
</Application>

...并在整个应用程序中像这样使用它们：

<ContentControl Content="{StaticResource myIcon}" />

Answer 2

正如@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 以将绘图保存为路径数据格式。

MaterialDesignInXamlToolkit 如何添加个人图标？

How to add personal icons in MaterialDesignInXamlToolkit?

wpf

xaml

material-design-in-xaml