示例:WPF中如何处理TabControl页面绑定ItemsSource切换TabItem时UI数据没有持久保存的问题

一、目的:在WPF开发过程中,经常用到TabControl,也会遇到类似问题,用TabControl绑定数据源ItemsSource时,切换TabItem时,UI上的数据没有持久保存,本文介绍一种处理方式,可以做到缓存页面,只在切换TabItem时Load一次,重复切换TabItem时不会重复Load


二、实现

首先介绍遇到问题的写法

        <TabItem Header="TabControl页面数据没有缓存"><TabControl ItemsSource="{h:GetStudents Count=10}"><TabControl.Resources><BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /><DataTemplate DataType="{x:Type h:Student}"><Grid Loaded="Grid_Loaded"><Grid.ColumnDefinitions><ColumnDefinition Width="100" /><ColumnDefinition Width="5" /><ColumnDefinition /></Grid.ColumnDefinitions><TextBox HorizontalAlignment="Stretch" /><GridSplitter Grid.Column="1"Width="5"ResizeBehavior="PreviousAndNext" /><h:Form Grid.Column="2"SelectObject="{Binding}" /></Grid></DataTemplate></TabControl.Resources><TabControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Name}" /></DataTemplate></TabControl.ItemTemplate></TabControl></TabItem>

运行效果如下:

        可以看到,Binding到后台数据的内容可以持久化保存,但是没有Binding(左侧的TextBox)或者UI上的元素(GridSplitter)的位置没有持久化保存

使用ListBox作为容器修改后的写法

        <TabItem Header="TabControl持久保存页面"><TabControl ItemsSource="{h:GetStudents Count=10}"><TabControl.Resources><BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /><DataTemplate DataType="{x:Type h:Student}"><Grid Loaded="Grid_Loaded"><Grid.ColumnDefinitions><ColumnDefinition Width="100" /><ColumnDefinition Width="5" /><ColumnDefinition /></Grid.ColumnDefinitions><TextBox HorizontalAlignment="Stretch" /><GridSplitter Grid.Column="1"Width="5"ResizeBehavior="PreviousAndNext" /><h:Form Grid.Column="2"SelectObject="{Binding}" /></Grid></DataTemplate></TabControl.Resources><TabControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Name}" /></DataTemplate></TabControl.ItemTemplate><TabControl.ContentTemplate><DataTemplate><ListBox ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=TabControl}, Path=ItemsSource}"SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=TabControl}, Path=SelectedItem}"><ListBox.ItemsPanel><ItemsPanelTemplate><Grid /></ItemsPanelTemplate></ListBox.ItemsPanel><ListBox.ItemContainerStyle><Style TargetType="ListBoxItem"><Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}" /><Setter Property="HorizontalContentAlignment" Value="Stretch" /><Setter Property="VerticalContentAlignment" Value="Stretch" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><ContentPresenter /></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle></ListBox></DataTemplate></TabControl.ContentTemplate></TabControl></TabItem>

        相比之前的有问题的写法实际上是增加了TabControl.ContentTemplate的配置,改用ListBox,使用Grid作为ListBox的 ItemsPanel,每次切换TabItem时实际上是切换ListBox中ListBoxItem的显示和隐藏,这样就可以做到切换页面的持久化保存和Load只加载一次的效果。

运行效果如下:

五、需要了解的知识点

TabControl 样式和模板 - WPF .NET Framework | Microsoft Learn 

TabControl 类 (System.Windows.Controls) | Microsoft Learn 

ListBox 类 (System.Windows.Controls) | Microsoft Learn 

System.Windows.Controls 命名空间 | Microsoft Learn

六、源码地址

GitHub - HeBianGu/WPF-ControlDemo: 示例

GitHub - HeBianGu/WPF-ControlBase: Wpf封装的自定义控件资源库

GitHub - HeBianGu/WPF-Control: WPF轻量控件和皮肤库

七、了解更多

System.Windows.Controls 命名空间 | Microsoft Learn

https://github.com/HeBianGu

HeBianGu的个人空间-HeBianGu个人主页-哔哩哔哩视频

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3267499.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Elasticsearch概念及ELK安装

1、Elasticsearch是什么 它是elastic技术栈中的一部分。完整的技术栈包括&#xff1a; Elasticsearch&#xff1a;用于数据存储、计算和搜索 Logstash/Beats&#xff1a;用于数据收集 Kibana&#xff1a;用于数据可视化 整套技术栈被称为ELK&#xff0c;经常用来做日志收集…

海康4G摄像头接入自定义程序

1.使用【萤石云视频】APP添加摄像头&#xff0c;在设置中关闭视频加密 2.打开萤石云&#xff0c;进入控制台 3.设备管理中可以看到添加的设备 4.添加一个应用&#xff0c;即可获取AppKey、Secret、AccessToken 5.根据文档中的说明获取播放地址&#xff0c;这里是我生成的播放…

单证不一致清关难题 | 国际贸易综合服务平台 | 箱讯科技

什么是单证一致&#xff1f; 单证一致出口方所提供的所有单据要严格符合进口方开证银行所开信用证的要求&#xff0c;或者说出口方制作和提供的所有与本项货物买卖有关的单据&#xff0c;与进口方申请开立的信用证对单据的要求完全吻合&#xff0c;没有矛盾。 添加图片注释&am…

本地搭建rtmp拉流

本地搭建rtmp拉流 可按照步骤来 关注公众号&#xff1a;城羽海 更多有趣实用教程 下载地址: 从微信公众号发送关键词 rtmp可获取下载地址 文章目录 本地搭建rtmp拉流 可按照步骤来 关注公众号&#xff1a;城羽海 更多有趣实用教程 拿到之后如图所下&#xff1f;二、配置obs文…

构建查询洞察 UI

本文字数&#xff1a;2631&#xff1b;估计阅读时间&#xff1a;7 分钟 作者&#xff1a;Bucky Schwarz 本文在公众号【ClickHouseInc】首发 我们最近发布了 Query Insights 的初步实现&#xff0c;为 ClickHouse Cloud 用户提供了一种便捷的方法来查看和解释查询日志。该功能对…

Python --NumPy库基础方法(1)

NumPy Numpy(Numerical Python) 是科学计算基础库&#xff0c;提供大量科学计算相关功能&#xff0c;比如数据统计&#xff0c;随机数生成等。其提供最核心类型为多维数组类型&#xff08;ndarray&#xff09;&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;Numpy支持向…

mysql语法介绍

MySQL 语法主要基于 SQL&#xff08;Structured Query Language&#xff09;标准&#xff0c;用于管理和操作关系型数据库。以下是一些基本的 MySQL 语句&#xff1a; 1.创建数据库&#xff1a; CREATE DATABASE database_name; 1.选择数据库&#xff1a; USE database_name;…

科研绘图系列:R语言组合堆积图(stacked barplot with multiple groups)

介绍 通常堆积图的X轴表示样本,样本可能会存在较多的分组信息,通过组合堆积图和样本标签分组信息,我们可以得到一张能展示更多信息的可发表图形。 加载R包 knitr::opts_chunk$set(warning = F, message = F) library(tidyverse) library(cowplot) library(patchwork)导入…

springcloud RocketMQ 客户端是怎么走到消费业务逻辑的 - debug step by step

springcloud RocketMQ &#xff0c;一个mq消息发送后&#xff0c;客户端是怎么一步步拿到消息去消费的&#xff1f;我们要从代码层面探究这个问题。 找的流程图&#xff0c;有待考究。 以下我们开始debug&#xff1a; 拉取数据的线程&#xff1a; PullMessageService.java 本…

云盘高速视觉检测机,如何提高螺丝件的检测效率?

螺纹螺丝钉是一种常见的螺纹结构紧固件&#xff0c;通常由金属制成&#xff0c;具有螺旋状的螺纹结构。这种螺丝钉旨在通过旋入螺纹孔或材料中&#xff0c;实现可靠的固定连接。 螺纹螺丝钉具有螺旋状的螺纹结构&#xff0c;使其能够轻松旋入金属或其他硬质材料。主要用于金属…

UDP的报文结构及其注意事项

1. 概述 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它提供了一种简单的数据传输服务&#xff0c;不保证数据的可靠传输。在网络通信中&#xff0c;UDP通常用于一些对实时性要求较高、数据量较小、传输延迟较低的应用&#xff0c…

NLP基础知识2【各种大模型的注意力】

注意力 传统Attention存在的问题优化方向变体有哪些现在的主要变体集中在KVMulti-Query AttentionGrouped-query AttentionFlashAttention 传统Attention存在的问题 上下文约束速度慢&#xff0c;显存占用大&#xff08;因为注意力考虑整体信息&#xff0c;所以每一个位置都要…

【大模型】基于LoRA微调Gemma大模型(1)

文章目录 一、LoRA工作原理1.1 基本原理1.2 实现步骤 二、LoRA 实现2.1 PEFT库&#xff1a;高效参数微调LoraConfig类&#xff1a;配置参数 2.2 TRL库SFTTrainer 类 三、代码实现3.1 核心代码3.2 完整代码 参考资料 大模型微调技术有很多&#xff0c;如P-Tuning、LoRA 等&#…

狗都能看懂的Actor-Critic强化学习算法讲解

Review Policy Gradient 上面的公式是Policy Gradient的更新函数&#xff0c;这个式子是指在 s t s_t st​时刻采取了 a t a_t at​&#xff0c;计算出对应发生的概率 p θ p_\theta pθ​&#xff0c;然后计算在采取了这个 a t a_t at​之后&#xff0c;所得到的reward有多大。…

table car vs. table cars:数据库命名用单数还是复数?

数据库的命名方式已经形成了许多共识&#xff0c;比如全部小写、下划线分隔、使用标准缩写等&#xff1b;其中就包括「使用单数名词」。 用户 jonr 在 reddit 网的程序员笑话&#xff08;ProgrammerHumor&#xff09;社区发了一篇帖子&#xff0c;调侃这些数据库命名方式的共识…

Hive3:基本介绍

一、概述 Apache Hive是一款分布式SQL计算的工具&#xff0c; 其主要功能是&#xff1a; 将SQL语句翻译成MapReduce程序运行 二、基本逻辑简介 主要由两大模块组成&#xff1a;元数据管理&#xff0c;SQL解析器 1、元数据管理 即&#xff1a;数据位置信息、数据结构信息、…

在jmeter中使用javascript脚本

工作上遇到一个压力测试的需求&#xff0c;需要测试几个考试相关的接口。其中有一个获取试题详情的接口&#xff0c;和一个提交答题信息的接口。后一个接口以上一接口的返回内容为参数&#xff0c;添加上用户的答案即可。jmeter提供了非常多的方式可以实现该需求&#xff0c;这…

Multi Range Read与Covering Index是如何优化回表的?

上篇文章末尾我们提出一个问题&#xff1a;有没有什么办法可以尽量避免回表或让回表的开销变小呢&#xff1f; 本篇文章围绕这个问题提出解决方案&#xff0c;一起来看看MySQL是如何优化的 回表 为什么会发生回表&#xff1f; 因为使用的索引并没有整条记录的所有信息&…

Vue3 Pinia/组件通信

2. pinaia 符合直觉的Vue.js状态管理库 集中式状态&#xff08;数据&#xff09;管理 官网 2.1 搭建pinaia环境 第一步&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts import { createApp } from vue import App from ./App.vue/* 引入createPinia&…

案例分析:人工智能在航空航天领域的应用

作者主页: 知孤云出岫 目录 作者主页:案例分析&#xff1a;人工智能在航空航天领域的应用引言人工智能在航空航天中的主要应用案例分析案例一&#xff1a;AI优化航天器设计案例二&#xff1a;AI辅助飞行安全——预测维护案例三&#xff1a;AI自动驾驶系统案例四&#xff1a;A…