Listbox实现纵向排列

在做项目的时候，需要实现纵向排列的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} " />

转载于:https://www.cnblogs.com/allanli/archive/2011/05/04/2036920.html