Wpf 使用 Prism 实战开发Day05

news2024/10/6 5:54:55

首页设计

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>

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

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

相关文章

【LeetCode】每日一题 2023_11_12 每日一题 Range 模块（线段树）

【LeetCode】每日一题 2023_11_12 每日一题 Range 模块（线段树）

文章目录 刷题前唠嗑题目&#xff1a;Range 模块题目描述代码与解题思路 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 嗯&#xff1f;怎么是 hard&#xff0c;好长&#xff0c;可恶&#xff0c;看不懂&#xff0c;怎么办 题目&#xff1a;Range 模块 题…
阅读更多...
mindspore mindyolo目标检测华为昇腾上推理使用

mindspore mindyolo目标检测华为昇腾上推理使用

参考&#xff1a; https://github.com/mindspore-lab/mindyolo 使用案例&#xff1a; https://github.com/mindspore-lab/mindyolo/blob/master/GETTING_STARTED.md 安装&#xff1a; pip install mindyolo特别注意opencv-python、opencv-python-headless版本问题&#xff0…
阅读更多...
深入理解C++关联式容器：set、multiset、map和multimap详解

深入理解C++关联式容器：set、multiset、map和multimap详解

序列式容器 与 关联式容器 我们知道&#xff1a; C 中&#xff0c;我们将 vector、list、queue 这种底层为线性序列的数据结构叫做 序列式容器&#xff0c;其存储的就是元素本身。而 关联式容器 以键-值对的形式存储数据。每个键在容器中必须是唯一的&#xff0c;而值则与相应…
阅读更多...
基于连续Hopfield神经网络优化——旅行商问题优化计算

基于连续Hopfield神经网络优化——旅行商问题优化计算

大家好&#xff0c;我是带我去滑雪&#xff01; 利用神经网络解决组合优化问题是神经网络应用的一个重要方面。所谓组合优化问题&#xff0c;就是在给定约束条件下&#xff0c;使目标函数极小&#xff08;或极大&#xff09;的变量组合问题。将Hopfield网络应用于求解组合优化问…
阅读更多...
Centos7 升级到 Centos8 教程以及关于dnf包管理工具的若干问题解决方案

Centos7 升级到 Centos8 教程以及关于dnf包管理工具的若干问题解决方案

目录 为什么升级一、参考文档二、升级步骤三、安装git编码错误缓存问题安装git依赖冲突问题解决办法 为什么升级 jenkins 2.4版本需要CentOS8 一、参考文档 点我 二、升级步骤 1.安装epel源 yum -y install epel-release2.安装rpmconf和yum-utils yum -y install rpmco…
阅读更多...
死锁（JAVA）

死锁（JAVA）

死锁在多线程代码中是非常严重的BUG&#xff0c;一旦代码中出现死锁就会导致线程卡死。 当单个线程连续两次对同一个对象进行加锁操作时&#xff0c;如果该锁是不可重入锁就会发生死锁&#xff08;线程卡死&#xff09; 两个线程两把锁&#xff0c;如果出现这种情况也是会发生…
阅读更多...
瑞吉外卖Day02

瑞吉外卖Day02

小张推荐:瑞吉外卖Day01&#xff0c;瑞吉外卖Day03 1.登陆功能 1.1结果封装类 导入返回结果类R此类是一个通用结果类。服务端响应的所有结果最终都会包装成此种类型返回给前端页面 注意属性名&#xff0c;莫要写错&#xff0c;不然与前端很难对接&#xff01;&#xff01;&…
阅读更多...
Docker 中的端口

Docker 中的端口

Docker 中的端口 0.0.0.0:8080->80/tcp &#xff0c;主机&#xff08;即运行 Docker 的机器&#xff09;监听8080端口&#xff0c;如果有请求转发到容器的 80 端口上去。 详细解释一下&#xff1a; 0.0.0.0:8080->80/tcp &#xff1a;这是一个端口映射规则。 0.0.0.0:80…
阅读更多...
Leetcode—202.快乐数【简单】

Leetcode—202.快乐数【简单】

2023每日刷题&#xff08;二十八&#xff09; Leetcode—202.快乐数 快慢指针思想 通过手玩2&#xff0c;可以发现 会走入一个循环&#xff0c;并且fast和slow会在一个数字相遇&#xff0c;以下也大概花了一下推倒出来了。如果slow不是因为1和fast相等的&#xff0c;就说明它…
阅读更多...
消息队列中的事务是什么呢？

消息队列中的事务是什么呢？

消息队列中的事务是什么呢&#xff1f; 说到事务&#xff0c;肯定会优先想到数据库中的事务。在数据库中需要事务&#xff0c;是为了保证数据的一致性、完整性、持久性和隔离性。它可以将数据库中的一组操作合并为一个不可分割的工作单元&#xff0c;要么全部执行成功&#xf…
阅读更多...
​软考-高级-系统架构设计师教程（清华第2版）【第4章 信息安全技术基础知识（P160~189）-思维导图】​

​软考-高级-系统架构设计师教程（清华第2版）【第4章 信息安全技术基础知识（P160~189）-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第4章 信息安全技术基础知识&#xff08;P160~189&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图
阅读更多...
【沐风老师】3dMax使用克隆修改器插件创建旋转楼梯教程

【沐风老师】3dMax使用克隆修改器插件创建旋转楼梯教程

3DMAX克隆修改器插件&#xff0c;它通过增量平移、旋转和缩放输入几何体来创建对象的副本。在某些方面&#xff0c;它类似于 3dMax 的内置“阵列”工具&#xff0c;但有一个主要优点 -克隆修改器是完全参数化的&#xff0c;因此您可以随时更改重复项的数量及其分布。其他功能包…
阅读更多...
mapboxGL中的底图切换

mapboxGL中的底图切换

概述 底图切换&#xff0c;这么简单的功能还要写一篇文章&#xff1f;值得的&#xff0c;为什么这么说呢&#xff1f;因为mapboxGL的矢量底图有上百个&#xff0c;不同的底图用的样式、图层的名称、图层的内容、字体库、图标库都不一样&#xff0c;尤其是当地图上已经叠加了很…
阅读更多...
展会预告 | 图扑邀您相约高交会-全球清洁能源创新博览会

展会预告 | 图扑邀您相约高交会-全球清洁能源创新博览会

第二十五届中国国际高新技术成果交易会(简称“高交会”)将在深圳盛大开幕。高交会由商务部、科学技术部、工业和信息化部、国家发展改革委、农业农村部、国家知识产权局、中国科学院、中国工程院和深圳市人民政府共同举办。是目前中国规模最大、最具影响力的科技类展会。 图扑软…
阅读更多...
【LittleXi】C程序预处理、编译、汇编、链接步骤

【LittleXi】C程序预处理、编译、汇编、链接步骤

【LittleXi】C程序预处理、编译、汇编、链接步骤 C程序 #include<stdio.h> int main(){int x1,y1;printf("xy%d",xy); }1、预处理 将头文件引入进来、除去注释、宏定义下放 执行指令 g -E esc.c -o esc.i 2、编译 将处理好的代码编译为汇编代码.s 执行…
阅读更多...
AI优秀企业案例——机器人流程自动化：达观数据RPA

AI优秀企业案例——机器人流程自动化：达观数据RPA

通过学习业内领先公司的最佳实践&#xff0c;我们可以更好地将它们应用到我们自己的公司和业务中。特别是第三部分&#xff0c;提供了大量应用案例&#xff0c;让我们一起期待看到这些案例的结尾。 1.简介 达观数据是一家专注于智能文本机器人的国家高新技术企业&#xff0c;…
阅读更多...
Flink SQL -- 反压

Flink SQL -- 反压

1、测试反压&#xff1a; 1、反压&#xff1a; 指的是下游消费数据的速度比上游产生数据的速度要小时会出现反压&#xff0c;下游导致上游的Task反压。 2、测试反压&#xff1a;使用的是DataGen CREATE TABLE words (word STRING ) WITH (connector datagen,rows-per-second…
阅读更多...
C# 使用AForge调用摄像头

C# 使用AForge调用摄像头

C# 使用AForge调用摄像头 安装AForge使用AForge控件示例代码 AForge官网 安装AForge Visual Studio 2022>项目>管理NuGet程序包&#xff0c;搜索AForge并依次安装作者为AForge.NET的多个关联组件。 使用AForge控件 安装AForge组件完成后&#xff0c;工具箱会新增AF…
阅读更多...
【反编译系列】一、反编译 .so 文件（IDA Pro）

【反编译系列】一、反编译 .so 文件（IDA Pro）

文章目录 【反编译系列】一、反编译 .so 文件&#xff08;IDA Pro&#xff09;1. 介绍2. 反编译Reference 【反编译系列】一、反编译 .so 文件&#xff08;IDA Pro&#xff09; 1. 介绍 .so 文件是共享对象文件&#xff08;Shared Object file&#xff09;的一种形式&#xf…
阅读更多...
【Cookie 和 session 的区别】

【Cookie 和 session 的区别】

会话&#xff08;Session&#xff09; 跟踪是Web程序中常用的技术&#xff0c;用来跟踪用户的整个会话。cookie和session都是用来跟踪浏览器用户身份的会话方式。Cookie通过在客户端记录信息确定用户身份&#xff0c;Session通过在服务器端记录信息确定用户身份。 我们目前使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023