Wpf ListBox – change default selected-item style *inside* the ContentPresenter -

-

i have listbox in each item stackpanel. stackpanel consist of image , textblock below it:

<listbox.itemtemplate>      <datatemplate>          <stackpanel margin="10">              <image>                 <image.source>                     <bitmapimage urisource="{binding path=imagefilepath}"/>                 </image.source>             </image>              <textblock text="title" textalignment="center"/>          </stackpanel>     </datatemplate>  </listbox.itemtemplate>

it looks this:

enter image description here

when user select item, default blue rectangle surround stackpanel:

enter image description here

now, want make different border selected-item, want surround image.

i know how make control template , put custom border around contentpresenter, this, of course, surround whole stackpanel, not image.

i don’t know if making changes contentpresenter possible, , if idea @ all. if there other way achieve want, fine well.

right, listbox's own contentpresenter isn't helpful you're doing. want a) eliminate listbox's own selection visuals , b) replace them more suitable in datatemplate items.

the default selection visual applied default template listboxitem. replace template. using style in resources listbox, apply own control template listboxitem. not it, present content , don't provide selection background. handle selection visuals trigger in data template, image , label defined , can apply changes 1 , not other. below example works me.

note there's fiddling horizontalalignment on border element make cling image element within it. also, wrote quickie test viewmodel items property called items; assume not name of collection member you're using populate own listbox. 

<listbox     margin="8"     itemssource="{binding items}"     >     <listbox.resources>         <style targettype="{x:type listboxitem}">             <setter property="horizontalcontentalignment" value="stretch" />             <setter property="template">                 <setter.value>                     <controltemplate targettype="{x:type listboxitem}">                         <grid>                             <contentpresenter />                         </grid>                     </controltemplate>                 </setter.value>             </setter>         </style>     </listbox.resources>     <listbox.itemtemplate>         <datatemplate>             <grid>                 <border                     x:name="highlightborder"                     borderthickness="4"                     horizontalalignment="left"                     verticalalignment="top"                     margin="10"                     >                     <border.style>                         <style targettype="border">                             <!-- must set default borderbrush via style, if set @ all.                              attribute on border tag, override effects of                              trigger below.                              -->                             <setter property="borderbrush" value="transparent" />                         </style>                     </border.style>                     <image source="{binding imagefilepath}" />                 </border>             </grid>             <datatemplate.triggers>                 <datatrigger                      binding="{binding isselected, relativesource={relativesource ancestortype=listboxitem}}"                      value="true">                     <setter targetname="highlightborder" property="borderbrush" value="orange" />                 </datatrigger>             </datatemplate.triggers>         </datatemplate>     </listbox.itemtemplate> </listbox>

Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more