c# - WPF-XAML expander datatrigger background color change -
reference: wpf event trigger change other ui element
i create 7 buttons(different colors) change expander header background when button clicked.
<expander x:name="dataexpander" isexpanded="{binding expander_isexpanded}"background="{binding expander_background,fallbackvalue=plum}"> <expander.header> <textblock fontsize="18" fontfamily="bold" horizontalalignment="stretch" verticalalignment="stretch" text="{binding expander_header_text,fallbackvalue=nocolor}"/> </expander.header> <expander.style> <style targettype="expander"> <style.triggers> <datatrigger binding="{binding ismouseover,elementname=color0}" value="true"> <datatrigger.enteractions> <beginstoryboard> <storyboard> <coloranimation storyboard.targetproperty="expander.background" to="red" duration="0:0:0.3" begintime="0:0:1" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger> <datatrigger binding="{binding ismouseover,elementname=color1}" value="true"> <datatrigger.enteractions> <beginstoryboard> <storyboard> <coloranimation storyboard.targetproperty="expander.background" to="yellow" duration="0:0:0.3" begintime="0:0:1" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger> ... </style.triggers> </style> </expander.style>
<border margin="2,2,2,2" borderbrush="gray" cornerradius="1,1,1,1" borderthickness="1,1,1,1"> <button name="color0" width="29" background="red"/> </border> <border margin="2,2,2,2" borderbrush="gray" cornerradius="1,1,1,1" borderthickness="1,1,1,1"> <button name="color1" width="29" background="yellow"/> </border>
it throw "system.invalidoperationexception:'system.windows.media.animation.coloranimation' object cannot used background property
i tried :
<coloranimation storyboard.targetproperty="expander.background" ... <coloranimation storyboard.targetproperty="background" ... <coloranimation storyboard.targetproperty="(expander).background" ... <coloranimation storyboard.targetproperty="(expander.background).color" ... <coloranimation storyboard.targetproperty="(background.color)" ...
change storyboard.targetproperty="expander.background" storyboard.targetproperty="(expander.background).color" , remove default background property of expander.
<stackpanel> <expander x:name="dataexpander" isexpanded="{binding expander_isexpanded}" > <expander.header> <textblock fontsize="18" fontfamily="bold" horizontalalignment="stretch" verticalalignment="stretch" text="{binding expander_header_text,fallbackvalue=nocolor}"/> </expander.header> <expander.style> <style targettype="expander"> <style.triggers> <datatrigger binding="{binding ismouseover,elementname=color0}" value="true"> <datatrigger.enteractions> <beginstoryboard> <storyboard> <coloranimation storyboard.targetproperty="(expander.background).color" to="red" duration="0:0:0.3" begintime="0:0:1" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger> <datatrigger binding="{binding ismouseover,elementname=color1}" value="true"> <datatrigger.enteractions> <beginstoryboard> <storyboard> <coloranimation storyboard.targetproperty="(expander.background).color" to="yellow" duration="0:0:0.3" begintime="0:0:1" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger> </style.triggers> </style> </expander.style> </expander> <border margin="2,2,2,2" borderbrush="gray" cornerradius="1,1,1,1" borderthickness="1,1,1,1"> <button name="color0" width="29" background="red"/> </border> <border margin="2,2,2,2" borderbrush="gray" cornerradius="1,1,1,1" borderthickness="1,1,1,1"> <button name="color1" width="29" background="yellow"/> </border> </stackpanel>
Comments
Post a Comment