wpf - One out of two buttons using same ControlTemplate does not animate -


i have listview uses datatemplate render out each item, each item having edit , remove button. 2 buttons templated use path display icon, , animate storyboard when mouse on happens.

the animation changes opacity , trigger used add dropshadow effect on mouseover. problem have despite 2 buttons sharing same templates, 1 of them has desired behavior of animating when moused on regardless if listviewitem selected not. 2nd 1 (the edit button) not animate unless first select it's listviewitem.

images demonstrate

untouched listview: trash can (remove) works properly, while edit highlighted. moving mouse on edit button results in none of animations playing.

in state, listviewitem not have mouse on it, there no mouseover effects (change of color etc) shown.

initial state

mouse on over remove button: remove button continues work expected. highlighting on mouse on effect.

in state (and following states), listviewitem has mouseover it, causing styling reflect it.

remove button working

selecting listviewitem lets edit animation start working: when select listviewitem, edit button goes ahead , starts animate right.

remove button working

animations working w/ selected listviewitem: can see edit button lighting when moused over.

enter image description here

i'm not sure why 2 buttons, sharing same template act differently.

the listview

this listview, using adminquantlistattributetemplate, rendering out content see in above pictures.

<listview dockpanel.dock="top"             margin="5 0 0 0"             x:name="attributeslistview"             itemssource="{binding path=attributesview}"              itemtemplate="{staticresource adminquantlistattributetemplate}"             selecteditem="{binding path=selectedattribute}"/> 

the itemtemplate

this item template contains 2 buttons in question. have tried re-organize them, remove button first. not matter in order put buttons in xaml, edit button continues broken until listviewitem selected.

<datatemplate x:key="adminquantlistattributetemplate"               datatype="qlmodels:quantlistattribute">     <groupbox>         <groupbox.header>             <textblock fontsize="14"                        foreground="{dynamicresource idealforegroundcolorbrush}">                 <run text="attribute" />                 <run text="{binding path=sortorder, converter={staticresource incrementnumberconverter}, converterparameter=1}" />             </textblock>         </groupbox.header>          <dockpanel lastchildfill="true">             <stackpanel dockpanel.dock="left"                         margin="0 0 15 0">  <!-- broken edit button -->                 <button command="{binding elementname=attributeslistview,                         path=datacontext.editattributecommand}"                         margin="0 0 0 20"                         template="{dynamicresource buttonicontemplate}"                         tooltip="edit quantlist attribute">                     <rectangle width="20"                                height="20"                                fill="{binding path=foreground,                                relativesource={relativesource ancestortype=button,                                mode=findancestor}}"                                opacitymask="{staticresource editiconbrush}" />                 </button>  <!-- working remove button -->                 <button command="{binding elementname=attributeslistview,                         path=datacontext.removeattributecommand}"                         template="{dynamicresource buttonicontemplate}"                         tooltip="delete quantlist attribute">                     <rectangle width="20"                                height="20"                                fill="{binding path=foreground,                                relativesource={relativesource ancestortype=button,                                mode=findancestor}}"                                opacitymask="{staticresource deleteiconbrush}" />                 </button>             </stackpanel>              <textblock dockpanel.dock="top">                 <run text="weight"                      fontweight="bold" />                 <run text="{binding path=attributeweight.name}" />             </textblock>             <textblock text="{binding path=narrative}"                        dockpanel.dock="top" />             <itemscontrol itemssource="{binding path=references}"                           dockpanel.dock="top">                  <itemscontrol.itemspanel>                     <itemspaneltemplate>                         <wrappanel />                     </itemspaneltemplate>                 </itemscontrol.itemspanel>                  <itemscontrol.itemtemplate>                     <datatemplate>                         <textblock margin="0 0 20 0">                             <run text="reference:"                                  fontweight="bold"                                  fontsize="13" />                             <run text="{binding path=reference}" />                         </textblock>                     </datatemplate>                 </itemscontrol.itemtemplate>              </itemscontrol>         </dockpanel>     </groupbox> </datatemplate> 

the buttonicontemplate

this template buttons using. note using template in multiple locations through-out app , works fine. used in groupbox , expander headers, datagrid columns multiple buttons , stand-alone controls. when used within listview (only place in app using this), not work.

<controltemplate x:key="buttonicontemplate"                  targettype="button">     <grid>         <visualstatemanager.visualstategroups>             <visualstategroup x:name="commonstates">                 <visualstate x:name="mouseover">                     <storyboard>                         <doubleanimation storyboard.targetproperty="opacity"                                     to="1"                                     duration="0:0:0.05" />                     </storyboard>                 </visualstate>                 <visualstate x:name="normal">                     <storyboard>                         <doubleanimation storyboard.targetproperty="opacity"                                     to="0.5"                                     duration="0:0:0.05" />                     </storyboard>                 </visualstate>             </visualstategroup>         </visualstatemanager.visualstategroups>          <rectangle x:name="buttonrect"                    fill="transparent" />         <contentpresenter horizontalalignment="{templatebinding horizontalcontentalignment}"                           content="{templatebinding content}"                           verticalalignment="{templatebinding verticalcontentalignment}">         </contentpresenter>     </grid>      <controltemplate.triggers>         <trigger property="ismouseover"                  value="true">             <setter property="effect">                 <setter.value>                     <dropshadoweffect shadowdepth="-5"                                       color="{dynamicresource blackcolor}"                                       opacity="1"                                       blurradius="15" />                 </setter.value>             </setter>         </trigger>     </controltemplate.triggers> </controltemplate> 

visual brushes used buttons

<visualbrush x:key="deleteiconbrush"              stretch="uniform">     <visualbrush.visual>         <canvas width="24"                 height="24">             <path fill="#ff000000"                   data="f1 m 25.3333,23.75l 50.6667,23.75c 51.5411,23.75 51.8541,27.3125 51.8541,27.3125l 24.1458,27.3125c 24.1458,27.3125 24.4589,23.75 25.3333,23.75 z m 35.625,19.7917l 40.375,19.7917c 40.8122,19.7917 41.9583,20.9378 41.9583,21.375c 41.9583,21.8122 40.8122,22.9584 40.375,22.9584l 35.625,22.9584c 35.1878,22.9584 34.0416,21.8122 34.0416,21.375c 34.0416,20.9378 35.1878,19.7917 35.625,19.7917 z m 27.7083,28.5l 48.2916,28.5c 49.1661,28.5 49.875,29.2089 49.875,30.0834l 48.2916,53.8334c 48.2916,54.7078 47.5828,55.4167 46.7083,55.4167l 29.2917,55.4167c 28.4172,55.4167 27.7083,54.7078 27.7083,53.8334l 26.125,30.0834c 26.125,29.2089 26.8339,28.5 27.7083,28.5 z m 30.0833,31.6667l 30.4792,52.25l 33.25,52.25l 32.8542,31.6667l 30.0833,31.6667 z m 36.4167,31.6667l 36.4167,52.25l 39.5833,52.25l 39.5833,31.6667l 36.4167,31.6667 z m 43.1458,31.6667l 42.75,52.25l 45.5208,52.25l 45.9167,31.6667l 43.1458,31.6667 z " />         </canvas>     </visualbrush.visual> </visualbrush>  <visualbrush x:key="editiconbrush"               stretch="uniform">     <visualbrush.visual>         <canvas width="24"                  height="24">             <path fill="{dynamicresource blackbrush}"                    data="m20.71,4.04c21.1,3.65 21.1,3 20.71,2.63l18.37,0.29c18,-0.1 17.35,-0.1 16.96,0.29l15,2.25l18.75,6m17.75,7l14,3.25l4,13.25v17h7.75l17.75,7z" />         </canvas>     </visualbrush.visual> </visualbrush> 

any in troubleshooting awesome.

edit

it turns out edit button had canexecute method returning false (which expected). when have canexecute return true always, animation works right.

so question is, how let storyboard stuff work, when button disabled?

i guess problem editattributecommand.canexecute returns false , prevents being animated. thing differs 2 buttons, that's why guess.


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -