当前位置: 首页 > news >正文

Wpf 使用 Prism 实战开发Day05

首页设计

1.效果图

一.代码现实

  • 根据页面布局,可以将页面设计成3行,每行中分多少列,看需求而定
  • 根据页面内容,设计Model 实体类,以及View Model

 1.Index.xaml 页面布局设计

  •  RowDefinition 分行(Row)属性,分几行就写几个
  • ColumnDefinition 分列(Column )属性,分几列就写几个
  •  Height 属性,Row (行)属性只有Height (高度),没有宽度。并且Height 设置成 auto 时,根据内容适应高度。
  • Width 属性,Column (列) 只有Width (宽度),没有Height (高度
  • Grid.Row 属性,将控件放置在第几行
  • Grid.Column 属性,将控件放置在第几列
  • FontWeight 属性,设置成 Bold (加粗)
  • Opacity 属性,透明度
  • ItemsSource 属性,数据源绑定
  • ClipToBounds 裁剪属性,在Canvas 控件中使用,ClipToBounds 设置成True后,超出的内容会被裁剪掉

  • 第一行设计,放置显示的文本控件 TextBlock。

FontSize 属性,控件显示的字体大小


  • 第二行设计,使用 ItemsControl 控件,并且固定4列。

  1. 在的Grid 控件中,每定义的每行(Row)中还可以划分成更细的行和列。根据需求自由灵活定义使用。
  2. ItemsControl 控件:它允许您将任何类型的数据绑定到其中,并为每个数据项显示一个模板

 ItemsControl 控件固定的写法。比如,要分4列

<ItemsControl><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel>
</ItemsControl>

ItemsControl  列固定完后,接着进行固定内容模板的设计。内容设计固定的写法

<!--模板内容设计-->
<ItemsControl.ItemTemplate><DataTemplate></DataTemplate>
</ItemsControl.ItemTemplate>
  1. 进行模板内容设计的时候,首先要清楚模板中都要有那些内容
  2. 例如,当前的模板:有图标,标题文本,内容,背景颜色,还有2个白色的图标


  1.  外层使用Border ,要设计圆角
  2. Border 里面放置Grid,方便设计。因为Grid 中可以放置多个控件
  3. 右边白色的圆图标,使用Canvas 控件
<ItemsControl Grid.Row="1"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--模板内容设计--><ItemsControl.ItemTemplate><DataTemplate><Border><Grid><StackPanel><!--图标--><materialDesign:PackIcon  Kind="Abacus" /><!--标题文本--><TextBlock Text="jj"/><!--内容--><TextBlock Text="888" FontWeight="Bold"/></StackPanel><!--白色背景底色控件--><Canvas><Border Canvas.Top="10" Canvas.Right="-50" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/><Border Canvas.Top="80" Canvas.Right="-30" Width="120" Height="120" Background="#ffffff" Opacity="0.1"/></Canvas></Grid></Border></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>
 1.1 模板设计完成后,进行数据内容动态渲染。
  • 创建首页内容数据集合实体类模型 TaskBar
/// <summary>
/// 首页任务栏
/// </summary>
public class TaskBar: BindableBase
{private string icon;/// <summary>/// 图标/// </summary>public string Icon{get { return icon; }set { icon = value; }}private string title;/// <summary>/// 标题/// </summary>public string Title{get { return title; }set { title = value; }}private string content;/// <summary>/// 内容/// </summary>public string Content{get { return content; }set { content = value; }}private string color;/// <summary>/// 背景颜色/// </summary>public string Color{get { return color; }set { color = value; }}private string target;/// <summary>/// 触发目标/// </summary>public string Target{get { return target; }set { target = value; }}}
  • 接着,在ViewModel 中,创建出TaskBar数据的动态集合,给页面展示数据
 public class IndexViewModel:BindableBase{public IndexViewModel(){TaskBars=new ObservableCollection<TaskBar>();CreateTaskBars();}private ObservableCollection<TaskBar> taskBars;public ObservableCollection<TaskBar> TaskBars{get { return taskBars; }set { taskBars = value; RaisePropertyChanged(); }}void CreateTaskBars(){TaskBars.Add(new TaskBar() { Icon="ClockFast",Title="汇总",Content="9",Color="#FF0CA0FF",Target=""});TaskBars.Add(new TaskBar() { Icon = "ClockCheckOutline", Title = "已完成", Content = "9", Color = "#FF1ECA3A", Target = "" });TaskBars.Add(new TaskBar() { Icon = "ChartLineVariant", Title = "完成比例", Content = "9%", Color = "#FF02C6DC", Target = "" });TaskBars.Add(new TaskBar() { Icon = "PlaylistStar", Title = "备忘录", Content = "18", Color = "#FFFFA000", Target = "" });}}
  •  最后,在ItemsControl 中,进行数据绑定
<ItemsControl Grid.Row="1" ItemsSource="{Binding TaskBars}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--模板内容设计--><ItemsControl.ItemTemplate><DataTemplate><Border Background="{Binding Color}" CornerRadius="5" Margin="10"><Grid><StackPanel Margin="20,10"><!--图标--><materialDesign:PackIcon Kind="{Binding Icon}" Width="30" Height="30" /><!--标题文本--><TextBlock Text="{Binding Title}" Margin="0,15" FontSize="15"/><!--内容--><TextBlock Text="{Binding Content}" FontWeight="Bold" FontSize="40"/></StackPanel><!--白色背景底色控件--><Canvas 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></Border></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>

  • 第三行设计,当前行,分两列放置内容

  1. LastChildFill 属性,设置成False,不填允最后一列
  2. Button 按钮,样式希望变成图角,可以使用组件带的默认样式来实现,如下
Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
<Grid Grid.Row="2" Margin="0,10"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><!--外边框--><Border Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><Border Grid.Column="1" Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><!--主体内容左--><DockPanel Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="待办事项" FontSize="20" FontWeight="Bold"/><Button Width="30" Height="30" VerticalAlignment="Top" DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" ><materialDesign:PackIcon Kind="Add" /></Button></DockPanel><!--数据列表区域--><ListBox /></DockPanel><!--主体内容右--><DockPanel  Grid.Column="1" Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="待办事项" FontSize="20" FontWeight="Bold"/><Button Width="30" Height="30" VerticalAlignment="Top" DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" ><materialDesign:PackIcon Kind="Add" /></Button></DockPanel><!--数据列表区域--><ListBox /></DockPanel>
</Grid>

 二.Index.xaml 完整源码

<UserControl x:Class="MyToDo.Views.IndexView"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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"d:DesignHeight="450" d:DesignWidth="800"><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><TextBlock Margin="15,10" FontSize="22" Text="你好,WPF! 今天是2023-11-12 星期天"/><ItemsControl Grid.Row="1" ItemsSource="{Binding TaskBars}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><!--模板内容设计--><ItemsControl.ItemTemplate><DataTemplate><Border Background="{Binding Color}" CornerRadius="5" Margin="10"><Grid><StackPanel Margin="20,10"><!--图标--><materialDesign:PackIcon Kind="{Binding Icon}" Width="30" Height="30" /><!--标题文本--><TextBlock Text="{Binding Title}" Margin="0,15" FontSize="15"/><!--内容--><TextBlock Text="{Binding Content}" FontWeight="Bold" FontSize="40"/></StackPanel><!--白色背景底色控件--><Canvas 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></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl><Grid Grid.Row="2" Margin="0,10"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><!--外边框--><Border Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><Border Grid.Column="1" Margin="10,0" Background="#BEBEBE" CornerRadius="5" Opacity="0.1"/><!--主体内容左--><DockPanel Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="待办事项" FontSize="20" FontWeight="Bold"/><Button Width="30" Height="30" VerticalAlignment="Top" DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" ><materialDesign:PackIcon Kind="Add" /></Button></DockPanel><!--数据列表区域--><ListBox /></DockPanel><!--主体内容右--><DockPanel  Grid.Column="1" Margin="10,0"><DockPanel Margin="10,5" LastChildFill="False" DockPanel.Dock="Top"><TextBlock Text="待办事项" FontSize="20" FontWeight="Bold"/><Button Width="30" Height="30" VerticalAlignment="Top" DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" ><materialDesign:PackIcon Kind="Add" /></Button></DockPanel><!--数据列表区域--><ListBox /></DockPanel></Grid></Grid>
</UserControl>

相关文章:

Wpf 使用 Prism 实战开发Day05

首页设计 1.效果图 一.代码现实 根据页面布局&#xff0c;可以将页面设计成3行&#xff0c;每行中分多少列&#xff0c;看需求而定根据页面内容&#xff0c;设计Model 实体类&#xff0c;以及View Model 1.Index.xaml 页面布局设计 RowDefinition 分行&#xff08;Row&#xf…...

性能压测工具:Locust详解

一、Locust介绍 开源性能测试工具https://www.locust.io/&#xff0c;基于Python的性能压测工具&#xff0c;使用Python代码来定义用户行为&#xff0c;模拟百万计的并发用户访问。每个测试用户的行为由您定义&#xff0c;并且通过Web UI实时监控聚集过程。 压力发生器作为性…...

vmware 修改主机名称 hadoop 服务器环境配置(一)

如何在虚拟机配置主机名称&#xff1a; 1. 如图所示在/etc 文件夹下有个hosts文件。追加映射关系&#xff1a; #关系 ip地址 名称 192.168.164.20 hadoop20 2. 保存后&#xff0c;重启reboot即可...

淘宝店铺订单插旗接口(taobao.trade.memo.update淘宝店铺订单交易备注修改接口)

淘宝店铺订单插旗接口是指可以在淘宝店铺的订单系统中进行订单备注的接口。通过该接口&#xff0c;您可以根据用户的身份&#xff08;买家或卖家&#xff09;&#xff0c;添加相应的交易备注&#xff0c;用于区分不同订单类型等。 具体使用方法可以参考淘宝开放平台的API接口文…...

py文件如何打包成exe?如何压缩文件大小?

打包 要将 Python 文件打包成可执行文件&#xff0c;您可以使用 PyInstaller 这个工具。以下是具体步骤&#xff1a; 首先&#xff0c;确保您已经安装了 PyInstaller。如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; pip install pyinstaller进入您的 Python 程序…...

SQL优化相关(持续更新)

常用sql修改 1、LIMIT 语句 在 SQL 查询中&#xff0c;LIMIT 10000, 10 的语句表示从第 10001 行开始&#xff0c;返回 10 行结果。要优化这个查询&#xff0c;可以考虑以下几点&#xff1a; 使用合适的索引&#xff1a;确保涉及到查询条件和排序的列上有适当的索引&#xf…...

Linux学习--limits文件配置详解

/etc/security/limits.conf 是一个配置文件&#xff0c;用于限制用户或进程在系统中可以使用的资源。 语法结构&#xff1a; &#xff1a;指定要应用限制的目标对象&#xff0c;可以是用户&#xff08;&#xff09;、用户组&#xff08;&#xff09;或进程&#xff08;、、<…...

Android Studio 代码上传gitLab

1、项目忽略文件 2选择要上传的项目 3、添加 首次提交需要输入url 最后在push...

【避雷选刊】Springer旗下2/3区,2个月录用!发文量激增,还能投吗?

计算机类 • 好刊解读 前段时间小编分析过目前科睿唯安数据库仍有8本期刊处于On Hold状态&#xff0c;其中包括4本SCIE、4本ESCI期刊&#xff08;&#x1f449;详情可见&#xff1a;避雷&#xff01;又有2本期刊被标记“On Hold”&#xff01;含中科院2区&#xff08;TOP&…...

Linux常用的压缩命令

笑小枫的专属目录 少整花活&#xff0c;直接干货Linux gzip命令语法功能参数 Linux zip命令语法参数 少整花活&#xff0c;直接干货 本文的来源就是因为上篇文章Linux常用的解压命令&#xff0c;解压整了&#xff0c;顺手整理了一波压缩命令。 Linux gzip命令 减少文件大小有…...

如何为VM虚拟机添加D盘

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 前言 在虚拟机上安装Windows10 系统后&…...

C# 16进制颜色转为RGB颜色

#region [颜色&#xff1a;16进制转成RGB] /// <summary> /// [颜色&#xff1a;16进制转成RGB] /// </summary> /// <param name"strColor">设置16进制颜色 [返回RGB]</param> /// <returns></returns> public static System.D…...

【工具】Java计算图片相似度

【工具】Java图片相似度匹配工具 方案一 通过像素点去匹配 /*** * param file1Url 图片url* param file2Url 图片url* return*/public static double img相似度Url(String file1Url, String file2Url){InputStream inputStream1 HttpUtil.createGet(file1Url).execute().…...

GDB调试

GDB调试程序之运行参数输入 以bash运行如下程序命令为例子: $ ./adapter -c FOTON_ECAN.dbc foton_bcan.dbc 方法1:进入gdb,加载程序,执行run命令的时候,后面加上参数 $ gdb (gdb) file adapter Reading symbols from adapter... (gdb) run -c FOTON_ECAN.dbc foton_b…...

swift和OC混编报错问题

1.‘objc’ instance method in extension of subclass of ‘xxx’ requires iOS 13.0.0 需要把实现从扩展移到主类实现。iOS13一下扩展不支持objc 2.using bridging headers with framework targets is unsupported 报错 这个错误通常指的是在一个框架目标中使用桥接头是不…...

第七章 块为结构建模 P5|系统建模语言SysML实用指南学习

仅供个人学习记录 应用泛化对分类层级建模 继承inherit更通用分类器的公共特性&#xff0c;并包含其他特有的附加特性。通用分类器与特殊分类器之间的关系称为泛化generalization 泛化由两个分类器之间的线条表示&#xff0c;父类端带有空心三角形箭头 块的分类与结构化特性…...

java算法学习索引之动态规划

一 斐波那契数列问题的递归和动态规划 【题目】给定整数N&#xff0c;返回斐波那契数列的第N项。 补充问题 1&#xff1a;给定整数 N&#xff0c;代表台阶数&#xff0c;一次可以跨 2个或者 1个台阶&#xff0c;返回有多少种走法。 【举例】N3&#xff0c;可以三次都跨1个台…...

ChatGPT重磅升级 奢侈品VERTU推出双模型AI手机

2023年11月7日,OpenAI举办了首届开发者大会,CEO Sam Altman(山姆奥尔特曼)展示了号称“史上最强”AI的GPT-4 Turbo。它支持长达约10万汉字的输入,具备前所未有的长文本处理能力,使更复杂的互动成为可能。此外,GPT-4 Turbo还引入了跨模态API支持,可以同时处理图片、视频和声音,从…...

mac配置双网卡 mac同时使用内网和外网

在公司办公通常都会连内网&#xff0c;而连内网最大的限制就是不可以使用外网&#xff0c;那遇到问题也就不能google&#xff0c;而当连接无线的时候&#xff0c;内网的东西就不可以访问&#xff0c;也就不能正常办公&#xff0c;对于我这种小白来说&#xff0c;工作中遇到的问…...

深度探究深度学习常见数据类型INT8 FP32 FP16的区别即优缺点

定点和浮点都是数值的表示&#xff08;representation&#xff09;&#xff0c;它们区别在于&#xff0c;将整数&#xff08;integer&#xff09;部分和小数&#xff08;fractional&#xff09;部分分开的点&#xff0c;点在哪里。定点保留特定位数整数和小数&#xff0c;而浮点…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...