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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

11月13日星期一今日早报简报微语报早读

11月13日星期一今日早报简报微语报早读

11月13日星期一&#xff0c;农历十月初一&#xff0c;早报微语早读。 1、国家邮政局&#xff1a;“双11”当天全国快递业务量达6.39亿件&#xff1b; 2、公安机关通缉4名缅北电诈头目&#xff0c;其中一人为缅甸掸邦议会原议员&#xff1b; 3、多部门提醒&#xff1a;未满10…
阅读更多...
响应式摄影科技传媒网站模板源码带后台

响应式摄影科技传媒网站模板源码带后台

模板信息&#xff1a; 模板编号&#xff1a;540 模板编码&#xff1a;UTF8 模板颜色&#xff1a;黑白 模板分类&#xff1a;摄像、婚庆、家政、保洁 适合行业&#xff1a; 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手…
阅读更多...
面试被问答3-5年职业规划，该怎么回答

面试被问答3-5年职业规划，该怎么回答

面试官问这些问题的目的是什么&#xff1f;他想得到什么满意的答案。只要清楚这些&#xff0c;就不难回答这个问题。 1、你有没有上进心&#xff1f;公司是否值得培养呢&#xff1f; 你需要对专业能力充满向往&#xff0c;希望自己在3~5年内&#xff0c;把专业能力做好&#…
阅读更多...
Python---元组的相关操作方法

Python---元组的相关操作方法

由于元组中的数据不允许直接修改&#xff0c;所以其操作方法大部分为查询方法。 编号函数作用1元组[索引]根据索引下标查找元素2index()查找某个数据&#xff0c;如果数据存在返回对应的下标&#xff0c;否则报错&#xff0c;语法和列表、字符串的index方法相同3count()统计某…
阅读更多...
JAVA基础：子父类关系里的实例创建流程

JAVA基础：子父类关系里的实例创建流程

实验类&#xff1a; &#x1f4ce;A.javahttps://www.yuque.com/attachments/yuque/0/2023/java/21609500/1699858993581-1df32da6-8360-4a98-aa1b-d9a59d3b2d76.java &#x1f4ce;B.javahttps://www.yuque.com/attachments/yuque/0/2023/java/21609500/1699858998289-d9e31…
阅读更多...
得帆低代码OMS助力SAP和Oracle ERP订单模块全线升级，感受非凡体验

得帆低代码OMS助力SAP和Oracle ERP订单模块全线升级，感受非凡体验

场景背景 随着数字化转型进入深水区&#xff0c;智能化、移动化、可视化的需求越来越强烈&#xff0c;而传统的Oracle、SAP销售模块很难快速满足销售端的上述需求&#xff0c;逐渐面临如下痛难点&#xff1a; IT服务商响应不足&#xff1a;企业越来越多信息化的业务需要大量的供…
阅读更多...
使用Tipas结合内网穿透在Ubuntu上搭建高效问题解答平台网站

使用Tipas结合内网穿透在Ubuntu上搭建高效问题解答平台网站

文章目录 前言2.Tipask网站搭建2.1 Tipask网站下载和安装2.2 Tipask网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3 Cpolar稳定隧道&#xff08;本地设置&#xff09; 4. 公网访问测试5. 结语 前…
阅读更多...
thinkphp8 数据库的连接

thinkphp8 数据库的连接

账号&#xff1a;root 密码&#xff1a;自己设置 http://localhost:888/index.php当出现这个并且能登陆就算成功了。 回到项目config/database.php .env 里面&#xff08;如果已经.example.env 改成了.env,则改下边&#xff0c;db_name改成你的数据库表名&#xff09; 多个…
阅读更多...
Find My冲浪板|苹果Find My技术与冲浪板结合，智能防丢，全球定位

Find My冲浪板|苹果Find My技术与冲浪板结合，智能防丢，全球定位

冲浪板就是冲浪运动中必不可少的器材之一。冲浪板是一块能够承受波浪抛掷的器材&#xff0c;通常由泡沫材质制成&#xff0c;也有一些采用其他材质制成的高档板。冲浪板不仅能够帮助人们在波浪中快速滑行&#xff0c;还能提供重心支撑和掌控波浪的稳定性。电动冲浪板是一种新型…
阅读更多...
如何加密RAR压缩文件？

如何加密RAR压缩文件？

如何使用WinRAR加密压缩包&#xff1f;详细介绍WinRAR中的三种加密方法给大家。 方法一&#xff1a;加密 最简单的加密方法&#xff0c;就是在加密文件时输入想要设置的密码&#xff0c;完成加密和压缩了。 方法二&#xff1a;自动加密 普通的加密方式&#xff0c;需要我们加…
阅读更多...
如何向MapInfo Pro添加自定义符号？

如何向MapInfo Pro添加自定义符号？

用户可以在MapInfo Pro中创建和使用自己的自定义图像作为符号。要访问这些自定义符号&#xff0c;请将它们放在CUSTSYMB目录中&#xff0c;然后从“符号样式”对话框&#xff08;Style>符号样式&#xff09;的“字体”列表中的“自定义符号”选项中选择它们。MapInfo Pro中的…
阅读更多...
IDEA软件使用步骤

IDEA软件使用步骤

1.IDEA概述 IDEA全称InelliJ IDEA,是用于java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 集成环境&#xff1a;把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试扽过多种功能综合到一起的开发工具。 下载&#xff1a;https…
阅读更多...
vue3 input 上传文件

vue3 input 上传文件

1.axios封装 http.postFormData function(vm, url, params) {return new Promise((resolve) > {axios.post(url, params, {headers: {Content-Type: multipart/form-data,Authorization: store.state.token},timeout: config.httpTimeOut}).then(res > {custResponseFu…
阅读更多...
微服务概念

微服务概念

微服务 微服务是什么 In short, the microservice architectural style [1] is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource A…
阅读更多...
【EI会议征稿】第四届环境资源与能源工程国际学术会议（ICEREE 2024）

【EI会议征稿】第四届环境资源与能源工程国际学术会议（ICEREE 2024）

第四届环境资源与能源工程国际学术会议&#xff08;ICEREE 2024&#xff09; 2024 4th International Conference on Environment Resources and Energy Engineering ICEREE&#xff08;2020-2023&#xff09;大会先后在珠海&#xff0c;昆明&#xff0c;长沙成功召开。会议主…
阅读更多...
【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用

【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用

Redis高并发高可用 复制 在分布式系统中为了解决单点问题&#xff0c;通常会把数据复制多个副本部署到其他机器&#xff0c;满足故障恢复和负载均衡等需求。Redis也是如此&#xff0c;它为我们提供了复制功能&#xff0c;实现了相同数据的多个Redis 副本。复制功能是高可用Re…
阅读更多...
操作指南 | 如何将$DOT转移至Moonbeam

操作指南 | 如何将$DOT转移至Moonbeam

Moonbeam直观的DApp界面由波卡原生互操作性支持&#xff0c;用户可以通过几个简单的步骤使用其他平行链的资产或中继链的$DOT。 &#x1f9ed; 首先导向至http://moonbeam.network&#xff0c;点击“Launch App&#xff08;启动应用程序&#xff09;”和“Connect Wallet&…
阅读更多...
Postman：如何对WebService接口进行测试

Postman：如何对WebService接口进行测试

前言 由于工作所需,需要使用Postman测试工具&#xff0c;对基于ws规范的WebService接口进行测试。在经过多种尝试后&#xff0c;终于找到了正确的测试方法&#xff0c;下面我便详细记录测试步骤&#xff0c;以便以后再次测试时可以拿来主义。 第一步&#xff1a;确保WebServi…
阅读更多...
Excel函数-将A1中的字符串剔除B1中的字符串

Excel函数-将A1中的字符串剔除B1中的字符串

比如A2中是类型单位&#xff0c;B2中是单位&#xff0c;在C2中体现A2-B2的结果&#xff0c;即大米 公式&#xff1a;SUBSTITUTE(A2,B2,“”) SUBSTITUTE函数功能&#xff1a;将字符串中的部分字符用新字符替换&#xff0c;替换序号忽略说明进行全部替换 结构&#xff1a;SUB…
阅读更多...
zotero跨Windows设备数据同步（利用OneDrive、百度云同步空间等云服务）

zotero跨Windows设备数据同步（利用OneDrive、百度云同步空间等云服务）

zotero跨Windows设备数据同步&#xff08;利用OneDrive、百度云同步空间等云服务&#xff09; 特别注意 不能在多个设备同步使用zotero&#xff0c;否则会导致同步出现异常。 基本原理 同步zotero的数据&#xff0c;即同步全部的文献和笔记、高亮标记信息。而这两类数据分别…
阅读更多...
最新文章

Copyright @ 2022~2023