Wpf 使用 Prism 实战开发Day07

小丫头呀2023-12-08 1:34

待办事项页面设计

效果图:

一.布局设计

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

例如：

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

第一行内容设计

第一行设计，使用 StackPanel 控件

XML 复制代码 
<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 的命名空间：

    XML 复制代码 
    xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"

  3. 引入命名空间后，在需要提示的文本输入框中，使用 md:HintAssist.Hint="查找待办事项..." 来显示文字。

    XML 复制代码 
    <TextBox Width="250" md:HintAssist.Hint="查找待办事项..."/>

  4. 文本输入框中，添加一个清除按钮：

    XML 复制代码 
    md:TextFieldAssist.HasClearButton="True"

  5. 文本框内容垂直方向居中属性：

    XML 复制代码 
    VerticalAlignment="Center"

  6. 水平方向居中属性：

    XML 复制代码 
    HorizontalAlignment="Center"

  7. 下拉框默认选择第一个属性设置 SelectedIndex="0"

第二行内容设计

使用 ItemsControl 控件，并且该控件的固定写法如下：

XML 复制代码 
 <ItemsControl>
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
            <WrapPanel />
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
 </ItemsControl>

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

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

例如：

XML 复制代码 
 <ItemsControl>
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
             <WrapPanel />
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
     <!--自定义内容模板-->
     <ItemsControl.ItemTemplate>
         <DataTemplate>
             <!--自定义内容区域-->
         </DataTemplate>
     </ItemsControl.ItemTemplate>
 </ItemsControl>
  • 自定义内容区域数据渲染。ItemsSource 绑定后台数据源
XML 复制代码 
        <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 中生成静态测试数据

cs 复制代码 
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 控件来实现。

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

添加弹出层自定义内容：

XML 复制代码 
    <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. 后端绑定命令代码实现
cs 复制代码 
public class ToDoViewModel:BindableBase
 {
     public ToDoViewModel()
     {
         AddCommand = new DelegateCommand(Add);
     }

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

     public DelegateCommand AddCommand{ get; private set; }

 }

三.待办页面源码

ToDoView.xaml

XML 复制代码 
<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

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;
     }

 }
相关推荐
晚安苏州7 小时前
WPF DataTemplate 数据模板
wpf
甜甜不吃芥末1 天前
WPF依赖属性详解
wpf
Hat_man_1 天前
WPF制作图片闪烁的自定义控件
wpf
晚安苏州3 天前
WPF Binding 绑定
wpf·wpf binding·wpf 绑定
wangnaisheng3 天前
【WPF】RenderTargetBitmap的使用
wpf
dotent·3 天前
WPF 完美解决改变指示灯的颜色
wpf
orangapple5 天前
WPF 用Vlc.DotNet.Wpf实现视频播放、停止、暂停功能
wpf·音视频
ysdysyn5 天前
wpf mvvm 数据绑定数据（按钮文字表头都可以），根据长度进行换行，并把换行的文字居中
c#·wpf·mvvm
orangapple5 天前
WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
wpf
晚安苏州5 天前
WPF ControlTemplate 控件模板
wpf
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程