首页 > 解决方案 > 创建一个可重用的 IconFont 控件

问题描述

我想创建一个这样的控件:

<controls:FontIcon Code="&#xf0c7;"
                   IconStyle="Solid"
                   FontSize="25" />

可悲的是,我似乎无法切换FontFamily基于IconStyle.

public class FontIcon : TextBlock
{
    public static readonly DependencyProperty IconStyleProperty =
        DependencyProperty.Register(
            "IconStyle",
            typeof(Style),
            typeof(FontIcon),
            new PropertyMetadata(Controls.Style.Regular));

    public static readonly DependencyProperty CodeProperty =
        DependencyProperty.Register(
            "Code",
            typeof(string),
            typeof(FontIcon),
            new PropertyMetadata(null));

    public string Code
    {
        get { return (string) GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public Style IconStyle
    {
        get { return (Style) GetValue(IconStyleProperty); }
        set
        {
            SetValue(IconStyleProperty, value);
            SwitchFontFamily(value);
        }
    }

    private void SwitchFontFamily(Style style)
    {
        switch (style)
        {
            case Controls.Style.Regular:
                SetValue(FontFamilyProperty, new FontFamily(new Uri(@"pack://application:,,,//<MyClassLibsNamespace>;component/Fonts/Font Awesome 5 Pro-Regular-400.otf"), "Font Awesome 5 Pro Regular"));
                break;
            case Controls.Style.Solid:
                SetValue(FontFamilyProperty, new FontFamily(new Uri(@"pack://application:,,,//<MyClassLibsNamespace>;component/Fonts/Font Awesome 5 Pro-Solid-900.otf"), "Font Awesome 5 Pro Solid"));
                break;
            case Controls.Style.Light:
                SetValue(FontFamilyProperty, new FontFamily(new Uri(@"pack://application:,,,/<MyClassLibsNamespace>;component/Fonts/Font Awesome 5 Pro-Light-300.otf"), "Font Awesome 5 Pro Light"));
                break;
        }
    }
}

public enum Style
{
    Regular,
    Solid,
    Light
}

为什么不显示我的 Icon ?

编辑 1

private void SwitchFontFamily(Style style)
    {
        switch (style)
        {

            case Controls.Style.Regular:
                FontFamily fromLibs = new FontFamily(new Uri("pack://application:,,,/UIToolsWPF;component/"), "./Fonts/#Font Awesome 5 Pro Regular");
                FontFamily = fromLibs;
                break;
            //case Controls.Style.Solid:
            //    FontFamily = new FontFamily(new Uri(@"pack://application:,,,/UIToolsWPF;component/Fonts/Font Awesome 5 Pro-Solid-900.otf"), "Font Awesome 5 Pro Solid");
            //    break;
            //case Controls.Style.Light:
            //    FontFamily = new FontFamily(new Uri(@"pack://application:,,,/UIToolsWPF;component/Fonts/Font Awesome 5 Pro-Light-300.otf"), "Font Awesome 5 Pro Light");
            //    break;
        }
    }


<StackPanel VerticalAlignment="Center"
            HorizontalAlignment="Center">
    <controls:FontIcon HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="25"
                       x:Name="FontIcon"
                       Text="&#xf039;"
                       IconStyle="Regular" />
     <TextBlock Text="{Binding ElementName=FontIcon, Path=FontFamily}" />
</StackPanel>

在此处输入图像描述

标签: c#wpffontsfont-awesome

解决方案


为了完成这项工作,我必须使用此处描述的模式。

// The font resource reference includes the base URI reference (application directory level),
// and a relative URI reference.
myTextBlock.FontFamily = new FontFamily(new Uri("pack://application:,,,/"), "./resources/#Pericles Light");

我用了:

string fontRoot = "pack://application:,,,/<MyReferencedAssembly>;component/";
FontFamily = new FontFamily(new Uri(fontRoot), "./Fonts/#Font Awesome 5 Pro Regular");

推荐阅读