windows store apps - Add image for Slider thumb in xaml -
i add image thumb of xaml slider control in windows store app, how add,is possible in windows store app?
you have customize thumb.
default style
<!-- default style windows.ui.xaml.controls.slider --> <style targettype="slider"> <setter property="background" value="{staticresource slidertrackbackgroundthemebrush}" /> <setter property="borderbrush" value="{staticresource sliderborderthemebrush}" /> <setter property="borderthickness" value="{staticresource sliderborderthemethickness}" /> <setter property="foreground" value="{staticresource slidertrackdecreasebackgroundthemebrush}" /> <setter property="manipulationmode" value="none" /> <setter property="template"> <setter.value> <controltemplate targettype="slider"> <grid margin="{templatebinding padding}"> <grid.resources> <style targettype="thumb" x:key="sliderthumbstyle"> <setter property="borderthickness" value="1" /> <setter property="borderbrush" value="{staticresource sliderthumbborderthemebrush}" /> <setter property="background" value="{staticresource sliderthumbbackgroundthemebrush}" /> <setter property="template"> <setter.value> <controltemplate targettype="thumb"> <border background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" /> </controltemplate> </setter.value> </setter> </style> </grid.resources> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="horizontaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasepressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackpressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasepressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackpressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpressedborderthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpressedbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpressedborderthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="horizontalborder" storyboard.targetproperty="stroke"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderdisabledborderthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalborder" storyboard.targetproperty="stroke"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderdisabledborderthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasedisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasedisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbdisabledbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="toptickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkoutsidedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalinlinetickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkinlinedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="bottomtickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkoutsidedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="lefttickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkoutsidedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalinlinetickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkinlinedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="righttickbar" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertickmarkoutsidedisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pointerover"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="horizontaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasepointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackpointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaldecreaserect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackdecreasepointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticaltrackrect" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource slidertrackpointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpointeroverborderthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpointeroverbackgroundthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="verticalthumb" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource sliderthumbpointeroverborderthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <doubleanimation storyboard.targetname="focusvisualwhitehorizontal" storyboard.targetproperty="opacity" to="1" duration="0" /> <doubleanimation storyboard.targetname="focusvisualblackhorizontal" storyboard.targetproperty="opacity" to="1" duration="0" /> <doubleanimation storyboard.targetname="focusvisualwhitevertical" storyboard.targetproperty="opacity" to="1" duration="0" /> <doubleanimation storyboard.targetname="focusvisualblackvertical" storyboard.targetproperty="opacity" to="1" duration="0" /> </storyboard> </visualstate> <visualstate x:name="unfocused" /> </visualstategroup> </visualstatemanager.visualstategroups> <grid x:name="horizontaltemplate" background="transparent"> <grid.columndefinitions> <columndefinition width="auto" /> <columndefinition width="auto" /> <columndefinition width="*" /> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="17" /> <rowdefinition height="auto" /> <rowdefinition height="32" /> </grid.rowdefinitions> <rectangle x:name="horizontaltrackrect" fill="{templatebinding background}" grid.row="1" grid.columnspan="3" /> <rectangle x:name="horizontaldecreaserect" fill="{templatebinding foreground}" grid.row="1" /> <tickbar x:name="toptickbar" visibility="collapsed" fill="{staticresource slidertickmarkoutsidebackgroundthemebrush}" height="{staticresource slideroutsidetickbarthemeheight}" verticalalignment="bottom" margin="0,0,0,2" grid.columnspan="3" /> <tickbar x:name="horizontalinlinetickbar" visibility="collapsed" fill="{staticresource slidertickmarkinlinebackgroundthemebrush}" height="{staticresource slidertrackthemeheight}" grid.row="1" grid.columnspan="3" /> <tickbar x:name="bottomtickbar" visibility="collapsed" fill="{staticresource slidertickmarkoutsidebackgroundthemebrush}" height="{staticresource slideroutsidetickbarthemeheight}" verticalalignment="top" margin="0,2,0,0" grid.row="2" grid.columnspan="3" /> <rectangle x:name="horizontalborder" stroke="{templatebinding borderbrush}" strokethickness="{templatebinding borderthickness}" grid.row="1" grid.columnspan="3" /> <thumb x:name="horizontalthumb" background="{staticresource sliderthumbbackgroundthemebrush}" style="{staticresource sliderthumbstyle}" datacontext="{templatebinding value}" height="{staticresource slidertrackthemeheight}" width="{staticresource slidertrackthemeheight}" grid.row="1" grid.column="1" /> <rectangle x:name="focusvisualwhitehorizontal" ishittestvisible="false" stroke="{staticresource focusvisualwhitestrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="1.5" grid.rowspan="3" grid.columnspan="3" /> <rectangle x:name="focusvisualblackhorizontal" ishittestvisible="false" stroke="{staticresource focusvisualblackstrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="0.5" grid.rowspan="3" grid.columnspan="3" /> </grid> <grid x:name="verticaltemplate" visibility="collapsed" background="transparent"> <grid.rowdefinitions> <rowdefinition height="*" /> <rowdefinition height="auto" /> <rowdefinition height="auto" /> </grid.rowdefinitions> <grid.columndefinitions> <columndefinition width="17" /> <columndefinition width="auto" /> <columndefinition width="17" /> </grid.columndefinitions> <rectangle x:name="verticaltrackrect" fill="{templatebinding background}" grid.column="1" grid.rowspan="3" /> <rectangle x:name="verticaldecreaserect" fill="{templatebinding foreground}" grid.column="1" grid.row="2" /> <tickbar x:name="lefttickbar" visibility="collapsed" fill="{staticresource slidertickmarkoutsidebackgroundthemebrush}" width="{staticresource slideroutsidetickbarthemeheight}" horizontalalignment="right" margin="0,0,2,0" grid.rowspan="3" /> <tickbar x:name="verticalinlinetickbar" visibility="collapsed" fill="{staticresource slidertickmarkinlinebackgroundthemebrush}" width="{staticresource slidertrackthemeheight}" grid.column="1" grid.rowspan="3" /> <tickbar x:name="righttickbar" visibility="collapsed" fill="{staticresource slidertickmarkoutsidebackgroundthemebrush}" width="{staticresource slideroutsidetickbarthemeheight}" horizontalalignment="left" margin="2,0,0,0" grid.column="2" grid.rowspan="3" /> <rectangle x:name="verticalborder" stroke="{templatebinding borderbrush}" strokethickness="{templatebinding borderthickness}" grid.column="1" grid.rowspan="3" /> <thumb x:name="verticalthumb" background="{staticresource sliderthumbbackgroundthemebrush}" style="{staticresource sliderthumbstyle}" datacontext="{templatebinding value}" width="{staticresource slidertrackthemeheight}" height="{staticresource slidertrackthemeheight}" grid.row="1" grid.column="1" /> <rectangle x:name="focusvisualwhitevertical" ishittestvisible="false" stroke="{staticresource focusvisualwhitestrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="1.5" grid.rowspan="3" grid.columnspan="3" /> <rectangle x:name="focusvisualblackvertical" ishittestvisible="false" stroke="{staticresource focusvisualblackstrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="0.5" grid.rowspan="3" grid.columnspan="3" /> </grid> </grid> </controltemplate> </setter.value> </setter> </style> 
Comments
Post a Comment