备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

WPF 自定义DateControl DateTime控件

2016-09-04 604
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 自定义日期控件，月份选择。如下是日期的一些效果图。 具体的样式、颜色可以根据下面的代码，自己调节即可    1、日期控件的界面 ...

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

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

  

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>
View Code

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 1:
                    {
                        BtnMonth1.IsChecked = true;
                    }
                    break;
                case 2:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 3:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 4:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 5:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 6:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 7:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 8:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 9:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 10:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 11:
                    {
                        BtnMonth2.IsChecked = true;
                    } break;
                case 12:
                    {
                        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) - 1;
            var newDate = new DateTime(year, month, 1);
            Value = newDate;
            TblYear.Text = year.ToString();
        }

        private void BtnNext_OnClick(object sender, RoutedEventArgs e)
        {
            int month = Value.Month;
            int year = Convert.ToInt32(TblYear.Text) + 1;
            var newDate = new DateTime(year, month, 1);
            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, 1);
            Value = newDate;
        }
    }

    public class MonthUserControlModel
    {
        public Brush MonthForeGround { get; set; }
        public string Year { get; set; }
        public int Month { get; set; }
    }
View Code

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>
View Code

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

 

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
文章标签：
C#
关键词：
wpf控件
wpf自定义
wpf自定义datetime
@winter
目录
相关文章
追逐时光者
|
10天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
38 0
老码识途
|
4月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
59 1
Rick_1/2
|
8月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
450 0
Rick_1/2
|
8月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件，它可以显示富文本格式的文本，支持多种文本处理操作。
Rick_1/2
344 0
老码识途
|
4月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道，画图软件分为两部分，左侧图形库，存放各种图标，右侧是一个画布，将左侧图形库的图标控件拖拽到右侧画布，就会生成一个新的控件，并且可以自由拖动。那如何在WPF程序中，实现类似的功能呢？今天就以一个简单的小例子，简述如何在WPF中实现控件的拖拽和拖动，仅供学习分享使用，如有不足之处，还请指正。
老码识途
105 2
Rick_1/2
|
8月前
|
数据挖掘 数据处理 C#
WPF技术之DataGrid控件
WPF DataGrid是一种可以显示和编辑数据的界面控件。它可以作为表格形式展示数据，支持添加、删除、修改、排序和分组操作。
Rick_1/2
173 0
追逐时光者
|
10天前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
追逐时光者
127 0
老码识途
|
5月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
老码识途
94 8
Rick_1/2
|
8月前
|
定位技术 C# UED
WPF技术之ScrollViewer控件
WPF ScrollViewer是WPF中常用的一个控件，它提供了滚动视图的功能，可用于显示超出容器可视区域的内容。ScrollViewer通常用于容纳大量内容的控件，以在有限的空间内显示这些内容，并允许用户通过滚动来查看隐藏的部分。
Rick_1/2
690 0
Rick_1/2
|
8月前
|
前端开发 C#
WPF技术之ContentControl 控件
ContentControl 是 WPF 中的一个常见控件，用于显示单个内容元素。它可以包含任意类型的内容，包括文本、图像、控件等。
Rick_1/2
761 0
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4