首页 > 其他分享 >WPF创建一个类似聊天框的MQTT报文收发界面

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

时间:2024-02-01 16:34:04浏览次数:45  
标签:自定义 展示 报文 Item MQTT WPF ListView Border

界面的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>

实际的效果如下:
image

  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,可以展示的时候更美观一些。

标签:自定义,展示,报文,Item,MQTT,WPF,ListView,Border
From: https://www.cnblogs.com/xavierxiu/p/18001440

相关文章

  • WPF 上位机 柱子智控系统
    WPF上位机柱子智控 无边框圆角自定义设计页面左侧菜单,自定义最小化,自定义最大化,自定义关闭按钮C#WPF.net6.0数据库sqlserver2012消息队列redis模拟数据modbus 银柱网-李银柱个人博客http://www.liyinzhu.com ......
  • 一个 WPF + MudBlazor 的项目模板(附:多项目模板制作方法)
    最近做了几个WPF+MudBlazor的小东西,每次从头搭建环境比较繁琐,然鹅搭建过程还没啥技术含量,索性就直接做了个模板,方便以后使用。1.介绍一个用来创建.NET8+WPF+MudBlazor的项目模板适用于VS2022用法:vs插件市场下载or自己通过Github源码编译2.模板打包方......
  • HTTP报文结构详解
    HTTP/HTTPS简介HTTP协议是HyperTextTransferProtocol(超文本传输协议)的缩写,是用于从万维网(WWW:WorldWideWeb)服务器传输超文本到本地浏览器的传送协议。HTTP工作在TCP/IP协议体系中的TCP协议上,是一个基于TCP/IP通信协议来传递数据(HTML文件、图片文件、查询结果等)。HT......
  • 通过Demo学WPF—数据绑定(二)
    准备今天学习的Demo是DataBinding中的Linq:创建一个空白解决方案,然后添加现有项目,选择Linq,解决方案如下所示:查看这个Demo的效果:开始学习这个Demoxaml部分查看MainWindow.xaml:<Windowx:Class="Linq.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006......
  • WPF性能优化:形状(Shape)、几何图形(Geometry)和图画(Drawing)的使用
    在用户界面技术中,绘图是一个绕不开的话题。WPF提供了多种可根据应用程序要求进行优化的2D图形和图像的处理功能,包括画刷(Brush)、形状(Shape)、几何图形(Geometry)、图画(Drawing)和变换(Transform)等。其中形状(Shape)、几何图形(Geometry)和图画(Drawing)承担了基础的绘图功能,形......
  • wpf 数据绑定 INotifyPropertyChanged封装
    BindableBase.cspublicabstractclassBindableBase:INotifyPropertyChanged{publiceventPropertyChangedEventHandlerPropertyChanged;//调用方法:publicstringName{get=>name;set{SetProperty<string>(refname,value);}}......
  • springboot集成mqtt
    SpringBoot集成MQTT(简单版)一、docker安装emqx环境(Linux系统)emqx:mqtt服务器(broker)version:'3'services:emqx:image:emqx/emqxcontainer_name:emqxrestart:alwaysports:-8001:18083-8002:1883-8003:8083-8004......
  • wpf 数据绑定 执行流程
    数据绑定SimpleBinding\MainWindow.xaml<Windowx:Class="SimpleBinding.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • WPF 列表内容跟值来排布位置
    首先是利用 ItemsControl来随机(或者根据绑定传的值)来分布位置主要是用Canvas来当画布,然后由值来调整位置 首先,创建实体类publicclassClassA{publicdoubleUpTop{get;set;}publicdoubleUpLeft{get;set;}}然后再你的ViewModel调用publiccl......
  • Prism:打造WPF项目的MVVM之选,简化开发流程、提高可维护性
     概述:探索WPF开发新境界,借助PrismMVVM库,实现模块化、可维护的项目。强大的命令系统、松耦合通信、内置导航,让您的开发更高效、更流畅在WPF开发中,一个优秀的MVVM库是Prism。以下是Prism的优点以及基本应用示例:优点:模块化设计: Prism支持模块化开发,使项目更易维护和扩展。......