wpf 应用程序的聊天面板 UI

Question

我正在使用富文本框向用户显示消息。我想要做的是我想在屏幕的右侧显示发件人消息，在屏幕左侧显示收件人消息。我已经尝试过各种技术，比如改变流向，但都失败了 so.Any 帮助将不胜感激

这是我的 xaml:

<wpfTool:RichTextBox>                            
    <FlowDocument>
         <BlockUIContainer></BlockUIContainer>
         <Paragraph>
             <InlineUIContainer></InlineUIContainer>
             <Run Text="{Binding ChatBlock}"  />
             <LineBreak/>
         </Paragraph>
    </FlowDocument>
 </wpfTool:RichTextBox>

Answer 1

基于thispost；像下面这样的东西应该有帮助

    public static void setRtf(ref RichTextBox rtfBox, string text, bool fromMe = false)
    {
        Paragraph p = new Paragraph();
        p.FontFamily = rtfBox.FontFamily;
        p.TextAlignment = fromMe ? TextAlignment.Left : TextAlignment.Right;
        Run pTxt = new Run();
        pTxt.Text = text;
        p.Inlines.Add(pTxt);
        rtfBox.Blocks.Add(p);
    }

Answer 2

你必须像这样做一些模板

    <ItemsControl HorizontalAlignment="Stretch"
                  BorderThickness="2"
                  BorderBrush="Red"
                  Grid.ColumnSpan="2"
                  VerticalAlignment="Stretch"
                  Name="ItemsControl1">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <RichTextBox HorizontalAlignment="Right"
                             VerticalAlignment="Stretch">
                    <FlowDocument>
                        <Paragraph Name="Para">
                            <Run Text="{Binding Text}" />
                        </Paragraph>
                    </FlowDocument>
                </RichTextBox>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Type}" Value="Sender">
                        <Setter TargetName="Para"
                                Property="TextAlignment"
                                Value="Right" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}"
                                 Value="Receiver">
                        <Setter TargetName="Para"
                                Property="TextAlignment"
                                Value="Left" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

我创建了一个示例项目here

wpf 应用程序的聊天面板 UI

Chat panel UI for wpf application

c#

wpf

xaml