Wpf 使用 Prism 实战开发Day07

待办事项页面设计

效果图:

一.布局设计

页面主要分上下布局，分2行进行设计，使用 Grid.RowDefinitions 将页面分上下2行
例如：

<Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/>
</Grid.RowDefinitions>
  1.  页面需要设计多少行，就在<Grid.RowDefinitions> 中嵌套多少个 RowDefinitions
  2.  把 Height 属性设置为auto（自动高度），目的是让第一行根据页面内容进行自适应

第一行内容设计 

 第一行设计，使用 StackPanel 控件

<StackPanel Margin="15,0,0,0" Orientation="Horizontal"><TextBox Width="250" VerticalAlignment="Center" md:HintAssist.Hint="查找待办事项..." md:TextFieldAssist.HasClearButton="True"/><TextBlock Text="筛选:" Margin="10.0" VerticalAlignment="Center"/><ComboBox SelectedIndex="0"><ComboBoxItem>全部</ComboBoxItem><ComboBoxItem>待办</ComboBoxItem><ComboBoxItem>已完成</ComboBoxItem></ComboBox>
</StackPanel>
<Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" />

属性说明：

  1. Orientation 属性值：Horizontal-内容水平排列。Vertical-内容垂直排列。
  2. 文本输入框 查找待办事项.. 提示文字, 使用MD 框架的提示,并且要引入MD 的命名空间：                
    xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"

  3. 引入命名空间后，在需要提示的文本输入框中，使用 md:HintAssist.Hint="查找待办事项..." 来显示文字。

    <TextBox Width="250" md:HintAssist.Hint="查找待办事项..."/>
  4. 文本输入框中，添加一个清除按钮： 
    md:TextFieldAssist.HasClearButton="True"
  5. 文本框内容垂直方向居中属性： 
    VerticalAlignment="Center"
  6. 水平方向居中属性： 
    HorizontalAlignment="Center"

  7. 下拉框默认选择第一个属性设置  SelectedIndex="0"

第二行内容设计

使用 ItemsControl 控件，并且该控件的固定写法如下：

 <ItemsControl><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl>

然后在 ItemsControl 里面使用 WrapPanel控件，WrapPanel 控件布局默认是从左往右排，并且越出指定的空间后，自动另起一行进行排列。

控件布局以及排列方式定义完成后，需要使用自定义模板进行数据内容渲染。
例如：

 <ItemsControl><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--自定义内容模板--><ItemsControl.ItemTemplate><DataTemplate><!--自定义内容区域--></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>
  •  自定义内容区域数据渲染。ItemsSource 绑定后台数据源
        <ItemsControl Grid.Row="1" HorizontalAlignment="Center" ItemsSource="{Binding ToDoDtos}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--自定义内容模板--><ItemsControl.ItemTemplate><DataTemplate><!--自定义内容区域--><Grid Width="220" MinHeight="180" MaxHeight="250" Margin="8" ><!--定义2行--><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition /></Grid.RowDefinitions><!--右上角按钮--><md:PopupBox HorizontalAlignment="Right" Panel.ZIndex="1"><Button Content="删除"/></md:PopupBox><!--整个框圆角--><Border CornerRadius="3" Grid.RowSpan="2" Background="#11b038"/><TextBlock  Text="{Binding Title}" Padding="10,5" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Padding="10,5" Grid.Row="1"/><!--白色背景底色控件--><Canvas Grid.RowSpan="2" ClipToBounds="True"><Border Canvas.Top="10" CornerRadius="100" Canvas.Right="-50" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/><Border Canvas.Top="80" CornerRadius="100" Canvas.Right="-30" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/></Canvas></Grid></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>
  1. 层级属性：Panel.ZIndex="1",最顶层。
  • 后端生成页面模拟静态数据。

例如：在ToDoViewModel 中生成静态测试数据

public class ToDoViewModel:BindableBase{public ToDoViewModel(){ToDoDtos = new ObservableCollection<ToDoDto>();CreateTodoList();}private ObservableCollection<ToDoDto> toDoDtos;/// <summary>/// 创建数据的动态集合/// </summary>public ObservableCollection<ToDoDto> ToDoDtos{get { return toDoDtos; }set { toDoDtos = value;RaisePropertyChanged(); }}void CreateTodoList(){for (int i = 0; i < 20; i++){toDoDtos.Add(new ToDoDto(){Title="标题"+i,Content="测试数据..."});}}}

二.待办事项按钮弹出层设计

使用 md:DialogHost 控件，把整个布局都包裹住。并且点击按钮时右边需要有一个弹出的区域，要使用 md:DrawerHost 控件来实现。

  • 模板固定写法如下：
<md:DialogHost><md:DrawerHost><!--设计右边弹出层--><md:DrawerHost.RightDrawerContent><!--定义弹出层的内容区域--><DockPanel Width="300"></DockPanel></md:DrawerHost.RightDrawerContent></md:DrawerHost>
</md:DialogHost>

 添加弹出层自定义内容：

    <md:DialogHost><md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen}"><!--设计右边弹出层--><md:DrawerHost.RightDrawerContent><!--定义弹出层的内容区域--><DockPanel Width="300" LastChildFill="False"><TextBlock Text="添加待办" Padding="20,10" FontSize="20" FontWeight="Bold"  DockPanel.Dock="Top"/><StackPanel Orientation="Horizontal" Margin="20" DockPanel.Dock="Top"><TextBlock Text="状态:"  Padding="0,0,10,0" VerticalAlignment="Center"/><ComboBox SelectedIndex="0"><ComboBoxItem>待办</ComboBoxItem><ComboBoxItem>已完成</ComboBoxItem></ComboBox></StackPanel><TextBox md:HintAssist.Hint="请输入待办概要" Margin="20,0" DockPanel.Dock="Top"/><TextBox md:HintAssist.Hint="请输入待办内容" Margin="20" MinHeight="100" DockPanel.Dock="Top"/><Button Content="添加到待办"  DockPanel.Dock="Top" Margin="20,0" /></DockPanel></md:DrawerHost.RightDrawerContent></md:DrawerHost></md:DialogHost>
  1. DockPanel.Dock属性，为Top，让设置该属性的控件内容往上靠。
  2. IsRightDrawerOpen ，通过设置该属性值来控制弹出层是否展开或关闭。

按钮点击命令写法

点击待办按钮时，通过前端 绑定命令的方式调用后台的方法，给isRightDrawerOpen 属性赋值来控制弹出层的展开或关闭。
例如：

  1. 前端按钮绑定命令   <Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" Command="{Binding AddCommand}" />
  2. 后端绑定命令代码实现
public class ToDoViewModel:BindableBase{public ToDoViewModel(){AddCommand = new DelegateCommand(Add);}private void Add(){//处理的逻辑throw new NotImplementedException();}public DelegateCommand AddCommand{ get; private set; }}

三.待办页面源码

ToDoView.xaml

<UserControl x:Class="MyToDo.Views.ToDoView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:MyToDo.Views"mc:Ignorable="d" xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"d:DesignHeight="450" d:DesignWidth="800"><md:DialogHost><md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen}"><!--设计右边弹出层--><md:DrawerHost.RightDrawerContent><!--定义弹出层的内容区域--><DockPanel Width="300" LastChildFill="False"><TextBlock Text="添加待办" Padding="20,10" FontSize="20" FontWeight="Bold"  DockPanel.Dock="Top"/><StackPanel Orientation="Horizontal" Margin="20" DockPanel.Dock="Top"><TextBlock Text="状态:"  Padding="0,0,10,0" VerticalAlignment="Center"/><ComboBox SelectedIndex="0"><ComboBoxItem>待办</ComboBoxItem><ComboBoxItem>已完成</ComboBoxItem></ComboBox></StackPanel><TextBox md:HintAssist.Hint="请输入待办概要" Margin="20,0" DockPanel.Dock="Top"/><TextBox md:HintAssist.Hint="请输入待办内容" Margin="20" MinHeight="100" DockPanel.Dock="Top"/><Button Content="添加到待办"  DockPanel.Dock="Top" Margin="20,0" /></DockPanel></md:DrawerHost.RightDrawerContent><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><StackPanel Margin="15,0,0,0" Orientation="Horizontal"><TextBox Width="250" VerticalAlignment="Center" md:HintAssist.Hint="查找待办事项..." md:TextFieldAssist.HasClearButton="True"/><TextBlock Text="筛选:" Margin="10.0" VerticalAlignment="Center"/><ComboBox SelectedIndex="0"><ComboBoxItem>全部</ComboBoxItem><ComboBoxItem>待办</ComboBoxItem><ComboBoxItem>已完成</ComboBoxItem></ComboBox></StackPanel><Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" Command="{Binding AddCommand}" /><ItemsControl Grid.Row="1" HorizontalAlignment="Center" ItemsSource="{Binding ToDoDtos}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--自定义内容模板--><ItemsControl.ItemTemplate><DataTemplate><!--自定义内容区域--><Grid Width="220" MinHeight="180" MaxHeight="250" Margin="8" ><!--定义2行--><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition /></Grid.RowDefinitions><!--右上角按钮--><md:PopupBox HorizontalAlignment="Right" Panel.ZIndex="1"><Button Content="删除"/></md:PopupBox><!--整个框圆角--><Border CornerRadius="3" Grid.RowSpan="2" Background="#11b038"/><TextBlock  Text="{Binding Title}" Padding="10,5" FontWeight="Bold"/><TextBlock Text="{Binding Content}" Padding="10,5" Grid.Row="1"/><!--白色背景底色控件--><Canvas Grid.RowSpan="2" ClipToBounds="True"><Border Canvas.Top="10" CornerRadius="100" Canvas.Right="-50" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/><Border Canvas.Top="80" CornerRadius="100" Canvas.Right="-30" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/></Canvas></Grid></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid></md:DrawerHost></md:DialogHost></UserControl>

 ToDoViewModel.cs

public class ToDoViewModel:BindableBase{public ToDoViewModel(){ToDoDtos = new ObservableCollection<ToDoDto>();CreateTodoList();AddCommand = new DelegateCommand(Add);}private bool isRightDrawerOpen;/// <summary>/// 右侧编辑窗口是否展开/// </summary>public bool IsRightDrawerOpen{get { return isRightDrawerOpen; }set { isRightDrawerOpen = value; RaisePropertyChanged(); }}public DelegateCommand AddCommand{ get; private set; }private ObservableCollection<ToDoDto> toDoDtos;/// <summary>/// 创建数据的动态集合/// </summary>public ObservableCollection<ToDoDto> ToDoDtos{get { return toDoDtos; }set { toDoDtos = value;RaisePropertyChanged(); }}void CreateTodoList(){for (int i = 0; i < 20; i++){toDoDtos.Add(new ToDoDto(){Title="标题"+i,Content="测试数据..."});}}/// <summary>/// 添加待办/// </summary>/// <exception cref="NotImplementedException"></exception>private void Add(){IsRightDrawerOpen=true;}}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

创意项目开源，文生图、排序/优选等...，持续开源更新！！

创意项目开源，文生图、排序/优选等...，持续开源更新！！

热烈欢迎大家在git上star&#xff01;&#xff01;&#xff01;冲鸭&#xff01;&#xff01;&#xff01; 1.dalle1在厨房家具中文场景上训练。 GitHub - leeguandong/DALLE1: dalle1在中文家具场景的微调&#xff0c;效果并不好dalle1在中文家具场景的微调&#xff0c;效果…
阅读更多...
MYSQL报错 [ERROR] InnoDB: Unable to create temporary file； errno: 0

MYSQL报错 [ERROR] InnoDB: Unable to create temporary file； errno: 0

起因 服务器的mysql不支持远程访问&#xff0c;在修改完相关配置后重启服务出错。 2023-12-03T10:12:23.895459Z 0 [Note] C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqld.exe (mysqld 5.7.22-log) starting as process 15684 ... 2023-12-03T10:12:23.908886Z 0 [Note…
阅读更多...
nodejs基于vue的社区物业缴费报修管理系统7vwc6

nodejs基于vue的社区物业缴费报修管理系统7vwc6

运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均可 数据库用MySQL,后台用vue框架 基本要求&#xff1a; 1. 对项目进行详细实际的需求分析。 2. 在网…
阅读更多...
前端面试灵魂提问（1）

前端面试灵魂提问（1）

1.自我介绍 2.在实习中&#xff0c;你负责那一模块 3.any与unknow的异同 相同点&#xff1a;any和unkonwn 可以接受任何值 不同点&#xff1a;any会丢掉类型限制&#xff0c;可以用any 类型的变量随意做任何事情。unknown 变量会强制执行类型检查&#xff0c;所以在使用一个…
阅读更多...
2024年天津财经大学珠江学院专升本专业课报名缴费操作流程

2024年天津财经大学珠江学院专升本专业课报名缴费操作流程

天津财经大学珠江学院专升本专业课报名缴费操作流程 天津财经大学珠江学院专升本专业课报名就是缴费&#xff0c;只需要使用中国银行交专业课报名费即可。 缴费操作流程如下&#xff1a; 登录中国银行手机 APP—点击“生活”—在界面 最左上角选择定位为“天津市”—点击“生…
阅读更多...
❀My学习Linux命令小记录（6）❀

❀My学习Linux命令小记录（6）❀

目录 ❀My学习Linux命令小记录&#xff08;6&#xff09;❀ 26.ps指令 27.grep指令 28.awk指令 29.sed指令 30.wc指令 ❀My学习Linux命令小记录&#xff08;6&#xff09;❀ 26.ps指令 功能说明&#xff1a;报告当前系统的进程状态。 (ps.ps命令 用于报告当前系统的进…
阅读更多...
Jupyter NoteBook未授权访问漏洞

Jupyter NoteBook未授权访问漏洞

任务一&#xff1a; 复现未授权访问的漏洞 任务二&#xff1a; 利用Jupter Notebook控制台执行系统命令&#xff0c;读取/etc/passwd内容 1.搭建环境 2.new下面直接进入终端&#xff0c;而且也不需要登录&#xff0c;我就直接进入了管理界面 3.直接把指令输入进入&#xf…
阅读更多...
【自动化测试教程】Java+Selenium自动化测试环境搭建

【自动化测试教程】Java+Selenium自动化测试环境搭建

本主要介绍以Java为基础&#xff0c;搭建Selenium自动化测试环境&#xff0c;并且实现代码编写的过程。 1.Selenium介绍 Selenium 1.0 包含 core、IDE、RC、grid 四部分&#xff0c;selenium 2.0 则是在两位大牛偶遇相互沟通决定把面向对象结构化&#xff08;OOPP&#xff09…
阅读更多...
TCP三次握手与四次挥手

TCP三次握手与四次挥手

TCP三次握手与四次挥手 TCP三次握手与四次挥手解析 客户端连接服务器&#xff08;三次握手&#xff09;客户端关闭与服务器连接&#xff08;四次挥手&#xff09; 总结 TCP三次握手与四次挥手、流量控制(滑动窗口)、拥塞控制、半连接状态、2MSL TCP三次握手与四次挥手 TCP标…
阅读更多...
LongAddr

LongAddr

目录 1. 引言 2. AtomicInteger的局限性 3. AtomicInteger与LongAdder 的性能差异 4.LongAdder 的结构 LongAddr架构 Striped64中重要的属性 Striped64中一些变量或者方法的定义 Cell类 5. 分散热点的原理 具体流程图 6. 在实际项目中的应用 7. 总结 1. 引言 在这一…
阅读更多...
抖音外卖商品模型

抖音外卖商品模型

目录 一、抖音外卖商品模型 二、商家运营流程 &#xff08;一&#xff09;商家入驻流程 &#xff08;二&#xff09;商品发布流程 三、推广带货流程 &#xff08;一&#xff09;短视频带货 &#xff08;二&#xff09;直播视频带货 【直播工具】 【直播流程】 直播前…
阅读更多...
Redis--13--缓存一致性问题

Redis--13--缓存一致性问题

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 缓存一致性问题1、先更新缓存&#xff0c;再更新DB方案二&#xff1a;先更新DB&#xff0c;再更新缓存方案三&#xff1a;先删缓存&#xff0c;再写数据库推荐1&…
阅读更多...
Ubuntu中安装IDEA，并配置桌面快捷方式

Ubuntu中安装IDEA，并配置桌面快捷方式

1、首先自己下载linux版本的idea 这一步省略不说了 2、在/usr/local/路径下新建安装目录IDEA&#xff1a; mkdir -p /usr/local/IDEA3、执行如下命令&#xff0c;解压下载的压缩包到指定目录&#xff1a; tar -zxvf ideaIU-2022.3.3.tar.gz -C /usr/local/IDEA 注意&#x…
阅读更多...
（四）基于高尔夫优化算法GOA求解无人机三维路径规划研究（MATLAB代码）

（四）基于高尔夫优化算法GOA求解无人机三维路径规划研究（MATLAB代码）

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…
阅读更多...
MediaPipe 3D姿态估计简明教程

MediaPipe 3D姿态估计简明教程

姿势检测是更多地了解视频和图像中人体的重要一步。 我们现有的模型支持 2D 姿态估计已经有一段时间了&#xff0c;你们中的许多人可能已经尝试过。 今天&#xff0c;我们在 TF.js 姿势检测 API 中推出第一个 3D 模型。 3D 姿态估计为健身、医疗、动作捕捉等应用开辟了新的设计…
阅读更多...
WordPress外贸站优化工具，WordPress外贸SEO优化方法

WordPress外贸站优化工具，WordPress外贸SEO优化方法

WordPress外贸站是跨国企业拓展市场、提升品牌知名度的理想选择。然而&#xff0c;如何通过SEO优化、原创文章生成以及留心站点优化的事项&#xff0c;成为众多站长关注的焦点。 SEO&#xff0c;即搜索引擎优化&#xff0c;是提高网站在搜索引擎结果中排名的关键。首先&#x…
阅读更多...
云计算：数字时代的引擎

云计算：数字时代的引擎

引言 云计算&#xff0c;作为现代信息技术领域的一项革命性创新&#xff0c;已经深刻改变了我们处理数据和应用的方式。它已经从仅仅是一个概念演变为一个全球范围内广泛应用的技术。云计算为个人、企业和政府机构提供了强大的计算能力、灵活性和可扩展性&#xff0c;同时降低…
阅读更多...
JavaScript递归

JavaScript递归

前端面试大全JavaScript递归 &#x1f31f;经典真题 &#x1f31f;递归 &#x1f31f;真题解答 &#x1f31f;总结 &#x1f31f;经典真题 使用递归完成 1 到 100 的累加 &#x1f31f;递归 A recursive method is a method that calls itself. 递归调用是一种特殊的调…
阅读更多...
使用pytorch从零开始实现迷你GPT

使用pytorch从零开始实现迷你GPT

生成式建模知识回顾: [1] 生成式建模概述 [2] Transformer I&#xff0c;Transformer II [3] 变分自编码器 [4] 生成对抗网络&#xff0c;高级生成对抗网络 I&#xff0c;高级生成对抗网络 II [5] 自回归模型 [6] 归一化流模型 [7] 基于能量的模型 [8] 扩散模型 I, 扩散模型 II…
阅读更多...
wordpress建站优化加速教程-Redis加速

wordpress建站优化加速教程-Redis加速

这篇文章适合宝塔面板&#xff0c;在宝塔面板安装 Redis 实现网站加速&#xff08; Redis是一个高性能的key-value数据库(PHP连接redis&#xff0c;需PHP设置中安装redis扩展) &#xff09;。对在word press网站有着明显的加速效果。关于Redis具体说明请自己百度&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023