i have clickable-gridview insde hubsection:
<hubsection > <datatemplate> <gridview isitemclickenabled="true" itemclick="hub_onclick"> <relativepanel > <textblock text="nicetext" /> </relativepanel> </gridview> </datatemplate> </hubsection>
now everytime i've clicked on hub, blue-border appear around gridview (selectedbackground).
in livevisualtree shows me, border "listviewitempresenter" control inside gridviewitem. therefore modified style original control , pasted page.resources tag.
<!-- default style windows.ui.xaml.controls.listviewitem --> <style targettype="listviewitem"> <setter property="fontfamily" value="{themeresource contentcontrolthemefontfamily}" /> <setter property="fontsize" value="{themeresource controlcontentthemefontsize}" /> <setter property="background" value="transparent"/> <setter property="foreground" value="{themeresource systemcontrolforegroundbasehighbrush}" /> <setter property="tabnavigation" value="local"/> <setter property="isholdingenabled" value="true"/> <setter property="padding" value="12,0,12,0"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="verticalcontentalignment" value="center"/> <setter property="minwidth" value="{themeresource listviewitemminwidth}"/> <setter property="minheight" value="{themeresource listviewitemminheight}"/> <setter property="template"> <setter.value> <controltemplate targettype="listviewitem"> <listviewitempresenter contenttransitions="{templatebinding contenttransitions}" selectioncheckmarkvisualenabled="true" checkbrush="{themeresource systemcontrolforegroundbasemediumhighbrush}" checkboxbrush="{themeresource systemcontrolforegroundbasemediumhighbrush}" dragbackground="{themeresource listviewitemdragbackgroundthemebrush}" dragforeground="{themeresource listviewitemdragforegroundthemebrush}" focusborderbrush="{themeresource systemcontrolforegroundalthighbrush}" focussecondaryborderbrush="{themeresource systemcontrolforegroundbasehighbrush}" placeholderbackground="{themeresource listviewitemplaceholderbackgroundthemebrush}" pointeroverbackground="{themeresource systemcontrolhighlightlistlowbrush}" pointeroverforeground="{themeresource systemcontrolhighlightaltbasehighbrush}" <!-- here --> selectedbackground="white" selectedforeground="{themeresource systemcontrolhighlightaltbasehighbrush}" selectedpointeroverbackground="{themeresource systemcontrolhighlightlistaccentmediumbrush}" pressedbackground="{themeresource systemcontrolhighlightlistmediumbrush}" selectedpressedbackground="{themeresource systemcontrolhighlightlistaccenthighbrush}" disabledopacity="{themeresource listviewitemdisabledthemeopacity}" dragopacity="{themeresource listviewitemdragthemeopacity}" reorderhintoffset="{themeresource listviewitemreorderhintthemeoffset}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" verticalcontentalignment="{templatebinding verticalcontentalignment}" contentmargin="{templatebinding padding}" checkmode="inline"/> </controltemplate> </setter.value> </setter> </style>
but isn't working me. selectedbackground-border still blue. why? mistake?
you should override gridviewitem
style , setup new style gridview
. in page resource declare new style:
<page.resources> <style targettype="gridviewitem" x:key="customgridviewstyle"> <setter property="fontfamily" value="{themeresource contentcontrolthemefontfamily}" /> <setter property="fontsize" value="{themeresource controlcontentthemefontsize}" /> <setter property="background" value="transparent"/> <setter property="foreground" value="{themeresource systemcontrolforegroundbasehighbrush}" /> <setter property="tabnavigation" value="local"/> <setter property="isholdingenabled" value="true"/> <setter property="horizontalcontentalignment" value="center"/> <setter property="verticalcontentalignment" value="center"/> <setter property="margin" value="0,0,4,4"/> <setter property="minwidth" value="{themeresource gridviewitemminwidth}"/> <setter property="minheight" value="{themeresource gridviewitemminheight}"/> <setter property="template"> <setter.value> <controltemplate targettype="gridviewitem"> <listviewitempresenter contenttransitions="{templatebinding contenttransitions}" selectioncheckmarkvisualenabled="true" checkbrush="{themeresource systemcontrolforegroundbasemediumhighbrush}" checkboxbrush="{themeresource systemcontrolbackgroundchromemediumbrush}" dragbackground="{themeresource listviewitemdragbackgroundthemebrush}" dragforeground="{themeresource listviewitemdragforegroundthemebrush}" focusborderbrush="{themeresource systemcontrolforegroundalthighbrush}" focussecondaryborderbrush="{themeresource systemcontrolforegroundbasehighbrush}" placeholderbackground="{themeresource listviewitemplaceholderbackgroundthemebrush}" pointeroverbackground="{themeresource systemcontrolhighlightlistlowbrush}" pointeroverforeground="{themeresource systemcontrolforegroundbasehighbrush}" selectedbackground="transparent" selectedforeground="{themeresource systemcontrolforegroundbasehighbrush}" selectedpointeroverbackground="{themeresource systemcontrolhighlightlistaccentmediumbrush}" pressedbackground="{themeresource systemcontrolhighlightlistmediumbrush}" selectedpressedbackground="{themeresource systemcontrolhighlightlistaccenthighbrush}" disabledopacity="{themeresource listviewitemdisabledthemeopacity}" dragopacity="{themeresource listviewitemdragthemeopacity}" reorderhintoffset="{themeresource gridviewitemreorderhintthemeoffset}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" verticalcontentalignment="{templatebinding verticalcontentalignment}" contentmargin="{templatebinding padding}" checkmode="overlay"/> </controltemplate> </setter.value> </setter> </style> </page.resources>
and setup:
<hubsection > <datatemplate> <gridview isitemclickenabled="true" itemclick="hub_onclick" itemcontainerstyle="{staticresource customgridviewstyle}"> <relativepanel > <textblock text="nicetext" /> </relativepanel> </gridview> </datatemplate> </hubsection>
p.s. can override exanded style
Comments
Post a Comment