Question

In my WPF application, I would like to display something that looks like this:

User Bob has logged off at 22:17.

Where “Bob” and “22:17” are data-bound values.

The obvious way to do this would be to use a StackPanel with multiple TextBlock children, some of them data bound:

<StackPanel Orientation="Horizontal">
   <TextBlock Text="The user"/>
   <TextBlock Text="{Binding Path=Username}" TextBlock.FontWeight="Bold" />
   <TextBlock Text="has logged off at"/>
   <TextBlock Text="{Binding Path=LogoffTime}" TextBlock.FontWeight="Bold" />
</StackPanel/>

This works, but it’s ugly. The program is supposed to be localized to different languages, and having separate strings for “The user” and “has logged off at” is a recipie for localization disaster.

Ideally, I would like to do something like this:

<TextBlock>
     <TextBlock.Text>
         <MultiBinding StringFormat="{}The user <Bold>{0}</Bold> has logged off at <Bold>{1}</Bold>">
             <Binding Path="Username" />
             <Binding Path="LogoffTime" />
         </MultiBinding>
</TextBlock>

So the translator would see a complete sentence The user <Bold>{0}</Bold> has logged off at <Bold>{1}</Bold>. But that doesn’t work, of course.

This has to be a common problem, what’s the right solution for this?

Answer 1

I’ve never tried to do something like this before, but if I had to I would probably try and use a Converter that takes the MultiBinding and breaks it up and returns a StackPanel of the pieces

For example, the binding would be something like:

<Label>
     <Label.Content>
             <MultiBinding Converter={StaticResource TextWithBoldParametersConverter}>
                 <Binding Source="The user {0} has logged off at {1}" />
                 <Binding Path="Username" />
                 <Binding Path="LogoffTime" />
             </MultiBinding>
    </Label.Content>
</Label>

And the Converter would do something like

public class TextWithBoldParametersConverter: IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        // Create a StackPanel to hold the content
        // Set StackPanel's Orientation to Horizontal 

        // Take values[0] and split it by the {X} tags

        // Go through array of values parts and create a TextBlock object for each part
            // If the part is an {X} piece, use values[X+1] for Text and make TextBlock bold
            // Add TextBlock to StackPanel

        // return StackPanel
    }
}