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

时间:2017-04-20 07:14:01

标签: wpf xaml material-design-in-xaml

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

图标基本上只是Path

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

您可以定义所需的图标资源,例如直接在App.xamlResourceDictionary中:

<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}" />