WPF创建一个类似聊天框的MQTT报文收发界面

界面的xaml代码如下

<ListView
    x:Name="LvmqttMsg"
    Background="Transparent"
    ItemsSource="{Binding MqttMsgItems}"
    ScrollViewer.CanContentScroll="False">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Margin" Value="5,5,5,5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Border
                            x:Name="border"
                            HorizontalAlignment="{Binding Location}"
                            Background="White"
                            BorderBrush="{Binding BorderColor}"
                            BorderThickness="2"
                            CornerRadius="10">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderThickness" Value="3" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <StackPanel Margin="10">
                    <TextBlock Margin="0,0,0,5" Text="{Binding MsgTopic}" />
                    <TextBox
                        Height="auto"
                        MaxWidth="300"
                        Style="{StaticResource NoUnderlineTextBoxStyle}"
                        Text="{Binding Msg}"
                        TextWrapping="Wrap" />
                    <TextBlock Margin="0,5,0,0" Text="{Binding Time}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

实际的效果如下：

1. ListView中的ScrollViewer.CanContentScroll="False"这一项可以将ListView中的滚动效果由一次只能滚动一个Item，改成可以一点一点的滚动。

2. ListView.ItemContainerStyle可以修改如何展示当前Item的样式，向我的代码里，就是给Item增加了一个Border，可以自定义Border的边框颜色，从而可以区分是发送的报文还是接收的报文。并且还加了一个触发器，实现的效果是当鼠标划过Border的时候，边框变粗，这样子可以增加特效，从而更加明显的展示出鼠标滑过当前Item。

3. ListView.ItemTemplate可以自定义要展示的Item的样式，很灵活，我这里就是用了Grid，里面有三个空间，分别展示mqtt报文的Topic，报文和时间。并且我还自定义了一个没有下划线的TextBox的Style，可以展示的时候更美观一些。