Message

A chat message: bubbles with a header, a footer and an avatar, aligned to a side.

ExampleInteractive

Message — Avalonia UIKit

<StackPanel Width="420" Spacing="16" HorizontalAlignment="Left">
  <uikit:Message Footer="Read">
    <uikit:Message.Avatar>
      <uikit:Avatar UserName="Alice" Width="32" Height="32" />
    </uikit:Message.Avatar>
    <uikit:Message.Header>
      <StackPanel Orientation="Horizontal" Spacing="4">
        <TextBlock Text="Alice" />
        <TextBlock Text="10:24 AM" />
      </StackPanel>
    </uikit:Message.Header>
    <uikit:Bubble Classes="secondary" Content="Hi there!" />
    <uikit:Bubble Classes="secondary" Content="Can you review this draft?" />
  </uikit:Message>
  <uikit:Message Classes="end" Footer="Delivered">
    <uikit:Bubble Content="Looks good to me." />
  </uikit:Message>
</StackPanel>

View code

#Usage

uikit:Message is one turn of a conversation. Its items are the bubbles (or any content: plain strings show in 16px text), 10px apart; Header sits above them and Footer below, in muted 12px text inset 12px unless a bubble is ghost; Avatar sits at the bottom beside them. Classes="end" mirrors the whole message to the end of the row. Stack messages in a StackPanel with Spacing="8" for a message group.

#Examples

Without bubbles: the items are strings, shown as plain text under the header.

<uikit:Message Width="420" HorizontalAlignment="Left">
  <uikit:Message.Header>
    <TextBlock Text="Assistant" />
  </uikit:Message.Header>
  <x:String>Sure, here is a summary of the draft.</x:String>
  <x:String>It introduces the new controls one by one.</x:String>
</uikit:Message>

View code

#Not covered

• A message group control (a StackPanel with Spacing="8" is the same).
• Setting the header's and footer's insets separately.