ListBox vertical arrangement

When creating a project, you need to implement a vertically arranged checkbox, which requires that each column is aligned. As shown in:

Originally intended to use Silverlight Data Grid implementation, but cannot achieve adaptive. There is a wrap panel on Silverlight toolkit, so I want to use it for implementation:

However, when itemsource is specified, it cannot be automatically wrap. There are two ways to solve the problem:

1. fixed width:

View code

 1   <  ListBox  X: Name  = "Lbowraplistbox"  >  
  2     <  ListBox. itemspanel >  
  3     <  Itemspaneltemplate  >  
  4     <  Controls: wrappanel  Orientation  = "Horizontal"     />  
 5     </  Itemspaneltemplate  >  
  6     </  ListBox. itemspanel  >  
  7      </  ListBox  > 

Although it can solve the problem, it cannot be adaptive when the browser size changes.

2. This solution comes from silverlight.net forums and adds items presenter to the control template of ListBox.

View code

 1   <  ListBox. Template  >  
  2     <  Controltemplate  >  
  3    <  Scrollviewer  >  
  4     <  Itemspresenter  />  
  5     </  Scrollviewer  >  
  6    </  Controltemplate  >  
  7      </  ListBox. Template  > 

In this way, wrap is automatically enabled and scroll bar is supported. As shown in:

But this is not the vertical arrangement I want. CHANGE orientation to vertical, and remove the scrollviewer in itemspresenter to easily implement the following results:

 

The complete code is as follows:Problem: currently, verticalwraplistbox does not support 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  > 

Usage:

View code

  1     ListBox   X: name   = "lbowraplistbox"   style   ="  { staticresource horizontalwraplistbox}  "    />