Displaying SVGs inline with text

[CardPile]

Hi,

I am trying to find out how to display SVGs inline with text. The difficult part is that the text is coming from within the application and cannot be specified in the view.

What I currently have as a prototype is using unicode:

I would like to replace the circles with SVGs of the appropriate icons.

The view part looks like this:

        <!--...-->
        <!-- Stats -->
        <ItemsControl Grid.Column="1" VerticalAlignment="Center" ItemsSource="{Binding Statistics}">
          <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
              <WrapPanel Orientation="Horizontal" Margin="5 2" />
            </ItemsPanelTemplate>
          </ItemsControl.ItemsPanel>
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" Margin="10 2">
                  <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0}: {1}">
                      <Binding Path="Name" />
                      <Binding Path="TextValue" />
                    </MultiBinding>
                  </TextBlock.Text>
                </TextBlock>
              </StackPanel>
            </DataTemplate>
          </ItemsControl.ItemTemplate>
        </ItemsControl>
        <!--...-->

The text I want to display the SVGs in coming from the Name binding.

The text is currently generated as follows:

        foreach (Color pair in ColorsUtil.ColorPairs())
        {
            float? winRate = archetypeWinData.GetWinPercentage((Color)(int)pair);
            if(!winRate.HasValue)
            {
                continue;
            }

            var colorPairWinRateName = $"{ColorsUtil.ToEmoji(pair)} WR";
            var colorPairWinRateStatistic = new Statistic<float>(colorPairWinRateName, winRate.Value, new PercentFormatter());
            Statistics.Add(colorPairWinRateStatistic);
        }

How can I go about this?

[Gillibald]

https://wpf-tutorial.com/basic-controls/the-textblock-control-inline-formatting/

[timunie]

No, you have to create it on your own I believe.

[CardPile]

That is a shame. Converting standard tags that can be used inside the TextBlock from string is not a custom behavior by a long shot.

Having said that - I can write a custom the converter that will scan the string and split it into a series of Inlines corresponding to entries it will find. The way to hook this up would be something like the following, right?

<TextBlock VerticalAlignment="Center" Margin="10 2" Inlines="{Binding, Converter={x:Static vm:Whatever}}" />

[CardPile]

So apparently Inlines is not a property that supports Binding. What would be correct way to go about this?

[stevemonaco]

Inlines is a direct property, so it supports binding. I wrote a test project awhile back that created an InlineCollection from binded text, so the approach does work. See https://github.com/wieslawsoltes/HackerNews/blob/bf52e14dcdb999f7164af299a7e0ff5c8486d9c9/HackerNews/Converters/InlinesConverter.cs (not mine) for an open source example or GitHub search for "InlinesCollection IValueConverter" to probably find others.

[CardPile]

You are right. It does work! I must have had something else going on. Thank you!