c# - How to use different image as content in button style? -
i working on window store app development. have button, uses style defined this:
<style x:key="mybuttonstyle" targettype="buttonbase"> <setter property="content" value="ms-appx:///image1.png"/> </style> can make work if button focused, show image2.png instead of image1.png? working on window store app, trigger not supported here. shall use visual state manager here?
based on description, see have 2 requirements, 1 requirement set image content of button, other requirement change button's content image when button gets focused.
requirement 1: setting image content of button
i see have used following style set image content of button:
using code directly can not set image content of button, in order implement need put image control in button's template.
ps: since using windows store app, ues windows 8.1 store app example later information, same uwp app.
we can button's template creating button in xaml , right click button control-->"edit template"-->"edit copy..." following:
then show default style of button control name:originalbuttonstyle, after please find contentpresenter , add image control inside following:
<contentpresenter x:name="contentpresenter" automationproperties.accessibilityview="raw" contenttemplate="{templatebinding contenttemplate}" contenttransitions="{templatebinding contenttransitions}" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}"> <image name="myimage" source="{templatebinding content}"></image> </contentpresenter> after if set content of button value of imageurl/soruce example:ms-appx:///image1.png, show image content of button.
requirement 2: changing button's content image when button gets focused.
please find these pointerover pressed focused pointerfocused visualstate , add following xaml 1 one, because these visualstates fired when button goes focused state:
<objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="myimage"> <discreteobjectkeyframe keytime="0" value="ms-appx:///image2.png "/> </objectanimationusingkeyframes> so whole style: originalbuttonstyle button following:
<style x:key="originalbuttonstyle" targettype="button"> <setter property="background" value="{themeresource buttonbackgroundthemebrush}"/> <setter property="foreground" value="{themeresource buttonforegroundthemebrush}"/> <setter property="borderbrush" value="{themeresource buttonborderthemebrush}"/> <setter property="borderthickness" value="{themeresource buttonborderthemethickness}"/> <setter property="padding" value="12,4,12,4"/> <setter property="horizontalalignment" value="left"/> <setter property="verticalalignment" value="center"/> <setter property="fontfamily" value="{themeresource contentcontrolthemefontfamily}"/> <setter property="fontweight" value="semibold"/> <setter property="fontsize" value="{themeresource controlcontentthemefontsize}"/> <setter property="template"> <setter.value> <controltemplate targettype="button"> <grid> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="pointerover"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="myimage"> <discreteobjectkeyframe keytime="0" value="ms-appx:///image1.png"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{themeresource buttonpointeroverbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{themeresource buttonpointeroverforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="myimage"> <discreteobjectkeyframe keytime="0" value="ms-appx:///image1.png"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{themeresource buttonpressedbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{themeresource buttonpressedforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{themeresource buttondisabledbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="border"> <discreteobjectkeyframe keytime="0" value="{themeresource buttondisabledborderthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{themeresource buttondisabledforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="myimage"> <discreteobjectkeyframe keytime="0" value="ms-appx:///image1.png"/> </objectanimationusingkeyframes> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualwhite"/> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualblack"/> </storyboard> </visualstate> <visualstate x:name="unfocused"/> <visualstate x:name="pointerfocused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="myimage"> <discreteobjectkeyframe keytime="0" value="ms-appx:///image1.png"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="border" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" margin="3"> <contentpresenter x:name="contentpresenter" automationproperties.accessibilityview="raw" contenttemplate="{templatebinding contenttemplate}" contenttransitions="{templatebinding contenttransitions}" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}"> <image name="myimage" source="{templatebinding content}"></image> </contentpresenter> </border> <rectangle x:name="focusvisualwhite" ishittestvisible="false" opacity="0" strokedashoffset="1.5" strokeendlinecap="square" stroke="{themeresource focusvisualwhitestrokethemebrush}" strokedasharray="1,1"/> <rectangle x:name="focusvisualblack" ishittestvisible="false" opacity="0" strokedashoffset="0.5" strokeendlinecap="square" stroke="{themeresource focusvisualblackstrokethemebrush}" strokedasharray="1,1"/> </grid> </controltemplate> </setter.value> </setter> </style> note: above changes made in originalbuttonstyle, in order use mybuttonstyle, can inherit mybuttonstyle originalbuttonstyle following:
<style x:key="mybuttonstyle" targettype="button" basedon="{staticresource originalbuttonstyle}"> <setter property="content" value="ms-appx:///image1.png"/> </style> <grid background="{themeresource applicationpagebackgroundthemebrush}"> <button x:name="button" style="{staticresource mybuttonstyle}" horizontalalignment="left" margin="100,100,100,100" /> </grid> after works fine.
fore more information, please check: button styles , templates .
Comments
Post a Comment