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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式相关的知识,希望对你有一定的参考价值。

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

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

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

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

01

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

技术分享图片

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

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

技术分享图片

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

技术分享图片

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

技术分享图片

02

接着,我们要放入可以填入内容的容器->ListBoxItem

技术分享图片

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

技术分享图片

来看一下Xaml

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

技术分享图片

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

技术分享图片

你若不想从Xaml修改资料内容,也可以从Properties->Common Properties->Content下修改

技术分享图片

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

技术分享图片

03

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

技术分享图片

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

请选取ListBox後Edit Additional Templates->Edit Generated Item Container->Edit a Copy

技术分享图片

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

更改颜色为#FF00FF1B

技术分享图片

点下Focus,更改FocusVisualElement->Storke为#FFFF0000

技术分享图片

点下Selected,更改fillColor2->Fill为#FFFFBD5C

技术分享图片

按下F5看看更改後的样子

技术分享图片

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

最後附上范例专案

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

本篇的教学就到此。

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

一步一步迈向HIE之路

 

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

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

 

 

以上是关于零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior