零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里相关的知识,希望对你有一定的参考价值。

原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把SampleData 绑进ListBox里

?

前面几章连续讲到ListBox的运用,本章要讲的是如何简单的把SampleData 绑进ListBox

?

就是要让不会的新手都看的懂!

?

本章范例最後结果:

?

?

01

若你对ListBox还不熟悉,请回到这里重新开始喔~

?

开启一个新的专案,并且在工作区置入一个ListBox

Data->Creat Sample Data->New Sample Data开始我们的Sample Data建置

技术分享图片

?

若是你找不到Data控制版面,请到TopMenu->Window->选取Data後就会出现了

技术分享图片

?

点选New Sample Data後会出现设定视窗

这边值得一提的是有个CheckBox选项:"Enable sample data when application is running"

意思是,执行时是否要显示这个绑在ListBox里的假资料,选取为显示,反之则否

技术分享图片

?

若是这时候不选择,之後你也可以在Data Source Options做调整

技术分享图片

?

这是Blend很聪明的地方:

「为了能让介面设计师与程式设计师的分工更细,并且减少设计双方的认知误差,抛弃传统合作模式很重要的功能之一,这项功能让设计师在设计时能够藉由假资料的代入,模拟最後的成果。」

?

02

接着设定总共四组的Sample Data

本章范例把四种格式都抓出来设定,分别为BooleanImageNumber以及String

如果想看更详细的SampleData设定,请看这里

技术分享图片

?

接着点选Collection後直接拖拉进ListBox里,ListBox就会出现刚刚所设定的SampleData了

技术分享图片

?

03

接下来修改放进SampleData後,ListBox内资料的排列方式

ListBox->Edit Additional Templates->Edit Generates Items->Edit Current

技术分享图片

?

进入了ItemTemplate後,可以看到刚刚代入的四项SampleDataStackPanel包了起来

技术分享图片

?

调整下列几项设定:

1)更改StackPanel的排列方式,由Vertical改为Horizontal水平排列

2)全选StackPanel下的四个物件,设定上下左右间格为10、设定排列方式为置中

3)当然你也可以更改字的字型与颜色

技术分享图片

?

完成後,按下F5预览你的成果

技术分享图片

?

再ListBox的外观调整成你喜欢的样子就大功告成啦~!

?

?

?

?

本篇的教学就到此。

?

?

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

一步一步迈向HIE之路

 

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

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

 

 


以上是关于零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进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