Develop Windows 8-implement the ComboBox item style in XAML

If you want to implement the comboboxitem foreground style, you can present different effects in the pointerover or pressed state, you can achieve this:

<Style X: name = "delayclockcomboboxstyle" targettype = "ComboBox"> <setter property = "height" value = "48"/> <setter property = "width" value = "180"/> <setter property = "tabnavigation" value = "once"/> <setter property = "scrollviewer. verticalscrollbarvisibility "value =" hidden "/> <setter property =" scrollviewer. horizontalscrollmode "value =" disabled "/> <setter property =" scrollviewer. verticalscrollmode "value =" en Abled "/> <setter property =" scrollviewer. isdeferredscrollingenabled "value =" false "/> <setter property =" scrollviewer. bring1_viewonfocuschange "value =" true "/> <setter property =" feature "value =" center "/> <setter property =" fontfamily "value =" {staticresource contentcontrolthemefontfamily} "/> <setter property = "ComboBox. itemtemplate "> <setter. value> <datatemplate> <Border width =" 180 "Height =" 48 "background =" Transparent "margin =" 0 "borderthickness =" 2 "borderbrush =" white "> <! -- Foreground: bind the container contentpresenter --> <textblock text = "{binding}" fontsize = "26" foreground = "{binding foreground, elementname = contentpresenter} "horizontalalignment =" center "verticalignment =" center "/> </Border> </datatemplate> </setter. value> </setter> <setter property = "template"> <setter. value> <controltemplate targettype = "ComboBox"> <grid> <visualstatemanager. visualstategroups> <visualstate Group X: Name = "commonstates"> <visualstate X: Name = "normal"/> <visualstate X: Name = "pointerover"/> <visualstate X: name = "pressed"> <storyboard> <! -- Change the contentpresendter's foreground when pressed, so the item's foreground also changes --> <objectanimationusingkeyframes storyboard. targetname = "contentpresenter" storyboard. targetproperty = "foreground"> <discreteobjectkeyframe keytime = "0" value = "{staticresource appaccentbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard. targetname = "background" storyboard. targetproperty = "background"> <dis Creteobjectkeyframe keytime = "0" value = "white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate X: name = "disabled"/> </visualstategroup> <visualstategroup X: Name = "focusstates"> <visualstate X: Name = "focused"/> <visualstate X: name = "focusedpressed"/> <visualstate X: Name = "unfocused"/> <visualstate X: Name = "pointerfocused"/> <visualstate X: name = "focuseddropdown"> <storyboard> <Objectanimationusingkeyframes storyboard. targetname = "popupborder" storyboard. targetproperty = "visibility" Duration = "0"> <discreteobjectkeyframe keytime = "0"> <discreteobjectkeyframe. value> <visibility> visible </visibility> </discreteobjectkeyframe. value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup X: Name = "dropdownsta Tes "> <visualstate X: name = "opened"> <storyboard> <export openedtargetname = "popupborder" contenttargetname = "scrollviewer" closedtargetname = "inline" contenttranslationoffset = "0" inline = "{binding relativesource = {relativesource templatedparent }, path = templatesettings. dropdownoffset} "openedlength =" {binding relativesource = {relativesource templatedparent}, Path = Templ Atesettings. dropdownopenedheight} "closedlength =" {binding relativesource = {relativesource templatedparent}, Path = templatesettings. dropdownclosedheight} "/> </storyboard> </visualstate> <visualstate X: name = "closed"> <storyboard> <export openedtargetname = "popupborder" contenttargetname = "scrollviewer" closedtargetname = "contentpresenter" contenttranslationoffset = "40" offsetfromcenter = "{Binding relativesource = {relativesource templatedparent}, Path = templatesettings. dropdownoffset} "contenttranslationction ction =" {binding relativesource = {relativesource templatedparent}, Path = templatesettings. selecteditemdirection} "openedlength =" {binding relativesource = {relativesource templatedparent}, Path = templatesettings. dropdownopenedheight} "closedlength =" {binding relativesource = {relativesourc E templatedparent}, Path = templatesettings. dropdownclosedheight} "/> </storyboard> </visualstate> </visualstategroup> </visualstatemanager. visualstategroups> <border X: Name = "background" background = "Transparent" borderthickness = "0"/> <! -- Contentpresendter corresponds to every item in itemtemplate --> <contentpresenter X: name = "contentpresenter" margin = "{templatebinding padding}" foreground = "white" placement = "{templatebinding placement}" verticalignment = "{templatebinding placement}"/> <popup X: name = "popup"> <border X: Name = "popupborder" background = "Transparent" borderthickness = "3" borderbrush = "white" horizontalalignment = "stretch"> <scrollviewer X: name = "scrollviewer" foreground = "{staticresource details}" verticalsnappointstype = "optionalsingle" verticalsnappointsalignment = "far" horizontalscrollmode = "{templatebinding scrollviewer. horizontalscrollmode} "horizontalscrollbarvisibility =" {templatebinding scrollviewer. horizontalscrollbarvisibility} "verticalscrollmode =" {templatebinding scrollviewer. verticalscrollmode} "verticalscrollbarvisibility =" {templatebinding scrollviewer. verticalscrollbarvisibility} "ishorizontalrailenabled =" {templatebinding scrollviewer. ishorizontalrailenabled} "isverticalrailenabled =" {templatebinding scrollviewer. isverticalrailenabled} "isdeferredscrollingenabled =" {templatebinding scrollviewer. isdeferredscrollingenabled} "bring?viewonfocuschange =" {templatebinding scrollviewer. bring1_viewonfocuschange} "zoommode =" disabled "> <itemspresenter/> </scrollviewer> </Border> </popup> </GRID> </controltemplate> </setter. value> </setter> </style>

Each visualstate in the visualstategroup is related to the sequence. It is possible that the last state overwrites the effect of the previous state.

At the same time, such a style will be very long, so there are some effects that do not need to be omitted from simplicity.