WPF 自定义DateControl DateTime控件

自定义日期控件，月份选择。如下是日期的一些效果图。

具体的样式、颜色可以根据下面的代码，自己调节即可

1、日期控件的界面

<UserControl x:Class="WpfApplication10.DateSelectControl"

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"

mc:Ignorable="d"

d:DesignHeight="210" d:DesignWidth="200" Loaded="MonthUserControl_OnLoaded">

    <UserControl.Resources>

        <Style x:Key="LbMontyStyle" TargetType="Label">

            <Setter Property="Foreground" Value="{Binding MonthForeGround}"></Setter>

            <Setter Property="VerticalContentAlignment" Value="Center"></Setter>

            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>

            <Setter Property="FontSize" Value="16"></Setter>

        </Style>

        <Style x:Key="ContentControlStyle" TargetType="RadioButton">

            <Setter Property="Height" Value="39"></Setter>

            <Setter Property="Margin" Value="0.2,0"></Setter>

            <Setter Property="Width" Value="55"></Setter>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RadioButton">

                        <Grid x:Name="T_Grid">

                            <Label Content="{TemplateBinding Content}" Style="{StaticResource LbMontyStyle}"></Label>

                        </Grid>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsMouseOver" Value="True">

                                <Setter TargetName="T_Grid" Property="Background" Value="#FF48CDF9"></Setter>

                            </Trigger>

                            <Trigger Property="IsChecked" Value="True">

                                <Setter TargetName="T_Grid" Property="Background" Value="DeepSkyBlue"></Setter>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

        <Grid.RowDefinitions>

            <RowDefinition Height="39"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <!--年份-->

        <Button x:Name="BtnPrevious" Click="BtnPrevious_OnClick" Grid.Row="0" Grid.Column="0">

            <Button.Template>

                <ControlTemplate>

                    <Grid x:Name="Main_Grid" VerticalAlignment="Center" HorizontalAlignment="Center" Height="26">

                        <Path x:Name="Path1" Stroke="#FF363FF3" StrokeThickness="5" Data="M0,13 20,0"></Path>

                        <Path x:Name="Path2" Stroke="#FF363FF3" StrokeThickness="5" Data="M0,11 20,24"></Path>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Trigger.Setters>

                                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>

                                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>

                            </Trigger.Setters>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Button.Template>

        </Button>

        <Button x:Name="BtnNext" Click="BtnNext_OnClick" Grid.Row="0" Grid.Column="2">

            <Button.Template>

                <ControlTemplate TargetType="Button">

                    <Grid x:Name="Main_Grid" VerticalAlignment="Center" HorizontalAlignment="Center" Height="26">

                        <Path x:Name="Path1" Stroke="#FF363FF3" StrokeThickness="5" Data="M20,13 0,0"></Path>

                        <Path x:Name="Path2" Stroke="#FF363FF3" StrokeThickness="5" Data="M20,11 0,24"></Path>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Trigger.Setters>

                                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>

                                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>

                            </Trigger.Setters>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Button.Template>

        </Button>

        <TextBlock x:Name="TblYear" Style="{x:Null}" Grid.Row="0" Grid.Column="1" Text="2016" FontSize="16" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>

        <!--月份-->

        <RadioButton x:Name="BtnMonth1" Grid.Row="1" Grid.Column="0" Content="1月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth2" Grid.Row="1" Grid.Column="1" Content="2月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth3" Grid.Row="1" Grid.Column="2" Content="3月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth4" Grid.Row="2" Grid.Column="0" Content="4月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth5" Grid.Row="2" Grid.Column="1" Content="5月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth6" Grid.Row="2" Grid.Column="2" Content="6月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth7" Grid.Row="3" Grid.Column="0" Content="7月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth8" Grid.Row="3" Grid.Column="1" Content="8月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth9" Grid.Row="3" Grid.Column="2" Content="9月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth10" Grid.Row="4" Grid.Column="0" Content="10月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth11" Grid.Row="4" Grid.Column="1" Content="11月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

        <RadioButton x:Name="BtnMonth12" Grid.Row="4" Grid.Column="2" Content="12月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>

    </Grid>

</UserControl>

2、日期控件的后台

 public partial class DateSelectControl : UserControl

    {

        public DateSelectControl()

        {

            InitializeComponent();

        }

        public Brush MonthForeGround

        {

            get { return (Brush)GetValue(MonthForeGroundProperty); }

            set { SetValue(MonthForeGroundProperty, value); }

        }

        public static readonly DependencyProperty MonthForeGroundProperty =

        DependencyProperty.Register("MonthForeGround",

        typeof(Brush), typeof(DateSelectControl), new PropertyMetadata(Brushes.White));

        public DateTime Value

        {

            get { return (DateTime)GetValue(ValueProperty); }

            set

            {

                SetValue(ValueProperty, value);

            }

        }

        public static readonly DependencyProperty ValueProperty =

        DependencyProperty.Register("Value",

        typeof(DateTime), typeof(DateSelectControl), new PropertyMetadata(DateTime.Now));

        private void MonthUserControl_OnLoaded(object sender, RoutedEventArgs e)

        {

            var data = new MonthUserControlModel()

            {

                MonthForeGround = MonthForeGround,

            };

            TblYear.Text = Value.Year.ToString();

            int month = Value.Month;

            switch (month)

            {

                case :

                    {

                        BtnMonth1.IsChecked = true;

                    }

                    break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

                case :

                    {

                        BtnMonth2.IsChecked = true;

                    } break;

            }

            this.DataContext = data;

        }

        private void BtnPrevious_OnClick(object sender, RoutedEventArgs e)

        {

            int month = Value.Month;

            int year = Convert.ToInt32(TblYear.Text) - ;

            var newDate = new DateTime(year, month, );

            Value = newDate;

            TblYear.Text = year.ToString();

        }

        private void BtnNext_OnClick(object sender, RoutedEventArgs e)

        {

            int month = Value.Month;

            int year = Convert.ToInt32(TblYear.Text) + ;

            var newDate = new DateTime(year, month, );

            Value = newDate;

            TblYear.Text = year.ToString();

        }

        private void ButtonMonth_OnClick(object sender, RoutedEventArgs e)

        {

            int year = Value.Year;

            var button = sender as RadioButton;

            int month = Convert.ToInt32(button.Content.ToString().Replace("月", ""));

            var newDate = new DateTime(year, month, );

            Value = newDate;

        }

    }

    public class MonthUserControlModel

    {

        public Brush MonthForeGround { get; set; }

        public string Year { get; set; }

        public int Month { get; set; }

    }

3、界面引用

一般我们通过弹窗的方式，来选择日期

    <Button x:Name="BtnDateTime" HorizontalAlignment="Center" Margin="20,0" Content="时间选择" Foreground="White" Background="#FF23C5FB" Width="80" Height="32" Click="BtnDateTime_OnClick"></Button>

    <Popup x:Name="DateTimePopup" Placement="Top" VerticalOffset="0" PopupAnimation="Fade" Width="200" Height="280" PlacementTarget="{Binding ElementName=BtnDateTime}" StaysOpen="True" IsOpen="False" AllowsTransparency="True">

        <Grid Background="CornflowerBlue">

            <Grid Margin="2">

                <Grid.RowDefinitions>

                    <RowDefinition Height="30"></RowDefinition>

                    <RowDefinition Height="*"></RowDefinition>

                    <RowDefinition Height="50"></RowDefinition>

                </Grid.RowDefinitions>

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition></ColumnDefinition>

                        <ColumnDefinition Width="40"></ColumnDefinition>

                    </Grid.ColumnDefinitions>

                    <TextBlock Text="选择月份" Foreground="DeepSkyBlue" FontSize="18" VerticalAlignment="Center" Margin="15,0"></TextBlock>

                    <Button x:Name="BtnDateTimePopupClose" ToolTip="关闭" Grid.Column="1" HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center" Click="BtnDateTimePopupClose_OnClick">

                        <Button.Template>

                            <ControlTemplate TargetType="Button">

                                <Grid x:Name="Main_Grid">

                                    <Path Stroke="White" StrokeThickness="3" Data="M0,0 L15,15"></Path>

                                    <Path Stroke="White" StrokeThickness="3" Data="M15,0 L0,15"></Path>

                                </Grid>

                                <ControlTemplate.Triggers>

                                    <Trigger Property="IsMouseOver" Value="True">

                                        <!--<Setter TargetName="Main_Grid" Property="Background" Value="#FFE2E2E2"></Setter>-->

                                    </Trigger>

                                </ControlTemplate.Triggers>

                            </ControlTemplate>

                        </Button.Template>

                    </Button>

                </Grid>

                <wpfApplication10:DateSelectControl Grid.Row="1" HorizontalAlignment="Center"></wpfApplication10:DateSelectControl>

                <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,10,15" Content="确定" Foreground="White" Background="#FF23C5FB" Width="80" Height="32"></Button>

            </Grid>

        </Grid>

    </Popup>

GitHub代码下载：https://github.com/Kybs0/DateControl

WPF 自定义DateControl DateTime控件的更多相关文章

WPF 自定义DateControl DateTime控件(转)
自定义日期控件,月份选择.如下是日期的一些效果图. 具体的样式.颜色可以根据下面的代码,自己调节即可 1.日期控件的界面 <UserControl x:Class="WpfApp ...
WPF自定义选择年月控件详解
本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下封装了一个选择年月的控件,XAML代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
WPF自定义DataGrid分页控件
新建Custom Control,名:PagingDataGrid 打开工程下面的Themes\Generic.xaml xaml里面代码替换如下 <Style x:Key="{x:T ...
WPF自定义数字输入框控件
要求:只能输入数字和小数点,可以设置最大值,最小值,小数点前长度,小数点后长度(支持绑定设置): 代码如下: using System; using System.Collections.Generi ...
WPF自定义轮播控件
闲得蛋疼做了一个WPF制作轮播动画(随机动画),勉强可以看,写个随笔留个脚印. 效果图:
WPF自定义下拉控件
可以搜索的下拉条 using System; using System.Collections; using System.Collections.Generic; using System.Coll ...
WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...
【转】WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 下拉选择控件ComboBox的自定义样式及扩展: 自定义多选控件Mul ...
WPF 自定义ComboBox样式，自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...

随机推荐

自建Ngrok服务与使用方法
ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.可以被使用来进行微信借口的本地调试.在ng ...
CRL2.3(ORM开发框架)源码github发布
简介 CRL是一个面向对象的轻便型ORM业务框架此框架追求的是使用简单,方便,因此设计为: 不需要代码生成器生成对象类,按标准方式写即可依托lambda,实现语法解析转换为等效的SQL查询,完全以 ...
c# 检测操作系统版本
我们通过System.Environment.OSVersion.Version获得操作系统的版本号,然后再根据版本号进行判断操作系统是什么版本 Version 类的属性 Operating syst ...
跟我学习NHibernate (1)
引言:Nibernate概述 NHibernate是一个ORM框架,NHibernate是一个把C#对象世界和关系世界数据库之间联系起来的一座桥梁.NHibernate 能自动映射实体模型到数据库,所 ...
GO语言之channel
前言: 初识go语言不到半年,我是一次偶然的机会认识了golang这门语言,看到他简洁的语法风格和强大的语言特性,瞬间有了学习他的兴趣.我是很看好go这样的语言的,一方面因为他有谷歌主推,另一方面他确 ...
Basic Tutorials of Redis(2) - String
This post is mainly about how to use the commands to handle the Strings of Redis.And I will show you ...
JSON扩展类——JsonHelper
1.引用Newtonsoft.Json库(JSON.NET). 2.复制粘贴JsonHelper吧. 源代码: using System; using System.Collections.Gener ...
ASP.NET Core Kestrel部署HTTPS
ASP.NET Core配置 Kestrel部署HTTPS.现在大部分网站已经部署HTTPS,大家对于安全越来越重视. 今天简单介绍一下ASP.NET Core 部署HTTPS,直接通过配置Kestr ...
基于redis的处理session的方法
一个基于redis的处理session的方法,如下. <?php class Session_custom { private $redis; // redis实例 private $prefi ...
php实现设计模式之策略模式
策略模式:定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化.是一种行为模式. 策略模式包含三种角色 1 抽象策略角色: 策略类,通常由一个接口或 ...

WPF 自定义DateControl DateTime控件

WPF 自定义DateControl DateTime控件的更多相关文章

随机推荐

热门专题