Wpf 使用 Prism 实战开发Day08

备忘录页面设计

1.效果图

一.布局设计跟第7章节一样，只是内容方面发生变化，其他样式都一样。直接把代码粘出来了

MemoView.xaml 页面代码

<UserControl x:Class="MyToDo.Views.MemoView"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"><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"/></StackPanel><Button HorizontalAlignment="Right" Content="+ 添加备记录" Margin="10,5" Command="{Binding AddCommand}" /><ItemsControl Grid.Row="1" HorizontalAlignment="Center" ItemsSource="{Binding MemoDtos}"><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>

二.后端测试数据生成，基本也跟第7章节一样，只是对应的实体类名称不一样。当前 MemoViewModel.cs 类源码如下：

  public class MemoViewModel : BindableBase{public MemoViewModel(){MemoDtos = new ObservableCollection<MemoDto>();CreateMemoList();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<MemoDto> memoDtos;/// <summary>/// 创建数据的动态集合/// </summary>public ObservableCollection<MemoDto> MemoDtos{get { return memoDtos; }set { memoDtos = value; RaisePropertyChanged(); }}void CreateMemoList(){for (int i = 0; i < 20; i++){memoDtos.Add(new MemoDto(){Title = "标题" + i,Content = "测试数据..."});}}/// <summary>/// 添加备忘录/// </summary>/// <exception cref="NotImplementedException"></exception>private void Add(){IsRightDrawerOpen = true;}}

三.添加页面滚动条，目前整个页面，如果内容超出页面范围，是不能进行滚动的。

     1. 在 ItemsControl 中，添加滚动条 ScrollViewer

 这样使用ScrollViewer 把内容区域包裹起来，就能让内容区域支持滚动了

      2. 添加滚动条后的效果图如下： 

四.添加动画，打开设备录或待办事项页面时，显示一个动画效果。

使用md 中的一个自带动画 md:TransitioningContent 来实现该功能 

  • 需要设置一个属性，OpeningEffect：打开的效果。并且该属性的值有很多种动画类型。例如，当前设置动画效果，Kind=ExpandIn

     1.在 DataTemplate 数据模板中，添加 md:TransitioningContent，表示在展示数据的时候添加一个动画效果。最后效果如下：

五.MemoView.xaml 完整源码

<UserControl x:Class="MyToDo.Views.MemoView"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"><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"/></StackPanel><Button HorizontalAlignment="Right" Content="+ 添加备记录" Margin="10,5" Command="{Binding AddCommand}" /><ScrollViewer Grid.Row="1" ><ItemsControl HorizontalAlignment="Center" ItemsSource="{Binding MemoDtos}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--自定义内容模板--><ItemsControl.ItemTemplate><DataTemplate><md:TransitioningContent OpeningEffect="{md:TransitionEffect Kind=ExpandIn}"><!--自定义内容区域--><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></md:TransitioningContent></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></ScrollViewer></Grid></md:DrawerHost></md:DialogHost>
</UserControl>

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

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

相关文章

各位大佬看看这是不是macos的一个bug啊

各位大佬看看这是不是macos的一个bug啊

请各位大佬看看是不是一个bug啊&#xff0c; 打开mac自带的命令行&#xff0c;先输入man less&#xff0c;显示没问题&#xff0c;再输入man more&#xff0c;发现出现的是less的说明&#xff0c;这里出了问题。 第一张图是man less&#xff0c;第二张图是man more。 我的系统…
阅读更多...
JSON网络令牌JWT

JSON网络令牌JWT

1.什么是身份验证 日常生活中的身份验证的场景: 比如进入公司的大楼时&#xff0c;需要携带工牌&#xff1b;打卡上班时&#xff0c;需要指纹识别&#xff1b;打开工作电脑时&#xff0c;需要输入密码。 2. 什么是 JSON 网络令牌&#xff1f; JSON Web Token (JWT) 是一个开…
阅读更多...
大数据 - Doris系列《一》- Doris简介

大数据 - Doris系列《一》- Doris简介

目录 &#x1f436;1.1 Doris 概述 &#x1f436;1.2 OLAP和OLTP&#xff08;面试&#xff09; 1. 应用场景 &#x1f959;联机事务处理OLTP(On-Line Transaction Processing) &#x1f959;联机分析处理OLAP(On-Line Analytical Processing) 2. OLAP和OLTP比较--“用户行…
阅读更多...
Unity SRP 管线【第五讲：自定义烘培光照】

Unity SRP 管线【第五讲：自定义烘培光照】

文章目录 一、自定义烘培光照1. 烘培光照贴图2. 获取光照贴图3. 获取物体在光照贴图上的UV坐标4. 采样光照贴图 二、自定义光照探针三、 Light Probe Proxy Volumes&#xff08;LPPV&#xff09;四、Meta Pass五、 自发光烘培 一、自定义烘培光照 细节内容详见catlikecoding.c…
阅读更多...
2024年防止内卷和被潜规则，RocketMQ消息中间件实战派上下册上线啦｜架构随笔录

2024年防止内卷和被潜规则，RocketMQ消息中间件实战派上下册上线啦｜架构随笔录

2023已经过去啦&#xff0c;作为技术小伙伴一定要做好2024年的规划&#xff0c;只有这样才能够避免内卷和潜规则。 2024年即将是一个重新开始的一年&#xff0c;但是你要说互联网不倦&#xff0c;那是不可能的&#xff0c;就连某大厂都开始走下坡路啦&#xff0c;里面卷的是不…
阅读更多...
很实用的ChatGPT网站—在线编程模块增补篇

很实用的ChatGPT网站—在线编程模块增补篇

很实用的ChatGPT网站&#xff08;http://chat-zh.com/&#xff09;——增补篇 今天介绍一个好兄弟开发的ChatGPT网站&#xff0c;网址[http://chat-zh.com/]。这个网站功能模块很多&#xff0c;包含生活、学习、医疗、法律、经济等很多方面。今天跟大家分享一下&#xff0c;新…
阅读更多...
Cesium自定义电子围栏特效材质

Cesium自定义电子围栏特效材质

1.new Cesium.Viewer中添加 requestWebgl1: true, 2. 编写材质&#xff0c;主要分三步 &#xff08;1&#xff09;定义MaterialProperty &#xff08;2&#xff09;设置材质 &#xff08;3&#xff09;添加材质 //定义材质对象及变量 function DynamicWallMaterialPropert…
阅读更多...
linux centos 添加临时ip

linux centos 添加临时ip

### 1.添加ip ip addr add IP/mask dev 网络设备 例&#xff1a;ip addr add 172.104.210.247/24 dev ens5f1 ### 2.启动网卡 ip link set up 网络设备 例&#xff1a;ip link set up ens3f0 ### 3.设置默认路由 ip route add default via GATEWAY 例&#xff1a;ip route add …
阅读更多...
C# 反射 入门到详解

C# 反射 入门到详解

1.什么是反射 首先看一张流程图 反射最最要的关注的地方 就在metadata 元数据 元数据&#xff1a;描述DLL/EXE文件中有什么内容 点击生成之后&#xff0c;就会在文件中生成DLL/EXE文件 点击打开文件夹 在bin/Debug 文件下就会生成该文件 exe/dll文件的区别&#xff1a;…
阅读更多...
NSSCTF websign

NSSCTF websign

开启环境&#xff1a; 提示我们看源码&#xff0c;那就看。 但是我们发现右键被禁用了&#xff0c; ctrlU也被禁用了。 直接在url前加view-source:得到页面源码取出flag
阅读更多...
银河麒麟V10sp3操作系统设备初始化（设置主机名、挂载数据盘、设置网卡bond模式）

银河麒麟V10sp3操作系统设备初始化（设置主机名、挂载数据盘、设置网卡bond模式）

本篇记录安装好银河麒麟V10sp3操作系统后对服务器做一些初始化配置 1、设置主机名 2、挂载数据盘 3、设置网卡bond模式 登录 打开终端 开始配置 1、设置主机名 hostnamectl set-hostname Kylin # Kylin为主机名2、挂载数据盘 先用fdisk命令查看磁盘信息 fdisk -l格式化数…
阅读更多...
【MySQL·8.0·源码】MySQL 的查询处理

【MySQL·8.0·源码】MySQL 的查询处理

Query processing MySQL 的 Query 处理可以分为 Parse、Prepare(Resolve/Transform)、Optimize 和 Execute 几个阶段 Parse 词法扫描器将 SQL 语句字符串分解为 tokens&#xff0c;语法分析器将 tokens 组装成语法树的子树结构&#xff0c;并 Reduce 为基本查询结构&#xff0…
阅读更多...
【SpringBoot】Java MVC 集成 Swagger 生成 API 文档

【SpringBoot】Java MVC 集成 Swagger 生成 API 文档

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,就可以做到生成接口文档,以及在线接口调试页面。官网: https://swagger.io/ Knife4j 是为Java MVC框架集成Swagger生成Api文档的增强解决方案。 <dependency><groupId>com.github.xiaoymin</groupI…
阅读更多...
ImportError: DLL load failed while importing imaging: 找不到指定的模块

ImportError: DLL load failed while importing imaging: 找不到指定的模块

24.1 ImportError: DLL load failed while importing imaging: 找不到指定的模块 参考&#xff1a;https://zhuanlan.zhihu.com/p/662305030?utm_id0 说明&#xff1a;Pillow 与pillow都可以&#xff0c;不区分首字母大小写 第一步&#xff1a;查看是否有pillow 1&#xff09;…
阅读更多...
Java实现阿里云OSS文件上传

Java实现阿里云OSS文件上传

1、OSS介绍 阿里云对象存储OSS&#xff08;Object Storage Service&#xff09;是一款云存储服务&#xff0c;通常用于图片、音视频、日志等海量文件的存储&#xff0c;并且数据以对象&#xff08;Object&#xff09;的形式存储在OSS的存储空间&#xff08;Bucket &#xff09…
阅读更多...
攀登者1 - 华为OD统一考试

攀登者1 - 华为OD统一考试

OD统一考试 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 攀登者喜欢寻找各种地图&#xff0c;并且尝试攀登到最高的山峰。 地图表示为一维数组&#xff0c;数组的索引代表水平位置&#xff0c;数组的元素代表相对海拔高度。其中数组元素0代表地面。…
阅读更多...
计算机网络期末知识点总结

计算机网络期末知识点总结

计算机网络概述考点 计算机网络的组成 从组成部分看&#xff1a;一个完整的计算机网络主要由硬件、软件、协议三大部分组成&#xff0c;缺一不可。硬件主要指&#xff1a;主机、通信链路、交换设备和通信设备等&#xff1b;软件主要指&#xff1a;用户使用的各种软件&#xf…
阅读更多...
虹科方案|从困境到突破：TigoLeap方案引领数据采集与优化

虹科方案|从困境到突破：TigoLeap方案引领数据采集与优化

导读&#xff1a;在数字化工厂和智能制造的时代&#xff0c;数据已经成为优化机器和流程的关键。然而&#xff0c;如何高效地收集和处理这些数据&#xff0c;特别是在开发、部署和生产阶段&#xff0c;仍是企业面临的一大挑战。虹科TigoLeap平台&#xff0c;作为一款引领行业变…
阅读更多...
设计模式之原型模式【创造者模式】

设计模式之原型模式【创造者模式】

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
使用 SpringSecurity 发送POST请求出现 403

使用 SpringSecurity 发送POST请求出现 403

问题场景 在使用 SpringSecurity 时对一些访问权限进行了设置, 在用户请求资源时出现了403错误 , 通过检查代码发现请求权限是开放的, 并且切换成 GET 请求也是可以通过, 换成POST 请求就无法通过。 解决方法 在 SpringSecurity 中关闭 CSRF 因为 前端向后台发送 post 请求…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023