WPF-具有可选文本的可绑定聊天视图

Question

WPF - Bindable chat view with selectable text

I want to create a simple text chat app using WPF. And of course user should be able to select and, for example, copy text. It's very easy to use, for example, ListView with ItemsSource bound to messages. And appearance can be tuned, but the main problem is text selection. It's possible to select text only in one single control (one message).

At the moment i use WebBrowser for showing messages. So i have tons of HTML+JS+CSS. I think i dont even have to say how terrible it is.

Can you please point me to right direction?

Answer 1

You could take a look at the FlowDocument for that. This class can be used for customizing the appearance of the blocks (paragraphs) similar to an ItemsControl , it can contain UI controls too (in case you need it). And of course, the text selection will work across the whole document.

Unfortunately, the FlowDocument doesn't support bindings, so you will have to write some code for that.

Let me give you an example. You could use a Behavior from the System.Windows.Interactivity namespace to create a reusable functionality extension for the FlowDocument class.

This is what you could start with:

<FlowDocumentScrollViewer>
  <FlowDocument ColumnWidth="400">
    <i:Interaction.Behaviors>
      <myApp:ChatFlowDocumentBehavior Messages="{Binding Messages}">
        <myApp:ChatFlowDocumentBehavior.ItemTemplate>
          <DataTemplate>
            <myApp:Fragment>
              <Paragraph Background="Aqua" BorderBrush="BlueViolet" BorderThickness="1"/>
            </myApp:Fragment>
          </DataTemplate>
        </myApp:ChatFlowDocumentBehavior.ItemTemplate>
      </myApp:ChatFlowDocumentBehavior>
    </i:Interaction.Behaviors>
  </FlowDocument>
</FlowDocumentScrollViewer>

(the i namespace is xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" )

So there is our ChatFlowDocumentBehavior which has a bindable Messages property for displaying the chat messages. Also, there is an ItemTemplate property where you define how a single chat message should look like.

Note the Fragment class. This is just a simple wrapper (code below). The DataTemplate class won't accept a Paragraph as its content, but we need our items to be Paragraph s.

You can configure that Paragraph as you wish (like colors, fonts, maybe additional child items or controls etc.)

So, the Fragment class is a simple wrapper:

[ContentProperty("Content")]
sealed class Fragment : FrameworkElement
{
  public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
    nameof(Content),
    typeof(FrameworkContentElement),
    typeof(Fragment));

  public FrameworkContentElement Content
  {
    get => (FrameworkContentElement)GetValue(ContentProperty);
    set => SetValue(ContentProperty, value);
  }
}

The behavior class has a little bit more code but isn't complicated.

  sealed class ChatFlowDocumentBehavior : Behavior<FlowDocument>
  {
    // This is our dependency property for the messages
    public static readonly DependencyProperty MessagesProperty =
      DependencyProperty.Register(
        nameof(Messages),
        typeof(ObservableCollection<string>),
        typeof(ChatFlowDocumentBehavior),
        new PropertyMetadata(defaultValue: null, MessagesChanged));

    public ObservableCollection<string> Messages
    {
      get => (ObservableCollection<string>)GetValue(MessagesProperty);
      set => SetValue(MessagesProperty, value);
    }

    // This defines how our items will look like
    public DataTemplate ItemTemplate { get; set; }

    // This method will be called by the framework when the behavior attaches to flow document
    protected override void OnAttached()
    {
      RefreshMessages();
    }

    private static void MessagesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      if (!(d is ChatFlowDocumentBehavior b))
      {
        return;
      }

      if (e.OldValue is ObservableCollection<string> oldValue)
      {
        oldValue.CollectionChanged -= b.MessagesCollectionChanged;
      }

      if (e.NewValue is ObservableCollection<string> newValue)
      {
        newValue.CollectionChanged += b.MessagesCollectionChanged;
      }

      // When the binding engine updates the dependency property value,
      // update the flow doocument
      b.RefreshMessages();
    }

    private void MessagesCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
      switch (e.Action)
      {
        case NotifyCollectionChangedAction.Add:
          AddNewItems(e.NewItems.OfType<string>());
          break;

        case NotifyCollectionChangedAction.Reset:
          AssociatedObject.Blocks.Clear();
          break;
      }
    }

    private void RefreshMessages()
    {
      if (AssociatedObject == null)
      {
        return;
      }

      AssociatedObject.Blocks.Clear();
      if (Messages == null)
      {
        return;
      }

      AddNewItems(Messages);
    }

    private void AddNewItems(IEnumerable<string> items)
    {
      foreach (var message in items)
      {
        // If the template was provided, create an instance from the template;
        // otherwise, create a default non-styled paragraph instance
        var newItem = (Paragraph)(ItemTemplate?.LoadContent() as Fragment)?.Content ?? new Paragraph();

        // This inserts the message text directly into the paragraph as an inline item.
        // You might want to change this logic.
        newItem.Inlines.Add(message);
        AssociatedObject.Blocks.Add(newItem);
      }
    }
  }

Having this as a starting point, you can extend the behavior to suit your needs. Eg add event handling logic for removing or reordering of the messages, implement comprehensive message templates etc.

It's almost always possible to implement the functionality with as less code as possible, using XAML features: styles, templates, resources etc. However, for the missing features, you just need to fall back to the code. But in that case, always try to avoid code-behind in the views. Create Behavior s or attached properties for that.

Answer 2

A textbox should give you what you are looking for I think. You will need to do the styling so it looks like you want but here is code: XAML:

<TextBox Text="{Binding AllMessages}"/>

ViewModel:

    public IEnumerable<string> Messages { get; set; }

    public string AllMessages => GetAllMessages();

    private string GetAllMessages()
    {
        var builder = new StringBuilder();
        foreach (var message in Messages)
        {
           //Add in whatever for context
           builder.AppendLine(message);
        }
        return builder.ToString();
    }       

You will probably want to use a RichTextBox for better formatting.