How to set foreground on part of multi binding when concatenating two properties in WPF XAML?

Question

I am displaying two property values using multi-binding in WPF XAML. I would want to set first/second value by different color.

    <DataGridTemplateColumn Header="ConcatCol"
                                            Width="60">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock TextAlignment="Right">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Text">
                                                <Setter.Value>
                                                    <MultiBinding StringFormat="{} {0:C1} / {1:C1}">
                                                        <Binding Path="FirstProp" />
                                                        <Binding Path="SecondProp" />
                                                    </MultiBinding>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>

So basically you can see that I am displaying two property values in a single cell but separating them by "/". I am also specifying the string format for each of the property.

Now my question is How can I display the value before "/" in Green color and the latter in Red color?

Answer 1

You could actually use Textblock with multiple runs:

<TextBlock TextAlignment="Right"> 
  <Run Text="{Binding FirstProp}" Foreground="Green"/> / <Run Text="{Binding SecondProp}" Foreground="Red"/>
</TextBlock>