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.hqwc.cn/news/319894.html

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

相关文章

MQTT基础下载使用

MQTT基础下载使用

1.下载MQTT(MQTT官网) 下载完后在bin目录下启动cmd 控制台输入emqx start&#xff0c;注意&#xff0c;此时控制台是没有反应的&#xff0c;就回你个D&#xff1a;\EMQX。其实已经打开了。 打开桌面上的MQTTX 并新建连接 这是测试的数据 我订阅了一个test1的订阅 并且我发布…
阅读更多...
百度自由DIY小程序源码：PHP+MySQL组合开发 带完整的搭建教程

百度自由DIY小程序源码：PHP+MySQL组合开发 带完整的搭建教程

随着移动互联网的快速发展&#xff0c;小程序已成为企业与用户互动的重要平台。然而&#xff0c;对于许多中小企业和开发者来说&#xff0c;从零开始开发一款小程序需要投入大量的时间和资源。 以下是部分代码示例&#xff1a; 系统特色功能一览&#xff1a; 1.高度自定义&…
阅读更多...
js Array

js Array

var cars ["Saab", "Volvo", "BMW"]; 属性length - length获取到的是数组的最大索引1 向数组的最后一个位置添加元素 //语法&#xff1a;数组[数组.length] 值; arr[arr.length] 70; cars.length //3 - 数组的方…
阅读更多...
12V直流电机驱动芯片GC9110T 为什么可以可替代LG9110S应用于摄像机等产品上呢

12V直流电机驱动芯片GC9110T 为什么可以可替代LG9110S应用于摄像机等产品上呢

GC9110T是一款12V直流电机驱动芯片&#xff0c;为摄像机、消费类产品、玩具和其他低压或者电池供电的运动控制类应用提供了集成的电机驱动解决方案。芯片一般用了驱动一个直流电机或者使用两颗来驱动一个步进电机。GC9110T是GC9110&#xff08;低压6V驱动&#xff09;的12V升级…
阅读更多...
力扣hot100 二叉树展开为链表 递归 特殊遍历

力扣hot100 二叉树展开为链表 递归 特殊遍历

&#x1f468;‍&#x1f3eb; 题目地址 &#x1f469;‍&#x1f3eb; 参考题解 &#x1f60b; 将左子树插入到右子树上 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* …
阅读更多...
邮件群发怎么做才有效果？如何做邮件群发？

邮件群发怎么做才有效果？如何做邮件群发？

邮件群发的注意事项有哪些&#xff1f;QQ邮箱群发邮件的方法&#xff1f; 在当今的数字营销时代&#xff0c;邮件群发已成为企业与客户保持联系的重要手段。但如何确保邮件群发的效果最大化呢&#xff1f;下面&#xff0c;蜂邮EDM将探讨几个关键要素&#xff0c;帮助您更有效地…
阅读更多...
PyTorch常用工具（1）数据处理

PyTorch常用工具（1）数据处理

文章目录 前言1 数据处理1.1 Dataset1.2 DataLoader 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&am…
阅读更多...
低代码平台开发 - 编辑器拓展

低代码平台开发 - 编辑器拓展

设计器&#xff08;编辑器&#xff09;这边内容比较杂&#xff0c;我们这次挑两个讲&#xff0c;一个是自定义出码&#xff0c;一个是新版本引擎中 array-setter 存在的问题这期和之前的文章关联性不大&#xff0c;可以直接在阿里的低代码引擎初始化的目录下进行&#xff0c;如…
阅读更多...
当AI遇见大脑：电脑与人脑协同“进化”

当AI遇见大脑：电脑与人脑协同“进化”

编者按&#xff1a;2023年是微软亚洲研究院建院25周年。借此机会&#xff0c;我们特别策划了“智启未来”系列文章&#xff0c;邀请到微软亚洲研究院不同研究领域的领军人物&#xff0c;以署名文章的形式分享他们对人工智能、计算机及其交叉学科领域的观点洞察及前沿展望。希望…
阅读更多...
Spring常用注解及模拟用户登录流程示例

Spring常用注解及模拟用户登录流程示例

注解 Resource注解实现自动注入 (反射)代码块xml配置文件 Autowired注解实现自动化注入代码块xml配置文件 扫描器-四个注解Dao层-RepositoryService层-ServiceController层-Controller测试任意类-Component 常用注解示例-模拟用户登录配置自动扫描的xml文件实体类Userdao层消息…
阅读更多...
椭球面系列---大地坐标和笛卡尔坐标的相互转换

椭球面系列---大地坐标和笛卡尔坐标的相互转换

目录 大地坐标笛卡尔坐标大地坐标 ( λ , φ , h ) (\lambda,\varphi,h) (λ,φ,h)转换为笛卡尔坐标 ( x , y , z ) (x,y,z) (x,y,z)笛卡尔坐标 ( x , y , z ) (x,y,z) (x,y,z)转换为大地坐标 ( λ , φ , h ) (\lambda,\varphi,h) (λ,φ,h) 椭球体下&#xff0c;尤其是地球的…
阅读更多...
高端大气的在线文档

高端大气的在线文档

背景 产品介绍&#xff0c;帮助手册&#xff0c;操作手册&#xff0c;开发说明&#xff0c;个人的简单网站等等&#xff0c;都需要一个在线的文档&#xff0c;特别是开源社区的在线文档也非常需要&#xff0c;开源社区也为此提供了大量的工具。如何找到一款高端大气的&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023