wyvern010
Topic Author
Posts: 31
Joined: 18 Apr 2019, 13:41

DateTimePicker

16 Dec 2019, 12:56

Created my own DateTimePicker:
Image
xaml:
<UserControl x:Class="AgendaBilling.CustomControls.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:AgendaBilling.CustomControls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderThickness" Value="1"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" Value="White"/>
                    <Setter Property="BorderThickness" Value="1"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#99999999"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="#AAAAAAAA"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <DockPanel LastChildFill="False">
            <Button x:Name="PrevMonth" Click="PrevMonth_Click" Width="20" Height="20" DockPanel.Dock="Left" BorderThickness="0" Background="Transparent" Foreground="White" Content="&lt;"/>
            <Button x:Name="NextMonth" Click="NextMonth_Click" Width="20" Height="20" DockPanel.Dock="Right" BorderThickness="0" Background="Transparent" Foreground="White" Content="&gt;"/>
            <TextBox Text="{Binding SelectedDateString}" Foreground="White" FontSize="14" HorizontalAlignment="Left" IsHitTestVisible="False" Background="Transparent" BorderThickness="0"/>
            <TextBox Text="{Binding Minutes}" Foreground="White" FontSize="14" DockPanel.Dock="Right" Background="Transparent" BorderThickness="0"/>
            <TextBox Text=":" Foreground="White" FontSize="14"  DockPanel.Dock="Right" IsHitTestVisible="False" Background="Transparent" BorderThickness="0"/>
            <TextBox Text="{Binding Hours}" Foreground="White" FontSize="14" DockPanel.Dock="Right" Background="Transparent" BorderThickness="0"/>
        </DockPanel>
        <Grid x:Name="DaysBorder" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border>
                <TextBlock x:Name="Day_1" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="1" >
                <TextBlock x:Name="Day_2" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="2" >
                <TextBlock x:Name="Day_3" Grid.Column="2" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="3" >
                <TextBlock x:Name="Day_4"  PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="4" >
                <TextBlock x:Name="Day_5" Grid.Column="4" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="5" >
                <TextBlock x:Name="Day_6"  PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Column="6" >
                <TextBlock x:Name="Day_7"  PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" >
                <TextBlock x:Name="Day_8"   PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="1" >
                <TextBlock x:Name="Day_9" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="2" >
                <TextBlock x:Name="Day_10" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="3" >
                <TextBlock x:Name="Day_11" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="4" >
                <TextBlock x:Name="Day_12" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="5" >
                <TextBlock x:Name="Day_13" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="1" Grid.Column="6" >
                <TextBlock  x:Name="Day_14" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" >
                <TextBlock  x:Name="Day_15" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="1" >
                <TextBlock  x:Name="Day_16" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="2" >
                <TextBlock  x:Name="Day_17" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="3" >
                <TextBlock  x:Name="Day_18" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="4" >
                <TextBlock  x:Name="Day_19" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="5" >
                <TextBlock  x:Name="Day_20" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="2" Grid.Column="6" >
                <TextBlock  x:Name="Day_21" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" >
                <TextBlock  x:Name="Day_22" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="1" >
                <TextBlock  x:Name="Day_23" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="2" >
                <TextBlock  x:Name="Day_24" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="3" >
                <TextBlock  x:Name="Day_25" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="4" >
                <TextBlock  x:Name="Day_26" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="5" >
                <TextBlock x:Name="Day_27" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="3" Grid.Column="6">
                <TextBlock x:Name="Day_28" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" >
                <TextBlock x:Name="Day_29" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="1" >
                <TextBlock x:Name="Day_30" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="2" >
                <TextBlock x:Name="Day_31" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="3" >
                <TextBlock x:Name="Day_32" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="4" >
                <TextBlock x:Name="Day_33" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="5" >
                <TextBlock x:Name="Day_34" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
            <Border Grid.Row="4" Grid.Column="6" >
                <TextBlock x:Name="Day_35" PreviewMouseLeftButtonDown="DateTimePicker_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="DateTimePicker_PreviewMouseLeftButtonUp"></TextBlock>
            </Border>
        </Grid>
    </Grid>
</UserControl>
.cs:
#if NOESIS
using Noesis;
#else
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
#endif
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading;

namespace AgendaBilling.CustomControls
{
    /// <summary>
    /// Interaction logic for DateTimePicker.xaml
    /// </summary>
    public partial class DateTimePicker : UserControl, INotifyPropertyChanged
    {

        public event EventHandler<DateTime> DateChanged;
        DateTime selecteddate;
        public DateTimePicker()
        {
            InitializeComponent();
            FillGridForMonth(SelectedDate);
            SelectedDate = DateTime.Now.AddMinutes(-DateTime.Now.Minute).AddHours(-DateTime.Now.Hour);
        }

        private void PrevMonth_Click(object sender, RoutedEventArgs e)
        {
            SelectedDate = selecteddate.AddMonths(-1);
            SelectedDateString = null;
            FillGridForMonth(SelectedDate);
        }

        private void NextMonth_Click(object sender, RoutedEventArgs e)
        {
            SelectedDate = selecteddate.AddMonths(1);
            SelectedDateString = null;
            FillGridForMonth(SelectedDate);
        }


        object ButtonDownSender = null;
        private void DateTimePicker_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs args)
        {
            if (sender == ButtonDownSender)
            {
                Console.WriteLine($"Clicked on Day: {((TextBlock)sender).Text}");
                int parsed;
                if (int.TryParse(((TextBlock)sender).Text, out parsed))
                {

                    SelectedDate = new DateTime(selecteddate.Year, selecteddate.Month, parsed, selecteddate.Hour, selecteddate.Minute, 0, 0);
                    SelectedDateString = null;
                }
            }
        }

        private void DateTimePicker_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs args)
        {
            ButtonDownSender = sender;
        }


        private void FillGridForMonth(DateTime dateTime)
        {
            int totalDays = DateTime.DaysInMonth(dateTime.Year, dateTime.Month);
            // create grid with the days;
            int i = 0;
            for (i = 1; i < 36; i++)
            {
                TextBlock textBlock = (TextBlock)FindName($"Day_{i}");
                if (textBlock == null)
                    return;
                if (i < totalDays + 1)
                {
                    textBlock.Text = i.ToString();
                    textBlock.IsHitTestVisible = true;
                }
                else
                {
                    textBlock.Text = "";
                    textBlock.IsHitTestVisible = false;
                }

            }
        }

        public string Hours
        {
            get { return SelectedDate.Hour.ToString("00"); }
            set 
            {
                int Input;
                if (int.TryParse(value, out Input))
                {
                    if (Input > -1 && Input < 25)
                    {
                        SelectedDate = new DateTime(selecteddate.Year,
                            selecteddate.Month,
                            selecteddate.Day,
                            Input,
                            selecteddate.Minute, 0, 0);
                        OnPropertyChanged();
                    }
                }
            }
        }

        public string Minutes
        {
            get { return SelectedDate.Minute.ToString("00"); }
            set 
            {
                int Input;
                if (int.TryParse(value, out Input))
                {
                    if (Input > -1 && Input < 59)
                    {
                        SelectedDate = new DateTime(selecteddate.Year,
                            selecteddate.Month,
                            selecteddate.Day,
                            selecteddate.Hour,
                            Input,0, 0);
                        OnPropertyChanged();
                    }
                }
            }
        }

        public DateTime SelectedDate
        {
            get { return selecteddate; }
            set { selecteddate = value; OnPropertyChanged(); DateChanged?.Invoke(this, selecteddate); }
        }

        public string SelectedDateString
        {
            get { return selecteddate.ToString("dd MM yyyy"); }
            set { OnPropertyChanged(); }
        }

        public string StartDay
        {
            get { return null; }
            set
            {
                int day = int.Parse(value);
                SelectedDate = new DateTime(selecteddate.Year, selecteddate.Month, day == 0 ? selecteddate.Day : day, selecteddate.Hour, selecteddate.Minute, 0, 0);
                SelectedDateString = null;
            }
        }

        DataTemplate dataTemplate { get; set; }

#if NOESIS
        Grid DaysBorder;

        private void InitializeComponent()
        {
            GUI.LoadComponent(this, "CustomControls/DateTimePicker.xaml");
            DataContext = this;
            DaysBorder = (Grid)FindName("DaysBorder");
        }

        protected override bool ConnectEvent(object source, string eventName, string handlerName)
        {
            if (eventName == "Click")
            {
                if (handlerName == "PrevMonth_Click")
                {
                    ((Button)source).Click += PrevMonth_Click;
                    return true;
                }
                if (handlerName == "NextMonth_Click")
                {
                    ((Button)source).Click += NextMonth_Click;
                    return true;
                }
            }
            if (eventName == "PreviewMouseLeftButtonDown" && handlerName == "DateTimePicker_PreviewMouseLeftButtonDown")
            {
                ((TextBlock)source).PreviewMouseLeftButtonDown += DateTimePicker_PreviewMouseLeftButtonDown;
                return true;
            }
            if (eventName == "PreviewMouseLeftButtonUp" && handlerName == "DateTimePicker_PreviewMouseLeftButtonUp")
            {
                ((TextBlock)source).PreviewMouseLeftButtonUp += DateTimePicker_PreviewMouseLeftButtonUp;
                return true;
            }

            return false;
        }

#endif
        #region NotifypropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        protected virtual bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = "")
        {
            if (EqualityComparer<T>.Default.Equals(storage, value))
                return false;
            storage = value;
            this.OnPropertyChanged(propertyName);
            return true;
        }
        #endregion

    }
}

 
User avatar
jsantos
Site Admin
Posts: 4063
Joined: 20 Jan 2012, 17:18
Contact:

Re: DateTimePicker

16 Dec 2019, 19:03

Thanks for sharing this!

Who is online

Users browsing this forum: No registered users and 5 guests