WPF DatePicker与Calendar的使用和样式修改

news2024/11/27 2:23:06

什么是DatePicker,Calendar

  • Calendar:日历(显示年月日视图控件)
  • DatePicker:日期选择器(是一个更小的控件,点击控件时才会弹出一个日历)

Calendar使用

常用属性
  • DisplayMode:显示日历时最高的一级,以十年、年、月来显示,一般用Month
  • DisplayDateStart:日历的开始日期
  • DisplayDateEnd:日历的结束日期
  • DisplayDate:显示开始月份和日期
  • SelectedDate:选择的日期
  • FirstDayOfWeek:某一天作为日历第一列的第一天(FirstDayOfWeek="Monday")
  • IsTodayHighlighted:设置今日是否高亮显示("True"为高亮显示)
  • SelectionMode:日期选择范围("MultipleRange"为可选择多个日期范围)
常用事件
  • SelectedDatesChanged:当选择的日期发生改变时
private void Calender_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
    //SelectionMode="SingleDate"
    this.Title = Calender.SelectedDate.ToString();

    //SelectionMode="MultipleRange"
    /*
    for (int i = 0; i < Calender.SelectedDates.Count; i++)
    {
        this.s += this.Calender.SelectedDates[i].ToString();
        this.Title = this.s;
    }
    */
}
日期限制

        根据您使用 Calendar 控件的目的,您可能希望日期不能被选中且颜色变淡,可使用BlackoutDates集合添加限定日期范围。

<Calendar x:Name="calendar" Height="170" Width="200" 
   <Calendar.BlackoutDates>
        <CalendarDateRange Start="01.01.2024" End="01.03.2024" />
        <CalendarDateRange Start="01.06.2024" End="01.09.2024" />
   </Calendar.BlackoutDates>
</Calendar>

DatePicker使用

常用属性
  • IsDropDownOpen:日历视图是否一开始就展开(“True”为一开始就展开)
常用事件
  • DateValidationError:用户输入非法的日期时触发
private void DatePicker_DateValidationError(object sender, DatePickerDateValidationErrorEventArgs e)
{
    MessageBox.Show($"输入非法日期:{e.Text},错误原因是:{e.Exception.Message}"); 
}

Calendar样式修改

Calendar的主要样式
  • CalendarStyle:日历框架样式
  • CalendarButtonStyle:日历面板样式
  • CalendarDayButtonStyle:天的样式
  • CalendarItemStyle:月份样式

<Window x:Class="CalendarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CalendarDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!--日历样式-->
        <Style x:Key="DefaultCalendar" TargetType="{x:Type Calendar}">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <!--日历背景色-->
            <Setter Property="Background" Value="#FF76AEE4"/>
            <!--日历边框颜色-->
            <Setter Property="BorderBrush" Value="#FFA31ECC"/>
            <!--日历边框线条宽度-->
            <Setter Property="BorderThickness" Value="2" />
            <!--日历字体样式-->
            <Setter Property="FontFamily" Value="Arial" />
            <!--今日是否高亮-->
            <Setter Property="IsTodayHighlighted" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Calendar}">
                        <CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" 
                                      FontFamily="{TemplateBinding FontFamily}" 
                                      BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <!--使用ViewBox可以让日历试图大小跟随窗体大小一起改变-->
        <Viewbox   VerticalAlignment="Center" HorizontalAlignment="Center" >
            <Calendar   Style="{DynamicResource DefaultCalendar}"
                        Margin="150 0 150 0"
                        Height="170"
                        Width="200"
                        FontSize="20" />
        </Viewbox>
    </Grid>
</Window>

自定义DatePicker控件

        通过自定义的DatePicker控件可显示日期和时间,代码有详细注释,方便移植到项目。

<UserControl x:Class="CalendarDemo.DateTimePicker"
             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:CalendarDemo"
             mc:Ignorable="d" 
             Name="own"
             d:DesignHeight="25" 
             d:DesignWidth="200" GotFocus="own_GotFocus" LostFocus="own_LostFocus" >
    <UserControl.Resources>
        <!--日期时间 下拉框样式-->
        <ControlTemplate x:Key="ComboBoxToggleTimeButton" TargetType="{x:Type ToggleButton}">
            <Grid >
                <Border Grid.Column="1" Background="White" Opacity="0"   Cursor="Hand"/>
                <Path x:Name="Arrow" Grid.Column="0"  Visibility="Collapsed" Data="M 0 0  6 6 12 0 " Stroke="#BBBBBB" VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="None" Fill="Transparent" Margin="0,10,8,9" RenderTransformOrigin="0.5,0.5"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="Arrow" Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="180"/>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="Arrow" Property="Margin" Value="0,10,8,9" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <Style x:Key="DateTimeComboBoxStyle" TargetType="{x:Type ComboBox}">
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type ComboBoxItem}">
                        <Setter Property="Width" Value="30"/>
                        <Setter Property="Height" Value="22"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate  TargetType="{x:Type ComboBoxItem}">
                                    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="White" Cursor="Hand">
                                        <Border x:Name="_borderbg" Background="Transparent" CornerRadius="3" Height="20"/>
                                        <TextBlock  TextAlignment="Center" VerticalAlignment="Center"  x:Name="_txt" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}"/>
                                        <Border x:Name="_border" Background="LightBlue" Opacity="0"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter TargetName="_txt" Property="Foreground" Value="#FF0318E6"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsMouseOver" Value="true"/>
                                            </MultiTrigger.Conditions>
                                            <Setter TargetName="_borderbg" Property="Background" Value="LightBlue" />
                                        </MultiTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <Border  BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3"/>
                            <ContentPresenter  HorizontalAlignment="Center"  x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>

                            <!--ToggleButton 已数据绑定到 ComboBox 本身以切换 IsDropDownOpen-->
                            <ToggleButton  Template="{StaticResource ComboBoxToggleTimeButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <!--必须将 TextBox 命名为 PART_EditableTextBox,否则 ComboBox 将无法识别它-->
                            <TextBox   Visibility="Hidden" BorderThickness="0"   Margin="2 0 0 0" x:Name="PART_EditableTextBox"  VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>

                            <!--Popup 可显示 ComboBox 中的项列表。IsOpen 已数据绑定到通过 ComboBoxToggleButton 来切换的 IsDropDownOpen-->
                            <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom"  HorizontalOffset="-6" x:Name="Popup" Focusable="False" AllowsTransparency="True"  PopupAnimation="Slide" >
                                <Grid MaxHeight="120" MinWidth="{TemplateBinding ActualWidth}" Background="White" x:Name="DropDown" SnapsToDevicePixels="True" Width="40" >
                                    <Border x:Name="DropDownBorder"  BorderBrush="LightGray" BorderThickness="1" CornerRadius="3" Background="White"/>
                                    <ScrollViewer Margin="1"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" CanContentScroll="True">
                                        <!--StackPanel 用于显示子级,方法是将 IsItemsHost 设置为 True-->
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Margin="0,5" Background="{TemplateBinding Background}"/>
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEditable" Value="true">
                                <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <local:BoolToVisibleConverter x:Key="boolToVisible"></local:BoolToVisibleConverter>
    </UserControl.Resources>
    <Grid>
        <Border Name="_border" BorderBrush="#E6E6E6"  BorderThickness="2" Background="White"  Margin="0,0,0,0" CornerRadius="4"/>

        <TextBlock Name="textTime"  HorizontalAlignment="Left" FontSize="{Binding DTFontSize,ElementName=own}" Foreground="{Binding DTForground,ElementName=own}"
                VerticalAlignment="Center"  Text="{Binding DateTimeValue,ElementName=own}" Margin="10,0,0,0"/>
        <TextBlock Name="shuiyin" Text="选择日期与时间" Margin="10,0,0,0" FontSize="{Binding DTFontSize,ElementName=own}"  VerticalAlignment="Center" 
                    Foreground="Gray" Visibility="{Binding ElementName=textTime, Path= Text.IsEmpty,
                    Converter={StaticResource boolToVisible}}" HorizontalAlignment="Left"/>
        <Button Name="icon" Style="{StaticResource ButtonStyle1}"  MinWidth="15" MinHeight="15" MaxHeight="18" MaxWidth="18" Margin="0,5,5,5" Width="{Binding ActualHeight,RelativeSource={RelativeSource Self}}" HorizontalAlignment="Right"   Click="icon_Click">
            <Button.Background>
                <ImageBrush ImageSource="pack://application:,,,/Assets/ic_ziyuan_date.png" ></ImageBrush>
            </Button.Background>
        </Button>
        <Popup x:Name="popup" StaysOpen="False" Placement="Bottom" VerticalOffset="10" >
            <Border BorderBrush="#DDDDDD" BorderThickness="2" Width="200">
                <StackPanel Background="White" >
                    <Viewbox >
                        <Calendar Name="calDate" Style="{DynamicResource CalendarStyle1}" 
                                  CalendarItemStyle="{DynamicResource CalendarItemStyle1 }"
                                  CalendarDayButtonStyle="{DynamicResource CalendarDayButtonStyle}"
                                  CalendarButtonStyle="{DynamicResource CalendarButtonStyle}"
                                  SelectedDatesChanged="calDate_SelectedDatesChanged" BorderBrush="{x:Null}"/>
                    </Viewbox>
                    <Grid Name="grid" Height="24" Width="{Binding ActualWidth,ElementName=own}" Margin="0,-10,0,5" Visibility="Visible" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25*"/>
                            <ColumnDefinition Width="94*"/>
                            <ColumnDefinition Width="40*"/>
                        </Grid.ColumnDefinitions>
                        <Border BorderBrush="#EE7942" Grid.ColumnSpan="3" BorderThickness="0,0,0,1"  Background="White" CornerRadius="0,0,4,4" Margin="1,-3" Opacity="0.8" Visibility="Visible">
                        </Border>
                        <TextBlock Text="时间"  HorizontalAlignment="Center" VerticalAlignment="Center" />

                        <Grid Grid.Column="1" Name="showTime" Height="22" VerticalAlignment="Center">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="3"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="3"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
    
                            <ComboBox Name="hourCbx" Grid.Column="0" HorizontalContentAlignment="Center" Style="{StaticResource DateTimeComboBoxStyle}" Foreground="Black" SelectedIndex="0" Margin="0" />
                            <TextBlock Text=":" Foreground="Gray" Grid.Column="1" VerticalAlignment="Center" Margin="0,-3,0,0" HorizontalAlignment="Center"></TextBlock>
                            <ComboBox Name="minCbx" Grid.Column="2" HorizontalContentAlignment="Center" Style="{StaticResource DateTimeComboBoxStyle}" Foreground="Black" SelectedIndex="0" Margin="0" />
                            <TextBlock Text=":" Foreground="Gray" Grid.Column="3" VerticalAlignment="Center" Margin="0,-3,0,0" HorizontalAlignment="Center"></TextBlock>
                            <ComboBox Name="secondCbx" HorizontalContentAlignment="Center" Grid.Column="4" Style="{StaticResource DateTimeComboBoxStyle}" Foreground="Black" SelectedIndex="0" Margin="0" />
                        </Grid>

                        <Button Name="ok" Content="确定" Grid.Column="2"  Width="35" Height="18" VerticalAlignment="Center" HorizontalAlignment="Center"
                                Click="ok_Click" Style="{DynamicResource ButtonStyle2}"></Button>
                    </Grid>
                </StackPanel>

            </Border>

        </Popup>
    </Grid>
</UserControl>

自定义DatePicker控件实例链接:

https://download.csdn.net/download/lvxingzhe3/88701624

参考:

基础内容: 自定义新的 WPF Calendar 控件 | Microsoft Learn

https://www.cnblogs.com/lzjsky/p/17211723.html

wpf自定义样式DatePickerStyle及Calendar控件_wpf中calendar控件美化-CSDN博客

https://www.cnblogs.com/anding/p/4979764.html

WPF 入门教程Calendar控件

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

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

相关文章

MacOS - 苹果电脑程序还能正常启动,但图标消失不见了~

问题描述 网上有一些解决方案说是 killall Finder 命令&#xff0c;重置 Docker 等等&#xff0c;但是发现还是不行&#xff0c;于是必杀技…… 解决方案 方案一、删除该 App&#xff0c;重装即可方案二、如果懒得重装&#xff0c;可以在 Finder 中找到对应的应用程序&#xf…

FPGA高端项目:纯verilog的 10G-UDP 高速协议栈,提供7套工程源码和技术支持

目录 1、前言免责声明更新说明 2、相关方案推荐我这里已有的以太网方案本协议栈的千兆网UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设计架构框图网络调试助手GT资源使用GT…

1.3 金融数据可视化

跳转到根目录&#xff1a;知行合一&#xff1a;投资篇 已完成&#xff1a; 1.1 编程基础   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas 1.2 金融数据处理 1.3 金融数据可视化 文章目录 1. 金融数据可视化1.1. matplotlib1.1.1. 沪深300走势图1.1.2. 日线均线…

06-微服务-SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明队列、交…

力扣刷题-二叉树-验证二叉搜索树

98.验证二叉搜索树 给定一个二叉树&#xff0c;判断其是否是一个有效的二叉搜索树。 假设一个二叉搜索树具有如下特征&#xff1a; 节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 思路 中序遍历下&…

【中小型企业网络实战案例 八】配置映射内网服务器和公网多出口、业务测试和保存配置

相关学习文章&#xff1a; 【中小型企业网络实战案例 一】规划、需求和基本配置 【中小型企业网络实战案例 二】配置网络互连互通【中小型企业网络实战案例 三】配置DHCP动态分配地址 【中小型企业网络实战案例 四】配置OSPF动态路由协议【中小型企业网络实战案例 五】配置可…

Python重温笔记番外篇

1. 写在前面 今天这篇文章是python重温笔记的番外&#xff0c;整理一些面试中的问题以及遇到过的一些坑&#xff0c; 正好借着这个机会把前面的知识进行一个串联&#xff0c; 要不然这些知识很容易就会遗忘&#xff0c; 毕竟知识多而又不太容易常用到。 涉及到的知识包括列表推…

单片机快速入门

参考连接&#xff1a; 安装MinGW-64&#xff08;在win10上搭建C/C开发环境&#xff09;https://zhuanlan.zhihu.com/p/85429160MinGW-64; 链接&#xff1a;https://pan.baidu.com/s/1oE1FmjyK7aJPnDC8vASmCg?pwdy1mz 提取码&#xff1a;y1mz --来自百度网盘超级会员V7的分享C…

Python打印Python环境、PyTorch和CUDA版本、GPU数量名称等信息

代码&#xff1a; import torch import platformgpu_num torch.cuda.device_count() torch_version torch.__version__ python_version platform.python_version()print("Python Version: Python %s" % python_version) print("PyTorch Version: %s" %…

[Javaweb/LayUI/上机考试作业/开源]学生/图书/课程/仓库等管理系统六合一基础功能通用模板

展示 考试要求 给定用户表和六张图书/教师/顾客/仓库....的表&#xff08;随机给每人抽选&#xff09;&#xff0c;要求实现用户登录注册&#xff0c;异步更新&#xff0c;对物品增删改查&#xff0c;精确/模糊查询等。 环境 tomcat 9 mysql 8 java 17 项目结构 项目类图 写前…

分布式【zookeeper面试题23连问】

1. ZooKeeper是什么&#xff1f; ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终&#x…

Prometheus二进制安装包部署

Prometheus安装部署 一&#xff0c;下载安装包并解压 **下载地址&#xff1a;**https://github.com/prometheus/prometheus/releases 因为服务器上下载速度太慢&#xff0c;所以可以提前在物理机上下载上传到服务器&#xff0c;本次安装使用的版本为&#xff1a;prometheus-…

深度神经网络中的混合精度训练

Mixed-Precision Training of Deep Neural Networks | NVIDIA Technical Blog 目录 混合精度成功训练的技术 FP32 累加 损失缩放 loss scaling FP32 Master Copy of Weights 混合精度训练迭代过程 AMP混合精度训练介绍 FP16和FP32的区别 FP16的优势 FP16的问题 解决P…

shell sshpass 主机交互 在另外一台主机上执行某个命令 批量管理主机 以及一些案例

目录 作用安装 sshpasssshpass 用法在远程主机执行某个命令 案例批量传输密匙批量拷贝文件批量修改密码 作用 就是用一台主机 控制另外一台主机免交互任务管理工具方便批量管理主机使用方法就是在ssh 前边加一个 sshpass 安装 sshpass # 安装 sshpass yum -y install sshpas…

MongoDB快速实战与基本原理

MongoDB 介绍 什么是 MongoDB MongoDB 是一个文档数据库&#xff08;以 JSON 为数据模型&#xff09;&#xff0c;由 C 语言编写&#xff0c;旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。文档来自于“JSON Document”&#xff0c;并非我们一般理解的 PDF、WORD 文档…

【K8S 云原生】Pod资源限制、Pod容器健康检查(探针)

目录 一、docker的重启方式和K8S重启方式 1、Pod的重启方式&#xff1a; 2、docker的重启策略&#xff1a; 二、yaml文件快速生成&#xff1a; 三、pod的状态&#xff1a; 四、Pod的资源限制 1、限制的方式和种类 2、CPU的限制的格式&#xff1a; 五、K8S拉取镜像的策…

电源板设计方案怎么写 (评审文件)

1. 首先是大致的图形模块化说明。 1. 大致的框图 2. 统计项目需要的功率和需求 此表格数据是假的&#xff0c;只是为了展示 电源种类是&#xff1a; 板子需要供电需要的电压和对应电压最大的电流。 电源时序是&#xff1a; 板子…

智能穿戴时代 | 米客方德SD NAND的崭新优势

SD NAND在智能穿戴上的优势 SD NAND是一种可以直接焊接在智能穿戴设备主板上的存储芯片&#xff0c;其小型化设计有助于紧凑设备尺寸&#xff0c;同时提供可靠的嵌入式存储解决方案。 这种集成设计减少了空间占用&#xff0c;同时确保设备在高度活动的环境中更为稳定。SD NAND…

【C#】知识点实践序列之UrlEncode在线URL网址编码、解码

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是2024年第8篇文章&#xff0c;此篇文章是C#知识点实践序列文章&#xff0c; 博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 地址编码大家应该比较经常遇到和使用到&…

rk3566 armbian修复usb2.0并挂载U盘

文章目录 usb接口修复一 执行命令二 修改rk3566-panther-x2.dts⽂件三 查看是否识别 U盘格式化、挂载一 U盘格式化1.1 查看U盘1.2 查看U盘文件系统类型1.3 格式化为ext4系统 二 挂载U盘2.1 手动挂载2.2 自动挂载&#xff08;可选&#xff09; usb接口修复 一 执行命令 将位于…