1、在專案中使用listbox時,經常會將itemcontainerstyle和itemtemplate的作用搞混,itemtemplate可以搞定一切好似itemcontainerstyle有點多餘。我們再來看下itemcontainerstyle和itemtemplate。 itemcontainerstyle用於給每個item的容器定義樣式,其型別是style。包含了操作item的triggers。 itemtemplate是每個item的現實樣式,其型別是datatemplate
在實際應用中,我們往往需要根據使用者操作不斷的改變listbox中items的顯示樣式。這裡 總結一下listbox中3種應用場景中的最優解決方案。
a.選中item時改變item項的背景顏色。
s.在 itemcontainerstyle中寫controltemplate的樣式給定背景色,使用trigger在selected為true時改變背景色,**如下:
b. 選中item時改變item項的部分顯示。
s. 使用改變變數的方式,**如下:
c. 選中item時需要完全改變item呈現的樣式,如圓形變成矩形等等。
s. 改變item項的datatemplate,**如下:
...
...
2、使用舉例
<listbox
name
="changeadlistbox"
grid.row
="0"
background
="#77000000"
verticalalignment
="bottom"
horizontalalignment
="right"
itemssource=""
selectionchanged
="changeadlistbox_selectionchanged"
margin
="0,0,20,5"
d:ishidden
="true"
>
<
listbox.itemspanel
>
<
itemspaneltemplate
>
<
stackpanel
orientation
="horizontal"
/>
itemspaneltemplate
>
listbox.itemspanel
>
<
listbox.itemcontainerstyle
>
<
style
targettype
="listboxitem"
>
<
setter
property
="background"
value
="white"
/>
<
setter
property
="width"
value
="12"
/>
<
setter
property
="height"
value
="12"
/>
<
setter
property
="margin"
value
="4"
/>
<
setter
property
="template"
>
<
setter.value
>
<
controltemplate
targettype
="listboxitem"
>
<
border
x:name
="bd"
borderthickness
="1"
borderbrush
="white"
background=""
>
border
>
<
controltemplate.triggers
>
<
trigger
property
="isselected"
value
="true"
>
<
setter
property
="background"
value
="skyblue"
/>
trigger
>
controltemplate.triggers
>
controltemplate
>
setter.value
>
setter
>
style
>
listbox.itemcontainerstyle
>
listbox
>
HTML模板和CSS基準樣式(三)
今 天是這個 的最後一部分,內容關於網頁的布局。然後,我對這個範例做一點解釋。從布局上看,世界上所有的網頁,大多由三個部分構成 header 頭部 footer 尾部 content 內容區 一般來說,header總是在網頁的上方,footer總是在網頁的下方,content是中間的一大塊。在 co...
通用css樣式模板,
通用樣式01 charset utf 8 全域性定義 將具有預設margin和padding的標記置零,所有標記的margin padding都在使用時具體定義 修正ie5.x和ie6的斜體溢位bug html body html iframe,html frame html frameset 常用...
通用css樣式模板
通用樣式1 charset utf 8 全域性定義 將具有預設margin和padding的標記置零,所有標記的margin padding都在使用時具體定義 修正ie5.x和ie6的斜體溢位bug html body html iframe,html frame html frameset 常用標...