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 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; }
    }

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

时间： 2024-10-10 12:31:27

WPF 自定义DateControl DateTime控件(转)的相关文章

WPF 自定义DateControl DateTime控件

自定义日期控件,月份选择.如下是日期的一些效果图. 具体的样式.颜色可以根据下面的代码,自己调节即可    1.日期控件的界面 <UserControl x:Class="WpfApplication10.DateSelectControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/w

WPF自定义数字输入框控件

要求:只能输入数字和小数点,可以设置最大值,最小值,小数点前长度,小数点后长度(支持绑定设置): 代码如下: 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows; 7 using System.Windows.Controls; 8 using Syst

WPF自定义button按钮控件

一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法.下面话不多说了,来一起看看详细的介绍吧. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动. 2.1 普通按钮-扁平化风格 先看效果: 定义Button的样式,详见代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2

WPF自定义轮播控件

 闲得蛋疼做了一个WPF制作轮播动画,勉强可以看,写个随笔留个脚印.  源码:有需要的可留言.  效果图:

WPF学习- AllowDrop 用户控件启用拖放功能

知识点: 创建自定义用户控件(UserControl) 使用户控件成为拖动源 使用户控件成为放置目标 使面板能够接收从用户控件放置的数据 创建项目: 1.新建WPF项目(Wpf-AllowDrop) 2.在MainWindow.xaml的 Grid控件添加源码 <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Sta

WPF Adorner+附加属性 实现控件友好提示

标题太空泛,直接上图 无论是在验证啊,还是提示方面等一些右上角的角标之类的效果,我们会怎么做? 这里介绍一种稍微简单一些的方法,利用附加属性和Adorner来完成. 例如WPF自带的控件上要加这样的效果,首先继承自原控件然后重写是可以的,但是控件类型太多,重写不过来.这个时候我们唯一能添加的只有附加属性了. 利用附加属性的属性变更事件PropertyChangedCallBack,我们可以获取到宿主对象即Button,然后就可以往Button上加入我们自定义的Adorner了.再添加一个附加属性

WPF中的ControlTemplate(控件模板)(转)

原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/28/690993.html WPF中的ControlTemplate(控件模板)                                                                                                                        周银辉 WPF包含数据模板和控件模板,其中控件模板又包括Contro

WPF 使用附加属性增加控件属性

原文:WPF 使用附加属性增加控件属性 使用附加属性增加控件属性,使得这个附加属性在使用的时候没有局限性,可以在任何的控件中使用它来增加所需要的属性,使得控件的属性使用起来非常灵活 一.自定义附加属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

WPF 中动态改变控件模板

在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按钮是加载新的资源字典,并使用新加载的资源字典替代当前的资源字典这时要用到ResourceManager. 假设现有两个不同的资源字典文件Dictionary1.xaml和Dictionary2.xaml存在于Themes文件夹内: 在MainPage中使用其中一个资源字典作为默认样式文件: <Win