wpf - Change design of another control using style -
i'm trying call design state control when mouse on other control. example : mouse hover "button a", want "button b" change design.
so tried manage in template :
xmlns:sys="clr-namespace:system;assembly=mscorlib" <style x:key="buttonstepperstyle" targettype="button"> <setter property="overridesdefaultstyle" value="true"/> <setter property="button.margin" value="0" /> <setter property="button.padding" value="0,-8,0,0" /> <setter property="focusvisualstyle" value="{x:null}"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type button}"> <border name="bordure" height="25" borderbrush="transparent" borderthickness="2"> <!--<border.background> <imagebrush stretch="fill" renderoptions.bitmapscalingmode="fant" imagesource="images/design/in game/bouton_back.png"/> </border.background>--> <grid> <contentpresenter grid.column="1" name="bla" verticalalignment="center" horizontalalignment="center" contentsource="content"> </contentpresenter> </grid> </border> <controltemplate.triggers> <!--<trigger property="tag"> <trigger.value> <sys:int32>1</sys:int32> </trigger.value> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleurboutonhover}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexteboutonhover}" /> <setter targetname="bordure" property="background" value="{dynamicresource couleurboutonhover}" /> <setter property="cursor" value="hand" /> </trigger>--> <datatrigger binding="{binding path=tag, relativesource={relativesource self}}" value="1"> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleurboutonhover}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexteboutonhover}" /> <setter targetname="bordure" property="background" value="{dynamicresource couleurboutonhover}" /> <setter property="cursor" value="hand" /> </datatrigger> <multitrigger> <!-- bouton normal --> <multitrigger.conditions> <condition property="ismouseover" value="false" /> <condition property="button.ispressed" value="false" /> <condition property="isenabled" value="true" /> </multitrigger.conditions> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleursecondaire}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexte}" /> <setter targetname="bordure" property="background" value="transparent" /> <setter property="cursor" value="hand" /> </multitrigger> <multitrigger> <!-- bouton on --> <multitrigger.conditions> <condition property="ismouseover" value="true" /> <condition property="button.ispressed" value="false" /> <condition property="isenabled" value="true" /> </multitrigger.conditions> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleurboutonhover}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexteboutonhover}" /> <setter targetname="bordure" property="background" value="{dynamicresource couleurboutonhover}" /> <setter property="cursor" value="hand" /> </multitrigger> <multitrigger> <!-- bouton pressed --> <multitrigger.conditions> <condition property="ismouseover" value="true" /> <condition property="button.ispressed" value="true" /> <condition property="isenabled" value="true" /> </multitrigger.conditions> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleurboutonpressed}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexteboutonpressed}" /> <setter targetname="bordure" property="background" value="{dynamicresource couleurboutonpressed}" /> <setter property="cursor" value="hand" /> </multitrigger> <trigger property="isenabled" value="false"> <setter targetname="bordure" property="borderbrush" value="{dynamicresource couleurboutondisabled}"/> <setter targetname="bla" property="textblock.foreground" value="{dynamicresource couleurtexteboutondisabled}" /> <setter targetname="bordure" property="background" value="transparent" /> <setter property="cursor" value="arrow" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> this style button, handled event mouse enter , mouse leave , put "button b"'s tag 1 on "button a"'s mouse enter , 0 on "button a"'s mouseleave.
my reflexion if tag=1 change background , foreground. i've tried several options trigger , datatrigger buth none of them seem work.
how can fix ?
thank !
to use button "b" in resource namespace xmlns:sys="clr-namespace:system;assembly=mscorlib" added.
resource
<window.resources> <sys:string x:key="b">b</sys:string> <storyboard x:key="button_a_mouseover"> <objectanimationusingkeyframes storyboard.targetname="{staticresource b}" storyboard.targetproperty="content"> <discreteobjectkeyframe keytime="0:0:0.1" value="new button content"></discreteobjectkeyframe> </objectanimationusingkeyframes> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="width" to="200" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="height" to="45" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="fontsize" to="17" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="borderbrush.color" to="black" duration="0:0:0.1" /> <coloranimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="background.color" to="red" duration="0:0:0.1" /> </storyboard> <storyboard x:key="button_a_mouseleave"> <objectanimationusingkeyframes storyboard.targetname="{staticresource b}" storyboard.targetproperty="content"> <discreteobjectkeyframe keytime="0:0:0.1" value="button2"></discreteobjectkeyframe> </objectanimationusingkeyframes> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="width" to="100" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="height" to="35" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="fontsize" to="14" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="borderbrush.color" to="darkcyan" duration="0:0:0.1" /> <coloranimation storyboard.targetname="{staticresource b}" storyboard.targetproperty="background.color" to="darkblue" duration="0:0:0.1" /> </storyboard> <style x:key="buttonstepperstyle" targettype="button"> <setter property="cursor" value="hand"/> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border name="bd" height="{templatebinding height}" width="{templatebinding width}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}"> <contentpresenter name="bd_content" content="{templatebinding content}" horizontalalignment="{templatebinding horizontalcontentalignment}" verticalalignment="{templatebinding verticalcontentalignment}" textelement.foreground="{templatebinding foreground}" textelement.fontfamily="{templatebinding fontfamily}" textelement.fontsize="{templatebinding fontsize}"/> </border> <controltemplate.triggers> <trigger property="ispressed" value="true"> <setter targetname="bd" property="background" value="red"/> </trigger> <trigger property="ismouseover" value="true"> <setter targetname="bd" property="borderbrush" value="black"/> <setter targetname="bd" property="borderthickness" value="2"/> <setter targetname="bd" property="background" value="white"/> <setter targetname="bd_content" property="textelement.foreground" value="black"/> </trigger> <trigger property="isenabled" value="false"> <setter targetname="bd" property="borderbrush" value="black"/> <setter targetname="bd" property="borderthickness" value="2"/> <setter targetname="bd" property="background" value="gray"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> </window.resources> xaml
<stackpanel orientation="horizontal"> <button name="a" style="{staticresource buttonstepperstyle}" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button1"> <button.triggers> <eventtrigger routedevent="mouseenter"> <beginstoryboard storyboard="{staticresource button_a_mouseover}"/> </eventtrigger> <eventtrigger routedevent="mouseleave"> <beginstoryboard storyboard="{staticresource button_a_mouseleave}"/> </eventtrigger> </button.triggers> </button> <button name="b" style="{staticresource buttonstepperstyle}" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button2" margin="20,0,0,0"/> </stackpanel> result
update1
resource
<window.resources> <storyboard x:key="button_a_mouseover" x:shared="false" storyboard.targetname="{dynamicresource animationtarget}"> <doubleanimation storyboard.targetproperty="width" to="200" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="height" to="45" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="fontsize" to="17" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetproperty="borderbrush.color" to="black" duration="0:0:0.1" /> <coloranimation storyboard.targetproperty="background.color" to="red" duration="0:0:0.1" /> </storyboard> <storyboard x:key="button_a_mouseleave" x:shared="false" storyboard.targetname="{dynamicresource animationtarget}"> <doubleanimation storyboard.targetproperty="width" to="100" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="height" to="35" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="fontsize" to="14" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetproperty="borderbrush.color" to="darkcyan" duration="0:0:0.1" /> <coloranimation storyboard.targetproperty="background.color" to="darkblue" duration="0:0:0.1" /> </storyboard> <style x:key="buttonstepperstyle" targettype="button"> <!--same above--> </style> </window.resources> xaml
here used string same x:key="a"nimationtarget instead of tag define taeget name below xaml
for button = target name b
<button.resources> <sys:string x:key="animationtarget">b</sys:string> </button.resources> for button b = target name c
<button.resources> <sys:string x:key="animationtarget">c</sys:string> </button.resources> <stackpanel orientation="horizontal"> <button name="a" style="{staticresource buttonstepperstyle}" tag="b" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button1"> <button.triggers> <eventtrigger routedevent="mouseenter" > <beginstoryboard storyboard="{staticresource button_a_mouseover}"/> </eventtrigger> <eventtrigger routedevent="mouseleave"> <beginstoryboard storyboard="{staticresource button_a_mouseleave}"/> </eventtrigger> </button.triggers> <button.resources> <sys:string x:key="animationtarget">b</sys:string> </button.resources> </button> <button name="b" style="{staticresource buttonstepperstyle}" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button2" margin="20,0,0,0"> <button.triggers> <eventtrigger routedevent="mouseenter" > <beginstoryboard storyboard="{staticresource button_a_mouseover}"/> </eventtrigger> <eventtrigger routedevent="mouseleave"> <beginstoryboard storyboard="{staticresource button_a_mouseleave}"/> </eventtrigger> </button.triggers> <button.resources> <sys:string x:key="animationtarget">c</sys:string> </button.resources> </button> <button name="c" style="{staticresource buttonstepperstyle}" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button2" margin="20,0,0,0"/> </stackpanel update2 using tag
resource
<window.resources> <storyboard x:key="button_a_mouseover" x:shared="false" storyboard.targetname="{binding path=tag, relativesource={relativesource ancestortype=button}}"> <doubleanimation storyboard.targetproperty="width" to="200" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="height" to="45" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="fontsize" to="17" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetproperty="borderbrush.color" to="black" duration="0:0:0.1" /> <coloranimation storyboard.targetproperty="background.color" to="red" duration="0:0:0.1" /> </storyboard> <storyboard x:key="button_a_mouseleave" x:shared="false" storyboard.targetname="{binding path=tag, relativesource={relativesource ancestortype=button}}"> <doubleanimation storyboard.targetproperty="width" to="100" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="height" to="35" duration="0:0:0.1"></doubleanimation> <doubleanimation storyboard.targetproperty="fontsize" to="14" duration="0:0:0.1"></doubleanimation> <coloranimation storyboard.targetproperty="borderbrush.color" to="darkcyan" duration="0:0:0.1" /> <coloranimation storyboard.targetproperty="background.color" to="darkblue" duration="0:0:0.1" /> </storyboard> <style x:key="buttonstepperstyle" targettype="button"> <!--same style--> </style> </window.resources> xaml
<stackpanel orientation="horizontal"> <button name="a" style="{staticresource buttonstepperstyle}" tag="b" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button1"> <button.triggers> <eventtrigger routedevent="mouseenter" > <beginstoryboard storyboard="{staticresource button_a_mouseover}"/> </eventtrigger> <eventtrigger routedevent="mouseleave"> <beginstoryboard storyboard="{staticresource button_a_mouseleave}"/> </eventtrigger> </button.triggers> </button> <button name="b" style="{staticresource buttonstepperstyle}" height="35" width="100" horizontalcontentalignment="center" verticalcontentalignment="center" foreground="white" fontfamily="segoe ui dark" fontsize="14" borderbrush="darkcyan" borderthickness="2" background="midnightblue" content="button2" margin="20,0,0,0"/> </stackpanel>
Comments
Post a Comment