Wpf 如何在MaterialDesignInXamlToolkit中添加个人图标?

Wpf 如何在MaterialDesignInXamlToolkit中添加个人图标?,wpf,xaml,material-design-in-xaml,Wpf,Xaml,Material Design In Xaml,“材质设计图标”项目包含大量图标,但对于非英语国家来说,这还不够。那么,如何在不修改源代码的情况下在个人项目中添加另一个包图标呢?图标基本上只是一个路径: <Canvas Width="24" Height="24"> <Path Data="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" Fill="Red" /> </Canvas> …并在整个应用程序中使用它们: <ContentControl Conten

“材质设计图标”项目包含大量图标,但对于非英语国家来说,这还不够。那么,如何在不修改源代码的情况下在个人项目中添加另一个包图标呢?

图标基本上只是一个路径:

<Canvas Width="24" Height="24">
    <Path Data="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" Fill="Red" />
</Canvas>
…并在整个应用程序中使用它们:

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

正如@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""}
        };
    }
}
公共类MyPackIcon:PackIconBase
{        
静态MyPackIcon()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyPackIcon)),new FrameworkPropertyMetadata(typeof(MyPackIcon));
}     
public MyPackIcon():base(createiconda)
{ }
私有静态IDictionary CreateIconnda()
{
返回新词典
{
{MyPackIconKind.Happy,"8.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 10 10 8 8 8 8 8 8 8 8 0 0 0 0 0 0 0 0 12 12 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 8 8 8 8 8 8 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.14,9.5C14,8.7 14.7,8 15.5,8 C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.238.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,“8.0 0 0 0 0 0 0 0 0 0 0 10 10 10 10 10 8 8 8 8 8 8 8 8 8 8 8 8 8 0 0 0 0 0 0 0 0 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 3.7,9.5C7,8.7.7,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中),例如:


4:利润

<ns:MyPackIcon Kind="HappyIcon" />

  • 如果路径数据对您来说是新的,您可以从查看Blend或Inkscape开始,将图形保存为路径数据格式

我的svg文件有几个路径。我怎样才能用你的方式添加多条路径?
<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>
<ns:MyPackIcon Kind="HappyIcon" />