本文为原创文,难免会有一些小得瑕疵,敬请谅解。
所有示例均是博主测试过的,如有转载请标明出处,谢谢。
我们知道,ListBox是一个列表控件,它可以把绑定的数据以列表的形式表现出来。
但是有些时候,我们需要根据不同需要来改变列表里的布局。
这时有些肯定要说,那改变ItemTemplate里的内容不就好了吗?
但是你要知道ItemTemplate里的内容是用来指定重复内容的,而我所谓的布局是整个的布局。
看看下面的例子就能理解了:
这个图片显示的就是我所需要的Listbox的布局,一个图片加上图片名,它们可以横向排列,当宽不够时,自动向下填充。
想要实现这样的布局也很简单:
Listbox控件里有一个ItemsPanel,只要我们修改里面的模板就ok了。
<ListBox Height="100" x:Name="listBox1" Width="120"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" //这两个地方一定要注意,如果不设置,会出现滚动条,就不会出现如上的效果了
ItemsSource="{Binding}" //数据绑定知识这么简单,我就不用重复了
Background="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<my:WrapPanel /> //此控件是Tookit控件,Tookit是微软的一种开源控件,也是学习Silverlight比较常用的控件
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate>
<my:WrapPanel>
<Image Width="30" Height="30" Source="{Binding ImagePath}"/>
<TextBlock Height="23" Name="textBlock1" Text="{Binding ImageName}" />
</my:WrapPanel >
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>