Unicode remains as a plain text instead of displaying as an icon

Question

I'm creating a C# WPF application in which I'm programmatically creating buttons for each category stored in SQLite database. Each button contains a Font Awesome icon and text.

Table

Creating buttons

public static void LoadSidePanelButtons(StackPanel stackPanel)
    {
        DataTable NavigationTable = new DataTable();
        string query = "SELECT * FROM Navigation ORDER BY Name ASC";

        DatabaseConnection.PopulateDataTable(NavigationTable, query);

        foreach (DataRow row in NavigationTable.Rows)
        {
            ToggleButton toggleButton = new ToggleButton();
            toggleButton.Name = "id" + row["navigationID"].ToString();
            toggleButton.Content = row["Name"].ToString();
            toggleButton.Tag = row["Icon"].ToString();
            toggleButton.Style = (Style)stackPanel.Resources["SidePanelButton"];
            toggleButton.Click += new RoutedEventHandler(MainWindow.sidePanelButton_onClick);

            stackPanel.RegisterName(toggleButton.Name, toggleButton);
            stackPanel.Children.Add(toggleButton);
        }
    }

Button template

<StackPanel.Resources>
<Style x:Key="SidePanelButton" TargetType="ToggleButton">
    <Setter Property="Height" Value="50" />
    <Setter Property="Width" Value="230" />
    <Setter Property="Margin" Value="0 0 0 10" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="Border" CornerRadius="3" Background="Transparent">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="170" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TextBlock x:Name="Icon" Grid.Column="0" Grid.Row="0" FontSize="18" Foreground="#FF8B939C" FontFamily="{StaticResource FontAwesomeRegular}" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                    <ContentPresenter x:Name="IconContent" Content="{TemplateBinding Tag}" />
                        </TextBlock>

                        <TextBlock x:Name="Title" Grid.Column="1" Grid.Row="0" FontSize="14" Foreground="#FF8B939C" FontFamily="{StaticResource Roboto}" HorizontalAlignment="Left" VerticalAlignment="Center">
                                                    <ContentPresenter x:Name="TitleContent" Content="{TemplateBinding Content}" />
                        </TextBlock>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" TargetName="Border" Value="#FF19BDD2" />
                        <Setter Property="Foreground" TargetName="Icon" Value="#FFFFFF" />
                        <Setter Property="Foreground" TargetName="Title" Value="#FFFFFF" />
                        <Setter TargetName="spbtBorder" Property="Border.Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="14" Color="Black" Opacity="0.25" ShadowDepth="4" Direction="-90" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="Border" Value="#FF19BDD2" />
                        <Setter Property="Foreground" TargetName="Icon" Value="#FFFFFF" />
                        <Setter Property="Foreground" TargetName="Title" Value="#FFFFFF" />
                        <Setter TargetName="Border" Property="Border.Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="14" Color="Black" Opacity="0.25" ShadowDepth="4" Direction="-90" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</StackPanel.Resources>

The problem is:

toggleButton.Tag = row["Icon"].ToString();

When I use this to add the icon, the buttons display "\uf022" as plain text.

But...

toggleButton.Tag = "\uf022";

When I change it to this, it shows the icon without any problem.

And I currently can't find the reason why unicode loaded from DB to string remains as a plain text but a manually created string with unicode appears as an icon.

@RandRandom Yes, I have tried that and the result was the same. — uchimada, Jun 10 '20 at 16:25
Try this `Regex.Unescape(row["Icon"].ToString());` - you are most likely facing the issue that your string is acutally `"\\uf022"` and not `"\uf022"`. - https://learn.microsoft.com/en-us/cpp/c-language/escape-sequences - so the string you are dealing with escapes the Backslash instead of the unicode character - so you are getting a "normal" backslash followed by "normal" characters — Rand Random, Jun 10 '20 at 16:37
Have a look at https://stackoverflow.com/questions/323640 for different ideas to get your desired result — Rand Random, Jun 10 '20 at 16:41
@RandRandom Thank you for the ideas and documentation link. The first solution works like a charm. I'll have a look at the rest as well. — uchimada, Jun 10 '20 at 16:46

score 2 · Accepted Answer · answered Jun 10 '20 at 16:43

2

As @RandRambo pointed out in a comment below the question, the problem was that the string was actually "\\uf022" instead of "\uf022".

And his solution Regex.Unescape(row["Icon"].ToString()); works like a charm.

answered Jun 10 '20 at 16:43

uchimada

31
7

Unicode remains as a plain text instead of displaying as an icon

1 Answers1