How can I bind text and have it format itself on the UI?

Question

Hi. How can I bind text and have it format itself on the UI?

For example, suppose the string in the ViewModel is this:

myDependencyProperty = @"<b>Title: </b>My title\n<b>Description: </b>This is my description.\n";

and in the View layer I have this:

<TextBlock Text="{Binding myDependencyProperty}" />

The problem is that it gets displayed as is. But I want it to be formatted accordingly, as follows:

Title: My Window

Description: This is my description.

How can I get that done?

Thank you.

Answer 1

Hi,
you can use WebBrowser to display your string and replace NewLine (\n) in string. Try following demo:

XAML

<Window x:Class="WpfApp1.Window023"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp1"  
        mc:Ignorable="d"  
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">  
  <Grid>  
    <WebBrowser x:Name="wb"/>  
  </Grid>  
</Window>  

And CodeBehind:

using System.Windows;  
  
namespace WpfApp1  
{  
  public partial class Window023 : Window  
  {  
    public Window023()  
    {  
      InitializeComponent();  
    }  
  
    private void Window_Loaded(object sender, RoutedEventArgs e)  
    {  
      string str = @"<b>Title: </b>My title\n<b>Description: </b>This is my description.\n";  
      str = str.Replace("\\n", "<br />");  
      wb.NavigateToString(str);  
    }  
  }  
}  

Result:

Answer 2

To show formatted text in WPF, you can use a RichTextBox, for example:

<RichTextBox IsReadOnly="True" IsReadOnlyCaretVisible="True">
    <FlowDocument x:Name="doc1"/>
</RichTextBox>

// code:
string t = "<Span xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xml:space='preserve'><Bold>Title: </Bold>My title<LineBreak/><Bold>Description: </Bold>This is my description.</Span>";
var tr = new TextRange( doc1.ContentStart, doc1.ContentEnd );
using( var sr = new MemoryStream( Encoding.UTF8.GetBytes( t ) ) )
{
    tr.Load( sr, DataFormats.Xaml );
}

However, this example does not use binding.

See also: DocumentViewer, FlowDocumentReader, FlowDocumentScrollViewer.

Answer 3

Hi. Thank you both; those answers and samples are extremely helpful. Works perfectly.