WPF custom Controls with styles (5)-calendar/datepicker date control custom styles and extensions (GO)

A Objective

Disclaimer : WPF custom controls and styles are a series of articles, before and after some related, but mostly in accordance with the order from simple to complex gradually released, etc., if you do not understand where you can refer to the previous articles in this series, at the end of the article is accompanied by some links.

The main content of this article:

• Calendar control calendars custom style;
• Date control DatePicker custom style, and label label, Watermark, clear date function extension;

Two Calendar Custom Style

First look at the effect:

As can be seen from the above figure, the calendar display actually has three kinds of states, such as the following decomposition diagram:

• The display of the "Day" part;
• The display of the "Month" section;
• The display of the "Year" section;

So a full calendar contains multiple parts, first the style of the "Day" button:

View Code

Calendar Date Panel Style:

View Code

Year/month button style:

View Code

Finally, combining the above styles, defining the calendar style we need is a step away.

    <!--default Calendar style--<style x:key= "Defaultcalendar" targettype= "{x:type calendar}" > <setter property = "Snapstodevicepixels" value= "True"/> <setter property= "Foreground" value= "{StaticResource textforeground}" /> <setter property= "Calendardaybuttonstyle" value= "{StaticResource calendardaybuttonstyle}"/> &lt ; Setter property= "Calendaritemstyle" value= "{StaticResource calendaritemstyle}"/> <setter property= "Calendarb Uttonstyle "value=" {StaticResource calendarbuttonstyle} "/> <setter property=" Background "value=" {Staticresou        Rce popupbackground} "/> <setter property=" BorderBrush "value=" {StaticResource controlborderbrush} "/> <setter property= "BorderThickness" value= "1"/> <setter property= "FontSize" value= "/> &l" T Setter property= "FontFamily" value= "{StaticResource FontFamily}"/> <setter property= "istodayhighlighted" Val      Ue= "True"/>  <setter property= "Template" > <Setter.Value> <controltemplate targettype= "{X:typ E Calendar} "> <stackpanel x:name=" part_root "horizontalalignment=" Center "background=" Transparent "> <calendaritem x:name=" Part_calendaritem "borderbrush=" {TemplateBinding BorderBrush} "FontS                                      Ize= "{TemplateBinding FontSize}" fontfamily= "{TemplateBinding FontFamily}"                                      borderthickness= "{TemplateBinding borderthickness}" background= "{TemplateBinding Background}" Style= "{TemplateBinding calendaritemstyle}"/> &LT;/STACKPANEL&G                T </ControlTemplate> </Setter.Value> </Setter> </Style>

Three DatePicker custom style, and label label, Watermark, clear date feature extension

With the above calendar style, the following do DatePicker style is good to do, in fact, is Textbox+button+calendar. The implementation of the previous one (WPF custom control and Style (3)-textbox & RichTextBox & passwordbox style) is basically the same, so this article does not do more explanation, Refer to the previous articles in this series (links at the end of the appendix) to see:

3.1 DatePicker Custom Styles

Basic style definition:

View Code

Watermark Effect:

Examples of Use:

            <datepicker margin= "3" core:controlattachproperty.watermark= "damn fast input Date"/>            <datepicker Margin= "3" Selecteddate= "{x:static system:DateTime.Today}"/>            <datepicker margin= "3" isenabled= "False" selecteddate= "{x:static system:DateTime.Today}"/>

3.2 Label Labels

Define the style code by extending the tag Attachment property implementation in the underlying style:

    <!--DatePicker contains attached property label style Labeldatepicker-    <style targettype= "{x:type DatePicker}" x:key= " Labeldatepicker "basedon=" {StaticResource defaultdatepicker} ">        <setter property=" Width "value=" 260 "> </Setter>        <setter property= "Local:ControlAttachProperty.LabelTemplate" >            <setter.value >                <controltemplate targettype= "ContentControl" >                    <border width= "background=" { StaticResource Textlabelbackground} ">                        <textblock verticalalignment=" Center "horizontalalignment=" right " Margin= "2" text= "{TemplateBinding Content}" ></TextBlock>                    </Border>                </controltemplate >            </Setter.Value>        </Setter>    </Style>

：

Examples of Use:

<datepicker margin= "3" style= "{StaticResource labelclearbuttondatepicker}" Core:ControlAttachProperty.Watermark = "Choose birth date" core:controlattachproperty.label= "date of birth"/><datepicker margin= "3" style= "{StaticResource Labeldatepicker} "core:controlattachproperty.label=" Death date "selecteddate=" {x:static system:DateTime.Today} "/> <datepicker margin= "3" style= "{StaticResource labeldatepicker}" core:controlattachproperty.label= "Illegal date" Isenabled= "False" selecteddate= "{x:static system:DateTime.Today}"/>

3.3 Feature extensions for clearing date values

This feature is described in the previous article (refer to the link at the end of this article), and the effect is visible in the image above. Style code:

    <!--DatePicker contains a style that clears the text button Clearbuttondatepicker-<style targettype= "{x:type DatePicker}" x:key= "clear Buttondatepicker "basedon=" {StaticResource defaultdatepicker} "> <setter property=" Local:controlattachpropert Y.attachcontent "> <Setter.Value> <ControlTemplate> <local:f Button ficon= "& #xe60a;" Style= "{StaticResource fbutton_transparency}" istabstop= "False" ficonmargin= "0" Local:co Ntrolattachproperty.iscleartextbuttonbehaviorenabled= "True" command= "Local: Controlattachproperty.cleartextcommand "commandparameter=" {Binding Relativesource={rela Tivesource Findancestor,ancestortype={x:type DatePicker}}} "margin=" 1,3,0,4 "ficonsize=" 14 " Foreground= "{StaticResource textforeground}" cursor= "Arrow"/> </ControlTemplate> </s Etter. Value> </Setter> &LT;/style> <!--DatePicker contains additional properties for label, and cleartext button style Labelclearbuttondatepicker--<style targettype= "  {x:type DatePicker} "x:key=" Labelclearbuttondatepicker "basedon=" {StaticResource defaultdatepicker} "> <setter Property= "Width" value= "280" ></Setter> <setter property= "Local:ControlAttachProperty.LabelTemplate" &G            T <Setter.Value> <controltemplate targettype= "ContentControl" > <border Widt H= "background=" {StaticResource textlabelbackground} "> <textblock verticalalignment=" cente R "horizontalalignment=" right "margin=" 2 "text=" {TemplateBinding Content} "></TextBlock> </b order> </ControlTemplate> </Setter.Value> </Setter> <sette R property= "Local:ControlAttachProperty.AttachContent" > <Setter.Value> <controltempl    Ate>                <local:fbutton ficon= "& #xe60a;" Style= "{StaticResource fbutton_transparency}" istabstop= "False" ficonmargin= "0" Local:contro                                Lattachproperty.iscleartextbuttonbehaviorenabled= "True" command= "Local:ControlAttachProperty.ClearTextCommand" Commandparameter= "{Binding relativesource={relativesource findancestor,ancestortype={x:type DatePicker }}} "margin=" 0,3,0,4 "ficonsize=" "foreground=" {StaticResource textforeground} "cursor=" Ar Row "/> </ControlTemplate> </Setter.Value> </Setter> </style&gt ;

Examples of Use:

<datepicker margin= "3" style= "{StaticResource clearbuttondatepicker}"/><datepicker margin= "3" style= "{ StaticResource Labelclearbuttondatepicker} "core:controlattachproperty.watermark=" Select date of birth core: Controlattachproperty.label= "Date of birth"/>

Appendix: References

WPF custom Controls and styles (1)-Vector font icons (iconfont)

WPF custom Controls and Styles (2)-Custom button Fbutton

WPF custom Controls with Styles (3)-textbox & RichTextBox & passwordbox styles, watermarks, label tags, feature extensions

WPF custom Controls and Styles (4)-checkbox/radiobutton custom styles

All rights reserved, article source: http://www.cnblogs.com/anding

Personal ability is limited, the content of this article is only for study, discussion, welcome correction, Exchange.

WPF custom Controls with styles (5)-calendar/datepicker date control custom styles and extensions (GO)