title: How to format chat conversations in markdowntextblock in Windows Universal application (windows 10)
body: <p>I am building a chat application in which i have below xaml code -</p>
  
  <pre><code>&lt;Page
  x:Class="MyProject1.MainPage"
  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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  mc:Ignorable="d" Background="Black"&gt;
  &lt;Grid Background="White" Name="mainGrid"&gt;
  
      &lt;Border  BorderBrush="Cyan" BorderThickness="0.2" Margin="3,0,3,3"&gt;
          &lt;ListView x:Name="ListView" VerticalAlignment="Bottom" SelectionMode="None" IsItemClickEnabled="True"&gt;
              &lt;ListView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;controls:MarkdownTextBlock Name="markdownBlock" Text="{Binding Text}" TextWrapping="Wrap" FontFamily="Segoe-UI"&gt;
                      &lt;/controls:MarkdownTextBlock&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListView.ItemTemplate&gt;
              &lt;ListView.ItemContainerStyle&gt;
                  &lt;Style TargetType="ListViewItem"&gt;
                      &lt;Setter Property="FontSize" Value="14" /&gt;
                      &lt;Setter Property="Foreground" Value="Black" /&gt;
                  &lt;/Style&gt;
              &lt;/ListView.ItemContainerStyle&gt;
          &lt;/ListView&gt;
      &lt;/Border&gt;
  &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>I use below code in my code behind to send text to the MarkdownTextBlock control </p>
  
  <pre><code>            messages.Add(new Message() { Text = "**Person 1:** " + message });
  </code></pre>
  
  <p>and the  response -</p>
  
  <pre><code>            messages.Add(new Message() { Text = "**Person 2:** " + activity.Text });
  </code></pre>
  
  <p>Right now the format is plain background like below -</p>
  
  <p><strong>Person 1:</strong> Hello, How are you doing?</p>
  
  <p><strong>Person 2:</strong> Hi, I am doing great!</p>
  
  <p>How can i format these plain messages to get conversation feel like we have in skype as </p>
  
  <p><a href="https://i.stack.imgur.com/09c9x.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/09c9x.jpg" alt="enter image description here"></a></p>
  
  <p>I am new to Windows Application development, I am not sure how to format the text as conversations within markdown text block, could you guide me?</p>
  
  <p>Do I need to create a table within markdown control and pass the messages by having background color on rows? not sure how to do this. Any help?</p>
  
  <p>Updated view -</p>
  
  <pre><code>&lt;Page
      x:Class="MyProject1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:gif="using:XamlAnimatedGif"   
      xmlns:local="using:LISA_Speech1"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
      mc:Ignorable="d" Background="Black"&gt;
  
      &lt;Page.Resources&gt;
          &lt;Style x:Key="MessageItemStyle" TargetType="SelectorItem"&gt;
              &lt;Setter Property="Height" Value="Auto" /&gt;
              &lt;Setter Property="Width" Value="450" /&gt;
              &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
              &lt;Setter Property="VerticalContentAlignment" Value="Stretch" /&gt;
              &lt;Setter Property="HorizontalAlignment" Value="Stretch" /&gt;
              &lt;Setter Property="Padding" Value="10" /&gt;
              &lt;Setter Property="Margin" Value="5" /&gt;
          &lt;/Style&gt;
  
          &lt;Style
          x:Key="RightAlignedMessageStyle"
          BasedOn="{StaticResource MessageItemStyle}"
          TargetType="SelectorItem"&gt;
              &lt;Setter Property="Background" Value="LightGray" /&gt;
              &lt;Setter Property="HorizontalAlignment" Value="Right" /&gt;
          &lt;/Style&gt;
  
          &lt;Style
          x:Key="LeftAlignedMessageStyle"
          BasedOn="{StaticResource MessageItemStyle}"
          TargetType="SelectorItem"&gt;
              &lt;Setter Property="Background" Value="Orange" /&gt;
              &lt;Setter Property="HorizontalAlignment" Value="Left" /&gt;
          &lt;/Style&gt;
  
          &lt;styleSelectors:MessageContainerStyleSelector
          x:Key="MessageContainerStyleSelector"
          ReceivedStyle="{StaticResource LeftAlignedMessageStyle}"
          Sender="{x:Bind CurrentUser, Mode=OneWay}"
          SentStyle="{StaticResource RightAlignedMessageStyle}" /&gt;
  
          &lt;DataTemplate x:Key="MessageTemplate" x:DataType="messages:Message"&gt;
              &lt;Grid&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition Height="Auto" /&gt;
                  &lt;/Grid.RowDefinitions&gt;
  
                  &lt;TextBlock
                  Style="{StaticResource BodyTextBlockStyle}"
                  Text="{x:Bind Message, Mode=OneWay}"
                  TextWrapping="WrapWholeWords" /&gt;
  
                  &lt;StackPanel
                  Grid.Row="1"
                  Margin="0,5,0,0"
                  HorizontalAlignment="Right"
                  Orientation="Horizontal"&gt;
                      &lt;TextBlock
                      HorizontalAlignment="Right"
                      Style="{StaticResource CaptionTextBlockStyle}"
                      Text="{x:Bind SentDate, Mode=OneWay}" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
          &lt;/DataTemplate&gt;
  
          &lt;ItemsPanelTemplate x:Key="MessageItemPanelTemplate"&gt;
              &lt;ItemsStackPanel VerticalAlignment="Bottom" ItemsUpdatingScrollMode="KeepLastItemInView" /&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/Page.Resources&gt;
  
      &lt;Grid Background="Black" Name="mainGrid"&gt;
  
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="*"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="50"&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Border  BorderBrush="Cyan" BorderThickness="0.2" Margin="3,0,3,3"&gt;
              &lt;ListView
      x:Name="Messages"
      Margin="10"
      CanDrag="False"
      CanReorderItems="False"
      IsItemClickEnabled="False"
      IsTapEnabled="False"
      ItemContainerStyleSelector="{StaticResource MessageContainerStyleSelector}"
      ItemTemplate="{StaticResource MessageTemplate}"
      ItemsPanel="{StaticResource MessageItemPanelTemplate}"
      ItemsSource="{x:Bind Text, Mode=OneWay}" /&gt;
          &lt;/Border&gt;
  
          &lt;Grid Grid.Row="1"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*"&gt;&lt;/ColumnDefinition&gt;
                  &lt;ColumnDefinition Width="35"&gt;&lt;/ColumnDefinition&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;TextBox x:Name="text" KeyUp="TextBox_KeyDown" Grid.Column="0" PlaceholderText="Type something or say 'Start Listening'" FontSize="17" BorderBrush="Purple" Margin="0,10,0,-7" Height="58" VerticalAlignment="Top"&gt;
              &lt;/TextBox&gt;
  
              &lt;Button x:Name="button" Click="Button_Click" Grid.Column="1" Height="58" Width="35" Padding="0" Background="Purple" Margin="0,10,0,-7"&gt;
                  &lt;SymbolIcon x:Name="symbol" Symbol="Microphone" Width="35" HorizontalAlignment="Center" Foreground="White" Margin="-2,-8,-2,-2"/&gt;
              &lt;/Button&gt;
          &lt;/Grid&gt;
  
  
          &lt;MediaElement x:Name="Media"&gt;&lt;/MediaElement&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>