在 Xaml 中创建 IconBlock

引言

你是否曾经尝试显示一个图标，但不得不搜索你想要的图标代码？或者有一个 TextBlock，它的图标代码硬编码在文本属性中，你却记不住它是什么图标？ 你要么在网上搜索，要么在字符映射表中查找，要么运行你的代码来查看它显示的样子。

这是一个示例自定义控件，允许你轻松显示图标。

背景

Segoe UI Symbol 是一种我们可以用来显示图标的字体。要在 xaml Text Block 中显示图标，我们将 Text 属性设置为图标代码。

为了显示 SegoeUI 符号，你需要

<StackPanel Orientation="Horizontal">
    <TextBlock Text="&#xe171;" FontFamily="Segoe UI Symbol"/><TextBlock Text="Some Text" />
</StackPanel>

使用这种方法，很难记住 "" 是什么图标。

你也可以使用 SymbolIcon 标签来显示图标，但你受限于 SymbolEnum 中定义的内容。

<SymbolIcon Symbol="enumMemberName"/>

使用代码

在这段代码中，我们有自定义控件、一个包含我们想要显示的图标代码的枚举，以及自定义控件的默认样式。

自定义控件具有依赖属性 IconProperty 和 IconTextProperty。IconProperty 的类型将是 IconEnum。这将帮助我们在 xaml 编辑器中获得智能感知。每次更新 IconProperty 时，我们都会更改 Template-bound 到 TextBox 的 IconTextProperty，用于显示图标（查看默认样式中的 ContentTemplate）。

    public class IconBlock : Control
    {        
        public static readonly DependencyProperty IconProperty =
          DependencyProperty.Register("Icon",
              typeof(IconEnum),
              typeof(IconBlock),
              new PropertyMetadata(null, IconChanged));

        public IconEnum Icon
        {
            get { return (IconEnum)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        public static readonly DependencyProperty TextProperty =
          DependencyProperty.Register("Text",
              typeof(string),
              typeof(IconBlock),
              new PropertyMetadata(null));

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

        public static readonly DependencyProperty IconTextProperty =
            DependencyProperty.Register("IconText",
            typeof(string),
            typeof(IconBlock),
            new PropertyMetadata(null, IconChanged));

        public string IconText
        {
            get { return (string)GetValue(IconTextProperty); }
            set { SetValue(IconTextProperty, value); }
        }

        private static void IconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var instance = d as IconBlock;
            if (instance != null)
            {
                int intIcon = (int)instance.Icon;
                instance.IconText = Char.ConvertFromUtf32(intIcon);
            }
        }
    }

这是图标的枚举。我们将每个想要使用的图标放在这里，并为其命名。这将使我们更容易记住图标，并在 xaml 编辑器中提供智能感知。这里只是一些图标，你可以自由地添加更多图标。你可以从 Windows 中的字符映射应用程序获取一些图标代码，或者查看此页面。

    public enum IconEnum
    {
        InTransit = 0x1f690,
        X = 0xe10a,
        Exclamation = 0xe171,
        ActionClose = 0x1f4ea,
        Mailbox = 0x1f4ea,
        MailboxNewMail = 0x1f4eb,
        Play = 0xe213,
        Stop = 0xe25e,
        Gift = 0x1f381
    }

这是 IconBlock 的默认样式。我在 ContentTemplate 中有两个 TextBlock。第一个 TextBlock 显示图标，第二个 TextBlock 显示图标旁边的常规文本。

          <Style TargetType="local:IconBlock">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="local:IconBlock">
                                <StackPanel Orientation="Horizontal">      
                                    <Grid Margin="5,-5,5,0">
                                        <TextBlock Text="{TemplateBinding IconText}"
                                               FontFamily="Segoe UI Symbol"/>
                                    </Grid>                                    
                                    <TextBlock Text="{TemplateBinding Text}"
                                               />
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
           </Style>

要使用自定义控件，只需将标签添加到你的 xaml 中即可。无需每次创建 IconBlock 时都记住那些图标代码。

<local:IconBlock Icon="ActionClose" Text="This is a close icon." FontSize="20"/>

结论

已经有一些方法可以在 XAML 中显示图标。使用这段代码，你可以拥有自己的图标枚举，并且可以通过将文本和图标放在一个标签中来简化你的代码。

我已经在 WPF 和 WinRT 中测试过这个。希望这段小代码对你的开发有所帮助。