零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

本章将先教大家认识ListBox的基本运用与更改预设样式

此为本篇ListBox的基本样式范例

很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页

01

开启一个新专案後，放入一个ListBox

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_32.png"></a>

你会看到是个空白的框框，什麽东西都没有?

不是应该会有一行一行可以放文字的容器吗?

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_30.png"></a>

别着急，让我们来看看到底ListBox肚子里藏了甚麽，进到Template就知道噜

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_28.png"></a>

进到Template以後，里面住了ScrollViewer，表示当资料过多时，会自动生成控制bar

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_26.png"></a>

02

接着，我们要放入可以填入内容的容器-&gt;ListBoxItem

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_24.png"></a>

你会发现，当放入过多的ListBoxItem後，ScrollViewer的控制bar就跑出来了

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_22.png"></a>

来看一下Xaml

把ListBoxItem Content内的资料改成我们要的内容

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_20.png"></a>

回到Design模式，内容已经变成我们刚刚修改後的文字了

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_18.png"></a>

你若不想从Xaml修改资料内容，也可以从Properties-&gt;Common Properties-&gt;Content下修改

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_16.png"></a>

当然也能从Properties-&gt;Brush更改文字的颜色以及背景

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_14.png"></a>

03

按下F5预览後，会发现点选或是滑鼠移动到文字上时的预设蓝底蓝框

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_12.png"></a>

如果你有看过上一篇对PathlistBox的介绍，那你应该可以猜到我接下来要干嘛~

请选取ListBox後Edit Additional Templates-&gt;Edit Generated Item Container-&gt;Edit a Copy

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_10.png"></a>

点下MouseOver，fillColor会有一个小红点，你可以发现Properties-&gt;Fill就是刚刚在浏览器看到的预设颜色

更改颜色为#FF00FF1B

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_8.png"></a>

点下Focus，更改FocusVisualElement-&gt;Storke为#FFFF0000

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_6.png"></a>

点下Selected，更改fillColor2-&gt;Fill为#FFFFBD5C

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_4.png"></a>

按下F5看看更改後的样子

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1101/383904e2f676_F399/image_2.png"></a>

想知道如何制作自己的ListBox吗?下篇告诉你~!

最後附上范例专案

如果您有Blend上的各种问题，也欢迎寄信给我，让彼此做交流~

本篇的教学就到此。

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您