Wpf 使用 Prism 实战开发Day07

待办事项页面设计

效果图:


一.布局设计

页面主要分上下布局,分2行进行设计,使用 Grid.RowDefinitions 将页面分上下2行
例如:

<Grid.RowDefinitions>
    <RowDefinition Height="auto"/>
    <RowDefinition/>
</Grid.RowDefinitions>
  1.  页面需要设计多少行,就在<Grid.RowDefinitions> 中嵌套多少个 RowDefinitions
  2.  把 Height 属性设置为auto(自动高度),目的是让第一行根据页面内容进行自适应

第一行内容设计 

 第一行设计,使用 StackPanel 控件

<StackPanel Margin="15,0,0,0" Orientation="Horizontal">
    <TextBox Width="250" VerticalAlignment="Center" md:HintAssist.Hint="查找待办事项..." md:TextFieldAssist.HasClearButton="True"/>
    <TextBlock Text="筛选:" Margin="10.0" VerticalAlignment="Center"/>
    <ComboBox SelectedIndex="0">
        <ComboBoxItem>全部</ComboBoxItem>
        <ComboBoxItem>待办</ComboBoxItem>
        <ComboBoxItem>已完成</ComboBoxItem>
    </ComboBox>
</StackPanel>
<Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" />

属性说明:

  1. Orientation 属性值:Horizontal-内容水平排列。Vertical-内容垂直排列。
  2. 文本输入框 查找待办事项.. 提示文字, 使用MD 框架的提示,并且要引入MD 的命名空间:               
    xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
  3. 引入命名空间后,在需要提示的文本输入框中,使用 md:HintAssist.Hint="查找待办事项..." 来显示文字。

    <TextBox Width="250" md:HintAssist.Hint="查找待办事项..."/>
  4. 文本输入框中,添加一个清除按钮:
    md:TextFieldAssist.HasClearButton="True"
  5. 文本框内容垂直方向居中属性:
    VerticalAlignment="Center"
  6. 水平方向居中属性:
    HorizontalAlignment="Center"
  7. 下拉框默认选择第一个属性设置  SelectedIndex="0"


第二行内容设计

使用 ItemsControl 控件,并且该控件的固定写法如下:

 <ItemsControl>
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
            <WrapPanel />
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
 </ItemsControl>

然后在 ItemsControl 里面使用 WrapPanel控件,WrapPanel 控件布局默认是从左往右排,并且越出指定的空间后,自动另起一行进行排列。


控件布局以及排列方式定义完成后,需要使用自定义模板进行数据内容渲染。
例如:

 <ItemsControl>
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
             <WrapPanel />
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
     <!--自定义内容模板-->
     <ItemsControl.ItemTemplate>
         <DataTemplate>
             <!--自定义内容区域-->
         </DataTemplate>
     </ItemsControl.ItemTemplate>
 </ItemsControl>

  •  自定义内容区域数据渲染。ItemsSource 绑定后台数据源
        <ItemsControl Grid.Row="1" HorizontalAlignment="Center" ItemsSource="{Binding ToDoDtos}">
            <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>
  1. 层级属性:Panel.ZIndex="1",最顶层。

  • 后端生成页面模拟静态数据。

例如:在ToDoViewModel 中生成静态测试数据

public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         ToDoDtos = new ObservableCollection<ToDoDto>();
         CreateTodoList();
     }
     private ObservableCollection<ToDoDto> toDoDtos;
     /// <summary>
     /// 创建数据的动态集合
     /// </summary>
     public ObservableCollection<ToDoDto> ToDoDtos
     {
         get { return toDoDtos; }
         set { toDoDtos = value;RaisePropertyChanged(); }
     }
     void CreateTodoList()
     {
         for (int i = 0; i < 20; i++)
         {
             toDoDtos.Add(new ToDoDto()
             {
                 Title="标题"+i,
                 Content="测试数据..."
             });
         }
     }
 }

二.待办事项按钮弹出层设计

使用 md:DialogHost 控件,把整个布局都包裹住。并且点击按钮时右边需要有一个弹出的区域,要使用 md:DrawerHost 控件来实现。

  • 模板固定写法如下:
<md:DialogHost>
     <md:DrawerHost>
     <!--设计右边弹出层-->
     <md:DrawerHost.RightDrawerContent>
         <!--定义弹出层的内容区域-->
         <DockPanel Width="300">
             
         </DockPanel>
     </md:DrawerHost.RightDrawerContent>
    
 </md:DrawerHost>
</md:DialogHost>

 添加弹出层自定义内容:

    <md:DialogHost>
        <md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen}">
            <!--设计右边弹出层-->
            <md:DrawerHost.RightDrawerContent>
                <!--定义弹出层的内容区域-->
                <DockPanel Width="300" LastChildFill="False">
                    <TextBlock Text="添加待办" Padding="20,10" FontSize="20" FontWeight="Bold"  DockPanel.Dock="Top"/>
                    <StackPanel Orientation="Horizontal" Margin="20" DockPanel.Dock="Top">
                        <TextBlock Text="状态:"  Padding="0,0,10,0" VerticalAlignment="Center"/>
                        <ComboBox SelectedIndex="0">
                            <ComboBoxItem>待办</ComboBoxItem>
                            <ComboBoxItem>已完成</ComboBoxItem>
                        </ComboBox>
                    </StackPanel>
                    <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>

        </md:DrawerHost>
        
    </md:DialogHost>
  1. DockPanel.Dock属性,为Top,让设置该属性的控件内容往上靠。
  2. IsRightDrawerOpen ,通过设置该属性值来控制弹出层是否展开或关闭。

按钮点击命令写法

点击待办按钮时,通过前端 绑定命令的方式调用后台的方法,给isRightDrawerOpen 属性赋值来控制弹出层的展开或关闭。
例如:

  1. 前端按钮绑定命令   <Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" Command="{Binding AddCommand}" />
  2. 后端绑定命令代码实现
public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         AddCommand = new DelegateCommand(Add);
     }

     private void Add()
     {
        //处理的逻辑
         throw new NotImplementedException();
     }

     public DelegateCommand AddCommand{ get; private set; }

 }

三.待办页面源码

ToDoView.xaml

<UserControl x:Class="MyToDo.Views.ToDoView"
             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">
                    <TextBlock Text="添加待办" Padding="20,10" FontSize="20" FontWeight="Bold"  DockPanel.Dock="Top"/>
                    <StackPanel Orientation="Horizontal" Margin="20" DockPanel.Dock="Top">
                        <TextBlock Text="状态:"  Padding="0,0,10,0" VerticalAlignment="Center"/>
                        <ComboBox SelectedIndex="0">
                            <ComboBoxItem>待办</ComboBoxItem>
                            <ComboBoxItem>已完成</ComboBoxItem>
                        </ComboBox>
                    </StackPanel>
                    <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"/>
                    <TextBlock Text="筛选:" Margin="10.0" VerticalAlignment="Center"/>
                    <ComboBox SelectedIndex="0">
                        <ComboBoxItem>全部</ComboBoxItem>
                        <ComboBoxItem>待办</ComboBoxItem>
                        <ComboBoxItem>已完成</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <Button HorizontalAlignment="Right" Content="+ 添加待办" Margin="10,5" Command="{Binding AddCommand}" />

                <ItemsControl Grid.Row="1" HorizontalAlignment="Center" ItemsSource="{Binding ToDoDtos}">
                    <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>

 ToDoViewModel.cs

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

 }

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

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

相关文章

Stable Diffusion 系列教程 - 1 基础准备(针对新手)

使用SD有两种方式&#xff1a; 本地&#xff1a; 显卡要求&#xff1a;硬件环境推荐NVIDIA的具有8G显存的独立显卡&#xff0c;这个显存勉勉强强能摸到门槛。再往下的4G可能面临各种炸显存、炼丹失败、无法生成图片等各种问题。对于8G显存&#xff0c;1.0模型就不行&#xff0…

3.4_1 java自制小工具 - pdf批量转图片

相关链接 目录参考文章&#xff1a;pdf转图片(apache pdfbox)参考文章&#xff1a;GUI界面-awt参考文章&#xff1a;jar包转exe(exe4j)参考文章&#xff1a;IDEA导入GIT项目参考文章&#xff1a;IDEA中使用Gitee管理代码gitee项目链接&#xff1a;pdf_2_image网盘地址&#xf…

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级 在之前的开发过程中&#xff0c;需要实现卡片轮播效果&#xff0c;但是卡片轮播需要中间大、两边小一些的效果&#xff0c;这里就使用到了Swiper。具体效果如视频所示 添加链接描述 这里需要的效果是中间大、两边…

仅仅通过提示词,GPT-4可以被引导成为多个领域的特定专家

The Power of Prompting&#xff1a;提示的力量&#xff0c;仅通过提示&#xff0c;GPT-4可以被引导成为多个领域的特定专家。微软研究院发布了一项研究&#xff0c;展示了在仅使用提策略的情况下让GPT 4在医学基准测试中表现得像一个专家。研究显示&#xff0c;GPT-4在相同的基…

依据小兔鲜项目,总结Javascript数组常用方法

find 在向购物车添加某种规格的商品时&#xff0c;查找购物车列表中是否已经存在该规格的商品 find()方法传入一个回调函数&#xff0c;代表对数组每一项item的校验要求 返回数组中第一个符合条件的元素的值&#xff0c;如果没有则返回undefined const item cartList.value…

【LeetCode热题100】【双指针】盛最多水的容器

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。 示例…

Java架构师技术为业务赋能

目录 1 概论2 天猫的难言之隐3 如何拆解技术难点-三段论4 天猫线的破局之道-双引擎回归测试框架5 架构师的心理游戏-解决问题从转换思维开始6 技术助力业务的两个方向7 阿里新零售部门如何培养技术团队的业务知识8 如何围绕业务特点制定技术发展路线-阿里系和抖音案例9 阿里系业…

Ubuntu20.04安装ROS2

官方参考文章 Ubuntu (Debian) — ROS 2 Documentation: Foxy documentation curl密钥问题 sudo curl -sSL https://raw.githubusercontent.com/ros/rosdistro/master/ros.key -o /usr/share/keyrings/ros-archive-keyring.gpg curl: (7) Failed to connect to raw.githubus…

pytorch 模型量化quantization

pytorch 模型量化quantization 1.workflow1.1 PTQ1.2 QAT 2. demo2.1 构建resnet101_quantization模型2.2 PTQ2.3 QAT 参考文献 pytorch框架提供了三种量化方法&#xff0c;包括&#xff1a; Dynamic QuantizationPost-Training Static Quantization&#xff08;PTQ&#xff0…

wordpress安装之Linux解压缩安装

本次教程是为了让大家少走弯路&#xff0c;可以更直观的去认识我们不懂的知识面。 首先我们安装解压缩的软件 命令如下&#xff1a; yum install -y unzip 上一篇我们讲到传输文件了 这篇我们把传输过来的压缩包解压并进行安装。follow me&#xff01; 我们输入命令 unzi…

【数值计算方法(黄明游)】矩阵特征值与特征向量的计算(五):Householder方法【理论到程序】

文章目录 一、Jacobi 旋转法二、Jacobi 过关法三、Householder 方法1. 旋转变换a. 旋转变换的选择b. 旋转变换的顺序 2. Householder矩阵&#xff08;Householder Matrix&#xff09;a. H矩阵的定义b. H变换的几何解释c. H变换的应用场景 3. H变换过程详解a. 过程介绍b. 细节解…

全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解

JSSDK使用步骤 步骤一:绑定安全域名&#xff1a; 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 步骤二:引入JS文件&#xff1a; 在需要调用JS接口的页面引入如下JS文件&#xff0c;&#xff08;支持https&#xff09;&#xff1a;http://…

业务数据治理体系化实施流程学习总结

目录 一、业务数据治理实施流程 步骤 1&#xff1a;发现问题和制定目标 步骤 2&#xff1a;针对问题进行拆解&#xff0c;设计可衡量的指标 步骤 3&#xff1a;制定解决SOP和检查研发标准规范 步骤 4&#xff1a;推广运营&#xff0c;以拿结果为核心目标 步骤 5&#xff…

matlab科学计算

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

ARM架构安装RabbitMQ

1.查看centos内核版本 uname -a uname -r2.安装之前的准备工作 安装RabbitMQ必装Erlang(RabbitMQ官网添加链接描述) 2.1.Erlang简介 Erlang是一种通用的面向并发的编程语言&#xff0c;它由瑞典电信设备制造商爱立信所辖的CS-Lab开发&#xff0c;目的是创造一种可以应对…

【Java基础篇 | 面向对象】—— 聊聊什么是多态(下篇)

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【JavaSE_primary】 本专栏旨在分享学习JavaSE的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、动态绑定和静态绑…

C++ string类(2)—成员访问、插入、删除、替换、查找和交换操作

目录 一、成员访问 1、[ ]&at 2、front( )&back( ) 二、插入元素 三、删除元素 四、替换元素 五、查找元素 1、查找第一次出现位置 2 、在指定范围内查找 六、交换字符串 七、c_str 八、rfind&substr 一、成员访问 1、[ ]&at 虽然二者功能一样&…

【微信小程序】上传头像 微信小程序内接小程序客服

这里写目录标题 微信小程序上传头像使用button按钮包裹img 微信小程序内接小程序客服使用button按钮跳转客服 微信小程序上传头像 使用button按钮包裹img 原本思路是只使用image标签再加上chooseImg&#xff0c;但发现使用button标签上传头像这种方法更实用。微信小程序文档上…

栈实现队列,力扣

题目地址&#xff1a; 232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 难度&#xff1a;简单 今天刷栈实现队列&#xff0c;大家有兴趣可以点上看看题目要求&#xff0c;试着做一下。 题目&#xff1a; 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支…

简单句子成分、阅读技巧

四、段落的主旨题&#xff1a;问这一段讲了什么&#xff08;一般都在段落的第一句话或最后一句话&#xff09; 词汇题的答案一般都在生词的上一句或者下一句 做题步骤&#xff1a; 1、先标段落 2、看题&#xff0c;划出关键词 3、去原文定位&#xff0c;标注中文意思 4、第一遍…