XAMLのContentにDataBindingでアイコンフォントを指定する

UWPでアイコンフォントを使用する際にXAMLに直接書かずにBindingでどうにかしたい場合に知らないことが出てきたのでメモとして残します。

UWPなどでアイコンフォントを使いたい場合は、Segoe MDL2 Assetsの文字コードを直接指定して表示する方法があります。

例えばハンバーガーメニューに使われる三本線の画像ならばE700を指定すると表示されます。

XAMLに指定する場合は、以下のような感じです。

Content="＆＃xE700;"

文字列として、”&#x”を文字コードの先頭につけて末尾に;を入れることによってUnicode文字として扱ってくれるようです。(よくわかってない)

ハンバーガーメニューのように一か所固定ならば決め打ちでOKですが、SplitViewで表示されるメニューのように動的に変えたいことがあるかと思います。

その場合は、Listか何かにインスタンスをセットしてBindingするのが一番かと思います

この場合は、文字列に普通に文字コードを入れただけでは、ただの文字列として扱われて文字コードとして扱われないのでUnicode文字エスケープシーケンスを付与します。

Unicode文字エスケープシーケンスは、文字列の先頭に”\u”を付与します。”\u”の後ろに16進数で文字コードを記述することによってそれ以降の文字列がUnicode文字として扱われます。

具体的には、以下のようなコードになるかと思います。

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            DataContext = new MainPageViewModel
            {
                SidePanelItem = new List
                {
                    new ViewModels.SidePanelContent
                    {
                        Glyph = "\uE701",
                        Text = "Content1"
                    },
                    new ViewModels.SidePanelContent
                    {
                        Glyph = "\uE702",
                        Text = "Content2"
                    },
                    new ViewModels.SidePanelContent
                    {
                        Glyph = "\uE703",
                        Text = "Content3"
                    }
                }
            };
        }
    }

    class SidePanelContent
    {
        public string Glyph { get; set; }
        public string Text { get; set; }
    }

このコードに対してXAMLを以下のように書きます。

＜SplitView Grid.Row="1" IsPaneOpen="{Binding IsChecked, ElementName=toggleButton, Mode=TwoWay}"＞
            ＜SplitView.Pane＞
                ＜ListView ItemsSource="{Binding Path=SidePanelItem}"＞
                    ＜ListView.ItemTemplate＞
                        ＜DataTemplate＞
                            ＜StackPanel Orientation="Horizontal"＞
                                ＜FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="{Binding Path=Glyph, Mode=TwoWay}" FontSize="20" /＞
                                ＜TextBlock Text="{Binding Path=Text, Mode=TwoWay}" Style="{ThemeResource BodyTextBlockStyle}" Margin="10, 0"/＞
                            ＜/StackPanel＞
                        ＜/DataTemplate＞
                    ＜/ListView.ItemTemplate＞
                ＜/ListView＞
            ＜/SplitView.Pane＞
            ＜!--メインコンテンツ--＞
            ＜Grid Background="Gray"＞
                ＜Frame x:Name="ContentFrame"＞＜/Frame＞
            ＜/Grid＞
            
        ＜/SplitView＞

すると、実行結果が以下のようになるはずです。