wpf - Changing the "Hover Area" Shape of a Button -

-

a button grow bigger when mouse pointer enter hover area.

  <button x:name="listitem_button_play" verticalalignment="center"            style="{staticresource playbuttonstyle}" foreground="{x:null}">           <image source="resources/listitem_button_play.png"/>   </button>

i have button in datatemplate. applied style remove default hover effect. also, make grow bigger when mouse pointer enter hover area.

    <style x:key="playbuttonstyle" targettype="button">         <setter property="overridesdefaultstyle" value="true"/>         <setter property="margin" value="5"/>         <setter property="template">             <setter.value>                 <controltemplate targettype="button">                     <border x:name="border"                         width="{binding path=actualheight, elementname=border}"                         borderthickness="0"                         cornerradius="{binding path=actualheight, elementname=border}"                          background="{templatebinding background}">                         <contentpresenter horizontalalignment="center" verticalalignment="center" />                     </border>                     <controltemplate.triggers>                         <trigger property="ismouseover" value="true">                             <setter targetname="border" property="borderbrush" value="black" />                         </trigger>                     </controltemplate.triggers>                 </controltemplate>             </setter.value>         </setter>         <setter property="height" value="93"/>         <setter property="width" value="93"/>         <style.triggers>             <trigger property="ismouseover" value="true">                 <trigger.enteractions>                     <beginstoryboard>                         <storyboard>                             <doubleanimation from="93" to="103" storyboard.targetproperty="height" duration="0:0:0.2"/>                             <doubleanimation from="93" to="103" storyboard.targetproperty="width" duration="0:0:0.2"/>                         </storyboard>                     </beginstoryboard>                 </trigger.enteractions>                 <trigger.exitactions>                     <beginstoryboard>                         <storyboard>                             <doubleanimation from="103" to="93" storyboard.targetproperty="height" duration="0:0:0.2"/>                             <doubleanimation from="103" to="93" storyboard.targetproperty="width" duration="0:0:0.2"/>                         </storyboard>                     </beginstoryboard>                 </trigger.exitactions>             </trigger>         </style.triggers>     </style>

i changed border shape of button follow image (ellipse). not hover area.

after experiments, can conclude although shape of border has changed, shape of hover area still same. red area above hover area.

is there way change hover area shape "play" image ??

avoid things height/width bindings have path itself. relativesource if need, in case none of should necessary. besides, have 2 setter's halfway down height , width hard set already...

i made few minor tweaks should sort out , tests fine on end.

<style x:key="playbuttonstyle" targettype="button">                 <setter property="overridesdefaultstyle" value="true"/>                 <setter property="background" value="purple"/>                 <setter property="margin" value="5"/>                 <setter property="height" value="93"/>                 <setter property="width" value="93"/>                 <setter property="template">                     <setter.value>                         <controltemplate targettype="button">                             <border x:name="border"                                     cornerradius="50"                                     background="{templatebinding background}"                                      borderbrush="{templatebinding borderbrush}"                                      borderthickness="{templatebinding borderthickness}">                                 <contentpresenter horizontalalignment="center" verticalalignment="center" />                             </border>                             <controltemplate.triggers>                                 <trigger property="ismouseover" value="true">                                     <setter targetname="border" property="borderbrush" value="black" />                                 </trigger>                             </controltemplate.triggers>                         </controltemplate>                     </setter.value>                 </setter>                                     <style.triggers>                     <trigger property="ismouseover" value="true">                         <trigger.enteractions>                             <beginstoryboard>                                 <storyboard>                                     <doubleanimation from="93" to="103" storyboard.targetproperty="height" duration="0:0:0.2"/>                                     <doubleanimation from="93" to="103" storyboard.targetproperty="width" duration="0:0:0.2"/>                                 </storyboard>                             </beginstoryboard>                         </trigger.enteractions>                         <trigger.exitactions>                             <beginstoryboard>                                 <storyboard>                                     <doubleanimation from="103" to="93" storyboard.targetproperty="height" duration="0:0:0.2"/>                                     <doubleanimation from="103" to="93" storyboard.targetproperty="width" duration="0:0:0.2"/>                                 </storyboard>                             </beginstoryboard>                         </trigger.exitactions>                     </trigger>                 </style.triggers>             </style>

Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more