Wrapping ListBox using Silverlight

时间：2011-05-04 来源：allanli

在做项目的时候，需要实现横向排列的CheckBox，要求是每一列是对齐的。本来打算使用silverlight data grid实现，但是不能实现自适应。在silverlight Toolkit上有一个wrap panel，因此我想用它来实现：

但是指定itemsource时，发现它并不能自动wrap。有两种方法解决问题：

1. 固定宽度：

View Code

1 <ListBox x:Name="lboWrapListBox">
2   <ListBox.ItemsPanel>
3     <ItemsPanelTemplate>
4       <controls:WrapPanel Orientation="Horizontal" />
5     </ItemsPanelTemplate>
6   </ListBox.ItemsPanel>
7  </ListBox>

虽然能够解决问题，但是当浏览器大小变化的时候不能自适应。

2. 此方案来源于Silverlight.net forums，在listbox的control template中加入items presenter。

View Code

1 <ListBox.Template>
2   <ControlTemplate>
3     <ScrollViewer>
4       <ItemsPresenter />
5     </ScrollViewer>
6   </ControlTemplate>
7  </ListBox.Template>

这样就能够自动wrap并支持scroll bar。如下图所示：

但是这并不是我想要的横向排列。把Orientation 改为 Vertical，并且去掉ItemsPresenter中的ScrollViewer，轻松实现下面效果：

下面是完整的code：问题：目前VerticalWrapListBox不支持scroll。

View Code

 1 <Style x:Key="HorizontalWrapListBox" TargetType="ListBox">
 2   <Style.Setters>
 3     <Setter Property="ItemsPanel">
 4       <Setter.Value>
 5         <ItemsPanelTemplate>
 6           <controls:WrapPanel Orientation="Horizontal" />
 7         </ItemsPanelTemplate>
 8       </Setter.Value>
 9     </Setter>
10     <Setter Property="Template">
11       <Setter.Value>
12         <ControlTemplate TargetType="ListBox">
13           <ScrollViewer>
14             <ItemsPresenter />
15           </ScrollViewer>
16         </ControlTemplate>
17       </Setter.Value>
18     </Setter>
19   </Style.Setters>
20  </Style>
21         
22  <Style x:Key="VerticalWrapListBox" TargetType="ListBox">
23   <Style.Setters>
24     <Setter Property="ItemsPanel">
25       <Setter.Value>
26         <ItemsPanelTemplate>
27           <controls:WrapPanel Orientation="Vertical" />
28         </ItemsPanelTemplate>
29       </Setter.Value>
30     </Setter>
31     <Setter Property="Template">
32       <Setter.Value>
33         <ControlTemplate TargetType="ListBox">
34           <ItemsPresenter />
35         </ControlTemplate>
36       </Setter.Value>
37     </Setter>
38   </Style.Setters>
39  </Style>

具体用法：

View Code

1 <ListBox x:Name="lboWrapListBox" Style="{StaticResource HorizontalWrapListBox}" />