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，一经查实，立即删除！

相关文章

React基本知识点整理

React基本知识点整理

React中引入样式的2种方式 1,内联样式 import React, { Component } from react export default class index extends Component {render() {return (<div><div style{{color:"red",fontSize:"18px"}}>内联样式</div></div>)} }…
阅读更多...
Promise自定义封装

Promise自定义封装

目录 Promise构造函数 then方法封装 catch方法封装 resolve方法封装 reject方法封装 all方法封装 race方法封装 这篇文章主要是介绍如何自己封装Promise构造函数以及其相应的方法。Promise是JS中的重点&#xff0c;很多的面试都会问到。因此需要对其有比较深入地认识。看…
阅读更多...
创意项目开源，文生图、排序/优选等...，持续开源更新！！

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

热烈欢迎大家在git上star&#xff01;&#xff01;&#xff01;冲鸭&#xff01;&#xff01;&#xff01; 1.dalle1在厨房家具中文场景上训练。 GitHub - leeguandong/DALLE1: dalle1在中文家具场景的微调&#xff0c;效果并不好dalle1在中文家具场景的微调&#xff0c;效果…
阅读更多...
【JavaSE】异常（学习笔记）

【JavaSE】异常（学习笔记）

一、异常概述 异常&#xff1a;程序出错了 1、异常的分类 编译时异常&#xff1a;受检异常运行时异常&#xff1a;非受检异常 2、异常体系&#xff1a;Throwable Error&#xff1a;严重问题&#xff0c;不需要处理Exception&#xff1a;异常类&#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…
阅读更多...
Google Guava 事件总线工具使用详解

Google Guava 事件总线工具使用详解

文章目录 事件总线特点使用 事件总线 Guava 事件总线&#xff08;EventBus&#xff09;是 Google Guava 库中的一个组件&#xff0c;用于实现发布-订阅模式的事件通信。它提供了一种简单而强大的方式&#xff0c;让不同的组件之间能够解耦、相互通信、完成事件处理。 特点 注…
阅读更多...
C语言--每日选择题--Day33

C语言--每日选择题--Day33

第一题 1. 在以下给出的表达式中&#xff0c;与do-while(E)语句中的(E)不等价的表达式是&#xff08; &#xff09; A&#xff1a;(!E 0) B&#xff1a;(E > 0 || E < 0) C&#xff1a;(E 0) D&#xff1a;(E ! 0) 答案及解析 C 首先要知道(E)这个条件成立无非两种&…
阅读更多...
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;所以在使用一个…
阅读更多...
小杨X型矩阵

小杨X型矩阵

对于这道题&#xff0c;我们首先需要了解它的思路 他一共要考虑两条线 左斜线和右斜线 --- --- ---- --- --- 像上面这样&#xff1b; 两条线的判断条件分别为 ij 及 ijn1 代码如下&#xff1a; #include<iostream> using namespace std; int main() {int n;cin&g…
阅读更多...
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…
阅读更多...
linux 下ttyAMA0,ttyS0,ttyUSB0啥区别

linux 下ttyAMA0,ttyS0,ttyUSB0啥区别

技术上讲&#xff0c;ttyS0 的原始含义似乎是“第一个串行端口*使用与原始 IBM PC UART、8250 芯片兼容的 UART 实现。ARM 上的 ttyAMA0 和例如 ttySAC0 将意味着“使用另一个特定硬件实现实现的第一个串行端口”。ttyUSB0 指的是第一个 USB 到串行转换器。ttyACM0 指的是使用 …
阅读更多...
【自动化测试教程】Java+Selenium自动化测试环境搭建

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

本主要介绍以Java为基础&#xff0c;搭建Selenium自动化测试环境&#xff0c;并且实现代码编写的过程。 1.Selenium介绍 Selenium 1.0 包含 core、IDE、RC、grid 四部分&#xff0c;selenium 2.0 则是在两位大牛偶遇相互沟通决定把面向对象结构化&#xff08;OOPP&#xff09…
阅读更多...
【NGINX--11】利用访问日志、错误日志和 请求跟踪进行调试和故障排除

【NGINX--11】利用访问日志、错误日志和 请求跟踪进行调试和故障排除

1、配置访问日志 需要配置访问日志格式&#xff0c;以将内置变量添加到请求日志中。 配置访问日志格式&#xff1a; http {log_format geoproxy[$time_local] $remote_addr $realip_remote_addr $remote_user $proxy_protocol_server_addr $proxy_protocol_server_port $r…
阅读更多...
TCP三次握手与四次挥手

TCP三次握手与四次挥手

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

fasterxml 注解组装实体

使用 FasterXML Jackson 的注解 JsonTypeInfo 和 JsonSubTypes 可以实现多态类型的处理。在你的 User 类上&#xff0c;你可以添加这些注解来指示 Jackson 如何处理多态类型。 以下是使用 JsonTypeInfo 和 JsonSubTypes 注解的 User 类的修改&#xff1a; import com.fasterx…
阅读更多...
【C语言】【数据结构】【手搓二叉树】用数组实现一个二叉树

【C语言】【数据结构】【手搓二叉树】用数组实现一个二叉树

这里用数组&#xff08;顺序表&#xff09;实现一个二叉树 Heap.h #include<stdio.h> #include<stdlib.h> #include<assert.h> #include<stdbool.h> typedef int HPDataType; typedef struct Heap {HPDataType* a;int size;int capacity; }HP; void …
阅读更多...
LongAddr

LongAddr

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

Copyright @ 2022~2023