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

什么是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控件

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

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

相关文章

【漏洞复现】通天星CMSV6车载监控平台FTP匿名访问

Nx01 产品简介 深圳市通天星科技有限公司&#xff0c;是一家以从事计算机、通信和其他电子设备制造业为主的企业。通天星车载视频监控平台软件拥有多种语言版本。应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控、警车车载视…

基于Java SSM框架实现宠物管理系统项目【项目源码+论文说明】

基于java的SSM框架实现宠物管理系统演示 摘要 随着我国经济的快速发展&#xff0c;人民生活水平的不断提高&#xff0c;宠物逐渐成为许多宠物爱好者的一种生活方式。 宠物的品种也越来越多样化&#xff0c;宠物不仅能给生活带来乐趣还可以成为空巢老人&#xff0c;独生子女很…

windows安装kafka以及kafka管理工具推荐

windows安装 1.下载地址 下载地址 下载最新版本的.tgz文件解压 2.修改配置 修改config目录下的zookeeper.properties中的dataDir属性 server.properties文件中的log.dir属性 3.启动zookeeper 进入到bin\windows\下的用cmd输入zookeeper-server-start.bat ..\..\config\zo…

ShardingSphere-JDBC初探

引言 为什么使用分库分表&#xff1f; 数据量太大单表放不下&#xff0c;并且公司不希望切换产品&#xff0c;可选的方案不多&#xff0c;ShardingSphere就是不错的选择。 切换产品指的是换成es、clickhouse、hbase这种支持大数据&#xff0c;试想一下切换产品对整个项目的改…

ChatGPT 进行 SEO的使用技巧

搜索引擎优化 (SEO) 是使网站对搜索引擎友好的一种不断发展的实践。 自搜索引擎和新兴技术的发展以来&#xff0c;它从未保持不变。 最近发布的 ChatGPT 是一种人工智能对话工具&#xff0c;似乎在搜索引擎优化方面有很好的应用。 从创建吸引人的标题到只需一个简短的提示就可…

vivado license申请

AMD: Product Licensing

一分钟全方位认识飞速创软

公司简介 飞速软创专注于面向研发团队的一体化研发平台产品&#xff0c;倾力打造集高效与智能于一体的一体化研发平台产品。其根基深植于深圳这座科技之城&#xff0c;并已将业务版图拓展至北京、上海、珠海及香港等地&#xff0c;通过设立分公司和办事处&#xff0c;全方位覆盖…

音乐制作软件Studio One mac有哪些特点

Studio One mac是一款专业的音乐制作软件&#xff0c;该软件提供了全面的音频编辑和混音功能&#xff0c;包括录制、编曲、合成、采样等多种工具&#xff0c;可用于制作各种类型的音乐&#xff0c;如流行音乐、电子音乐、摇滚乐等。 Studio One mac软件特点 1. 直观易用的界面&…

胎牛血清,预计2028年达到27.5亿美元以上

胎牛血清是从胎牛的脐带或心脏中提取出的一种高营养的医疗用品。本文将从全球市场和中国市场两方面进行分析其发展趋势。 全球市场分析&#xff1a;胎牛血清在药品和生物科技行业中有着广泛的应用&#xff0c;如细胞培养、疫苗制备、诊断试剂盒和治疗药物等。随着生物技术的不断…

多台西门子PLC对接Oracle数据库,实现PLC与数据库双向数据通讯

智能网关IGT-DSER方便实现多台PLC与数据库之间的数据通讯&#xff0c;既可以读取PLC的数据上报到数据库&#xff0c;也可以从数据库查询数据后写入到PLC的寄存器。 网关安装在设备侧&#xff0c;与设备同时起停&#xff0c;不担心数据丢失&#xff1b;在断网、服务器维护上报数…

淘宝以图搜商品API调用详细步骤(apiKeysecret)

以图片来搜索商品是电商平台常见的一个功能&#xff0c;一般用于搜索同款、找爆品、淘宝拍立淘等功能。 通过item_search_img可以实现通过图片来搜索同款商品列表&#xff0c;响应参数包括宝贝标题、列表类型、宝贝图片、优惠价、价格、销量、宝贝ID、商品风格标识ID、掌柜昵称…

vue实现项目部署成功之后提示用户刷新页面

vue实现项目部署成功之后提示用户刷新页面 1. 项目根目录新建 version.js require("fs").writeFileSync("./public/version.txt", new Date().getTime().toString()) 2. 改写package.json中打包命令 "scripts": {"dev": "vue-cl…

CF1909_C. Heavy Intervals题解

CF1909_C. Heavy Intervals题解 题目传送门&#xff08;Problem - C - CodeforcesCodeforces. Programming competitions and contests, programming communityhttps://codeforces.com/contest/1909/problem/C&#xff09;。 题目翻译如下&#xff1a;&#xff08;图片来源&a…

STM32 CubeMX产生的程序架构

使用STM32CubeMX产生启动相关代码&#xff0c;配置各种外设。在后续程序开发过程中&#xff0c;有可能使用STM32CubeMX逐步产生使用的代码&#xff0c;为了将其产生的代码和我们程序隔离&#xff0c;一种可行的程序架构如下&#xff1a; 在此架构中&#xff0c;STM32CubeMX产生…

还在用if-else? 用策略模式干掉它

策略模式&#xff08;Strategy Pattern&#xff09; 策略模式是一种行为设计模式&#xff0c;它将一组行为转换为对象&#xff0c; 并使其在原始上下文对象内部能够相互替换。大白话就是比如我写一个登录业务&#xff0c;目前需要满足能通过系统内、微信等平台进行登录&#x…

前端页面锚点跳转

一&#xff0c;页面 二&#xff0c;获取需要跳转的标签class或者id 三&#xff0c;调用跳转方法 如果你的标签有唯一的ID&#xff0c;那么用getElementById方法更好 点击即可跳转锚点

在 Walrus 上轻松集成 OpenTofu

OpenTofu 是什么&#xff1f; OpenTofu 是一个开源的基础设施即代码&#xff08;IaC&#xff09;框架&#xff0c;被提出作为 Terraform 的替代方案&#xff0c;并由 Linux 基金会管理。OpenTofu 的问世为应对 HashiCorp 将 Terraform 的许可证从 Mozilla Public License v2.0…

内网穿透的应用-使用Docker本地部署可编辑导航页结合内网穿透实现远程访问

文章目录 1. 使用Docker搜索镜像2. 下载镜像3. 查看镜像4. 启动容器5. 浏览器访问6. 远程访问6.1 内网穿透工具安装6.2 创建远程连接公网地址6.3 使用固定二级子域名地址远程访问 今天和大家分享如何使用Docker本地部署一个开源的简约风格网址导航页&#xff0c;支持五种搜索引…

GeoServe本地部署结合内网穿透实现远程访问Web管理界面

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…

域名流量被劫持怎么办?如何避免域名流量劫持?

随着互联网不断发展&#xff0c;流量成为线上世界的巨大财富。然而一种叫做域名流量劫持的网络攻击&#xff0c;将会在不经授权的情况下控制或重定向一个域名的DNS记录&#xff0c;导致用户在访问一个网站时&#xff0c;被引导到另一个不相关的网站&#xff0c;从而劫持走原网站…