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

Stout 281 Reputation points
2020-12-18T19:54:13.457+00:00

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.

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,185 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
559 questions
No comments
{count} votes

Accepted answer
  1. Peter Fleischer (Freelancer) 17,571 Reputation points
    2020-12-19T14:04:48+00:00

    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:

    49468-x.png

    No comments

2 additional answers

Sort by: Most helpful
  1. Viorel 82,911 Reputation points
    2020-12-19T09:41:16.64+00:00

    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.

    No comments

  2. Stout 281 Reputation points
    2020-12-21T16:49:21.5+00:00

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

    No comments