CODEWITHSUNDEEP
c#xamluwpuwp-xaml
Magnus Gunnarsson
Magnus Gunnarsson

Reputation: 21

UWP: Add styling to specific words in textblock

I have a couple of strings in a resource file, which all needs to be translated. These strings will be concatenated into one sentence and displayed inside a TextBlock in my app and I would like to make some of the strings bold inside the TextBlock. E.g.

string a = "This {0} a {1} string.";
string b = "is";
string c = "formatted";
string output = string.Format(a, b, c);

And I would like the output to be: This is a formatted string.

Any hints and tips are welcome.

Upvotes: 1

Views: 886

Answers (2)

Justin XL
Justin XL

Reputation: 39006

Use <Run /> inside your TextBlock for additional styling on specific words.

<TextBlock>
    This
    <Run FontWeight="Bold">is</Run>
    a
    <Run FontWeight="Bold">formatted</Run>
    string.
</TextBlock>

enter image description here

Update

Here's a simple example to give you an idea. I have created a UserControl called TextControl where the XAML contains only this -

<TextBlock x:Name="MyTextBlock" />

In its code-behind, I have defined three dependency properties. One is to take the full resource string, the other two are for passing in {0} and {1}. The idea is to split the full string by space, then replace {x} with the input properties and also make them bold.

public string ResourceString
{
    get => (string)GetValue(ResourceStringProperty);
    set => SetValue(ResourceStringProperty, value);
}
public static readonly DependencyProperty ResourceStringProperty = DependencyProperty.Register(
    "ResourceString", typeof(string), typeof(TextControl), new PropertyMetadata(default(string), (s, e) =>
    {
        var self = (TextControl)s;
        var full = e.NewValue.ToString();

        foreach (var seg in full.Split(' '))
        {
            var run = new Run();

            if (seg.Contains("{0}"))
            {
                run.Text = self.Input0;
                run.FontWeight = FontWeights.Bold;
            }
            else if (seg.Contains("{1}"))
            {
                run.Text = self.Input1;
                run.FontWeight = FontWeights.Bold;
            }
            else
            {
                run.Text = seg;
            }

            run.Text += " ";

            self.MyTextBlock.Inlines.Add(run);
        }
    }));

public string Input0
{
    get => (string)GetValue(Input0Property);
    set => SetValue(Input0Property, value);
}
public static readonly DependencyProperty Input0Property = DependencyProperty.Register(
    "Input0", typeof(string), typeof(TextControl), new PropertyMetadata(default(string)));

public string Input1
{
    get => (string)GetValue(Input1Property);
    set => SetValue(Input1Property, value);
}
public static readonly DependencyProperty Input1Property = DependencyProperty.Register(
    "Input1", typeof(string), typeof(TextControl), new PropertyMetadata(default(string)));

Then you can just use it like this -

<local:TextControl Input0="is" Input1="formatted" ResourceString="This {0} indeed a {1} string." />

And you get -

enter image description here

Upvotes: 2

Jordy Dieltjens
Jordy Dieltjens

Reputation: 1538

Here you can find a lot of information about styling a textblock: http://www.wpf-tutorial.com/basic-controls/the-textblock-control-inline-formatting/

I recommended using the span approach for your problem since you want to work in program code

Good Luck

Upvotes: 0

Related Questions