WPF Custom Datecontrol datetime control (GO)

Custom date control, month selection. Here are some of the dates.

The specific style, color can be adjusted according to the following code

1. The interface of the date control

<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/ "Mc:ignorable=" D "d:designheight=" d:designwidth= "loaded=" monthusercontrol_onloaded "> < usercontrol.resources> <style x:key= "Lbmontystyle" targettype= "Label" > <setter property= "for Eground "value=" {Binding monthforeground} "></Setter> <setter property=" Verticalcontentalignment "Va Lue= "center" ></Setter> <setter property= "horizontalcontentalignment" value= "center" ></setter&            Gt <setter property= "FontSize" value= "></Setter> </Style> <style x:key=" ContentControls Tyle "targettype=" RadioButton "> <setter property=" Height "value=" 39 "></Setter> <setter property=" Margin "value=" 0.2,0 "></Setter> <setter prope Rty= "Width" value= "$" ></Setter> <setter property= "Template" > <setter.value&gt                    ;                            <controltemplate targettype= "RadioButton" > <grid x:name= "T_grid" >                        <label content= "{TemplateBinding Content}" style= "{StaticResource Lbmontystyle}" ></Label> </Grid> <ControlTemplate.Triggers> <trigger Prop Erty= "IsMouseOver" value= "True" > <setter targetname= "T_grid" property= "Background" Va Lue= "#FF48CDF9" ></Setter> </Trigger> <trigger Prop Erty= "IsChecked" value= "True" > <setter targetname= "T_grid" property= "Background" Valu E= "Deepskyblue "></Setter> </Trigger> </controltemplate.tr        iggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <grid horizontalalignment= "center" verticalalignment= "center" &G        T <Grid.RowDefinitions> <rowdefinition height= "" "></RowDefinition> <rowdefinitio            n 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> <co Lumndefinition Width= "Auto" ></ColumnDefinition> </Grid.ColumnDefinitions> <!--year-<button                X:name= "btnprevious" click= "Btnprevious_onclick" grid.row= "0" grid.column= "0" > <Button.Template> <ControlTemplate> <grid x:name= "Main_grid" verticalalignment= "Center" Horizontalali Gnment= "Center" height= "> <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> &Lt Setter targetname= "Path1" property= "Stroke" value= "#FF0A15F9" ></Setter> </trigger.s etters> </Trigger> </ControlTemplate.Triggers> &lt ;/controltemplate> </Button.Template> </Button> <button x:name= "Btnnext" click= "Btnnext_onclick" grid.row= "0" grid.column= "2" > <Button.Template> <controltemplate T Argettype= "button" > <grid x:name= "Main_grid" verticalalignment= "Center" horizontalalignment= "Cent ER "height=" > <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> </cont roltemplate> </Button.Template> </Button> <textblock x:name= "Tbl Year "style=" {x:null} "grid.row=" 0 "grid.column=" 1 "text=" "fontsize=" "foreground=" and "white" horizontalalignment=  "Center" verticalalignment= "center" ></TextBlock> <!--month--<radiobutton x:name= "BtnMonth1" grid.row= "1" grid.column= "0" content= "January" click= "Buttonmonth_onclick" style= "{StaticResource Contentcontrolstyle}" ></RadioButton> <RadioButton x:name= "BtnMonth2" grid.row= "1" grid.column= "1" content= "February" click= "Buttonmonth_onclick" style= "{ StaticResource Contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth3 "grid.row=" 1 "grid.c Olumn= "2" content= "March" click= "Buttonmonth_onclick" style= "{StaticResource Contentcontrolstyle}" ></ radiobutton> <radiobutton x:name= "BtnMonth4" grid.row= "2" grid.column= "0" content= "April" click= "Buttonmonth_onc Lick "style=" {StaticResource contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth5 "Grid. row= "2" grid.column= "1" content= "May" click= "Buttonmonth_onclick" style= "{StaticResource Contentcontrolstyle}" > </RadioButton> <radiobutton x:name= "BtnMonth6" grid.row= "2" grid.column= "2" content= "June" click= "Buttonmont  H_onclick "style=" {StaticResource contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth7 " grid.row= "3" grid.column= "0" content= "July" click= "Buttonmonth_oncLick "style=" {StaticResource contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth8 "Grid. row= "3" grid.column= "1" content= "August" click= "Buttonmonth_onclick" style= "{StaticResource Contentcontrolstyle}" > </RadioButton> <radiobutton x:name= "BtnMonth9" grid.row= "3" grid.column= "2" content= "September" click= "Buttonmont H_onclick "style=" {StaticResource contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth10 "Grid.row=" 4 "grid.column=" 0 "content=" October "click=" Buttonmonth_onclick "style=" {StaticResource Contentcontrolstyle} "></RadioButton> <radiobutton x:name=" BtnMonth11 "grid.row=" 4 "grid.column=" 1 "content=" November "click=" but Tonmonth_onclick "style=" {StaticResource contentcontrolstyle} "></RadioButton> <radiobutton x:name=" Btn Month12 "grid.row=" 4 "grid.column=" 2 "content=" December "click=" Buttonmonth_onclick "style=" {StaticResource Contentcontrolstyle} "></RadioButton> &LT;/GRID&GT;</usercontrol> 

2. Background of the date control

 Public partial class Dateselectcontrol:usercontrol {public Dateselectcontrol () {Initializ        Ecomponent ();            } public Brush Monthforeground {get {return (Brush) GetValue (monthforegroundproperty);}        set {SetValue (Monthforegroundproperty, value);} } public static readonly DependencyProperty Monthforegroundproperty = Dependencyproperty.register ("Monthfore        Ground ", 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: {btnmonth2.ischecked = true;                } break;                    Case one: {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)-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 ("Month", ""));            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. Interface Reference

Usually we choose the date by the way of the popup window.

    <button x:name= "Btndatetime" horizontalalignment= "Center" margin= "20,0" content= "Time Selection" foreground= "white" Background= "#FF23C5FB" width= "height=" click= "Btndatetime_onclick" ></Button> <popup x:name= " Datetimepopup "placement=" Top "verticaloffset=" 0 "popupanimation=" Fade "width=" $ "height=" 280 "placementtarget=" { Binding elementname=btndatetime} "staysopen=" true "isopen=" False "allowstransparency=" true "> <grid Background = "Cornflowerblue" > <grid margin= "2" > <Grid.RowDefinitions> &lt ; RowDefinition height= "></RowDefinition> <rowdefinition height=" * "></rowdefinition&                    Gt <rowdefinition height= "></RowDefinition> </Grid.RowDefinitions> <gri D> <Grid.ColumnDefinitions> <columndefinition></columndefiniti                  On>      <columndefinition width= "></ColumnDefinition> </Grid.ColumnDefinitions> <textblock text= "Select Month" foreground= "Deepskyblue" fontsize= "" verticalalignment= "Center" margin= "15,0" &G t;</textblock> <button x:name= "Btndatetimepopupclose" tooltip= "Off" grid.column= "1" HorizontalA                        Lignment= "center" background= "Transparent" verticalalignment= "center" click= "Btndatetimepopupclose_onclick" >                                <Button.Template> <controltemplate targettype= "button" > <grid x:name= "Main_grid" > <path stroke= "White" strokethicknes s= "3" data= "m0,0 l15,15" ></Path> <path stroke= "White" strokethickness= "3" D Ata= "m15,0 l0,15" ></Path> </Grid> <control   Template.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=" OK "foreground=" white "background=" #FF23C5FB "width=" "height=" ></Button> </g Rid> </Grid> </Popup>

GitHub code Download: Https://github.com/Kybs0/DateControl

WPF Custom Datecontrol datetime control (GO)