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属性可以切换控件状态. 先看基本样 ...

随机推荐

vue源码解析阅读列表
https://zhuanlan.zhihu.com/p/24435564 开发vue(或类似的MVVM框架)的过程中,需要面对的主要问题有哪些? 剖析vue实现原理,自己动手实现mvvm 官网介绍
IOC的理解
转载http://www.cnblogs.com/xdp-gacl/p/4249939.html 很不错的文章,虽说是java的,但是.net也通用,所以复制一分,拿来看看挺不错的. 1.1.IoC是 ...
初识 Sql Server存储过程
开篇语之前的公司并未使用存储过程来做项目,所以小生对存储过程的调用.使用也是一知半解,刚好这家公司就大量用到了存储过程这次做的功能,为了保持风格一致,也是需要使用存储过程来实现动态sql和数据分页 ...
Log4net入门（日志文件篇）
在上一篇Log4net入门(控制台篇)中,我们将日志信息输出到控制台中,在这一篇中,我们将描述如何将日志信息写到文件中.要将日志信息写入文件非常简单,只需要在Log4net.config配置文件中添加 ...
JQuery知识点总结
一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...
spring boot(一)：入门篇
构建微服务:Spring boot 入门篇什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框 ...
简单封装分页功能pageView.js
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
NavisWorks Api 简单使用与Gantt
相信很多朋友在做BIM项目的时候.都有客户会提出项目计划,形象进度等需求. 那么当前最主要的问题就是计划与BIM模型的关联问题.那么我在项目中是用户用Project软件编辑计划然后手动跟三维模型关联 ...
通过向页面写html代码导出excel
//excel文件名 string filename = "考勤汇总"; StringBuilder ExcelHtml = new StringBuilder(); ExcelH ...
C语言实现2个大数相加。
#include<stdio.h>#include<string.h>int main(){ char s1[100],s2[100]; int num1[31], ...

WPF 自定义DateControl DateTime控件

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

随机推荐

热门专题