WPF Calendar Control manufacturing Process Analysis (1) Define Header

Hope to better understand the development of WPF controls through analysis

I. Header layout of the calendar

Contains two parts, two buttons and a title

First define the style of the button (with your own), you can define a few states for the normal state, the mouse through the state, press the status and disabled 4 states to display different styles. There is also a small triangle on the button. So you have to define a triangular geometry.

Code start

1. Draw geometry (involving knowledge points for geometry and mini grammar, such as M Z)

<pathgeometry x:key= "Geometry" figures= "m0,0 4.5,4 9,0 5.5,0 4.5,1 3.5,0z"/>

2. Define brushes in 4 different states (free to play)

Code

<lineargradientbrush x:key= "Monthcalendarbuttonfillnormal" startpoint= "0,0" endpoint= "1,1"
<lineargradientbrush.gradientstops>
<gradientstop color= "#FFE1EAFE" offset= "0"/>
<gra Dientstop color= "#FFC3D3FD" offset= "0.3"/>
<gradientstop color= "#FFC3D3FD" offset= "0.6"/>
& Lt GradientStop color= "#FFBBCDF9" offset= "1"/>
</lineargradientbrush.gradientstops>
</lineargradi Entbrush>
<lineargradientbrush x:key= "monthcalendarbuttonfillhover" startpoint= "0, 0" EndPoint= "1, 1" >< 　　　　　　 br> <lineargradientbrush.gradientstops>
<gradientstop color= "#FFD6E7FF" offset= "0"/>
　　　　 <gradientstop color= "#FFD6E7FF" offset= "0.6"/>
<gradientstop color= "#FFB9DAFB" offset= "1"/>
</lineargradientbrush.gradientstops>
</lineargradientbrush>
<lineargradientbrush x:Key= "M Onthcalendarbuttonfillpressed " startpoint= "0, 0" endpoint= "1, 1"
<lineargradientbrush.gradientstops>
<gradientstop Colo R= "#FF93A8D9" offset= "0"/>
<gradientstop color= "#FFA5BDFB" offset= "0.3"/>
<gradientstop Color= "#FFA5BDFB" offset= "0.7"/>
<gradientstop color= "#FFD2DEEB" offset= "1.0"/>
</lineargr Adientbrush.gradientstops>
</lineargradientbrush>
<lineargradientbrush x:Key= " monthcalendarbuttonfilldisabled "startpoint=" 0, 0 "endpoint=" 1, 1 "
<lineargradientbrush.gradientstops
<gradientstop color= "#FFF7F7F7" offset= "0"/>
<gradientstop color= "#FFF0F0F0" offset= "0 .3 "/>
<gradientstop color=" #FFECECEC "offset=" 0.6 "/>
<gradientstop color=" #FFE3E3E3 "off Set= "1.0"/>
</lineargradientbrush.gradientstops>
</lineargradientbrush>