Silverlight实现可换行换列的CheckBoxList
在Silverlight中实现CheckBoxList一般都使用ListBox+CheckBox实现
但如何实现类似Asp.net控件CheckBoxList的RepeatColumns功能呢?
如下图所示:
主要用到了ListBox的ItemsPanel,其中放入了一个ControlsToolkit的WrapPanel
一些国外的论坛里都提到用ListBox的父类控件ItemsControl
其实大可不必,ListBox本身就拥有ItemsPanel,在派生时还加入了ScrollViewer,也就是自带滚动条
而ItemsControl是没有ScrollViewer的,需要用一个ScrollViewer包住,何必多此一举呢?
XAML代码
<
UserControl
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controlsToolkit
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class
="SilverlightSample.UcTest2"
mc:Ignorable
="d"
>
<
Grid
x:Name
="LayoutRoot"
Background
="White"
Height
="272"
Width
="392"
>
<
Grid
Height
="150"
Margin
="20,22,20,100"
>
<
ListBox
x:Name
="checkBoxList1"
>
<
ListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<!--
WrapPanel的Height除以CheckBox的Height决定每列的行数
-->
<!--
暂未找到可以设置WrapPanel折行数量的属性
-->
<!--
Orientation设置纵向或横向排列,横向的话需要用Width设置
-->
<
controlsToolkit:WrapPanel
Orientation
="Vertical"
Height
="100"
/>
</
ItemsPanelTemplate
>
</
ListBox.ItemsPanel
>
<
ListBox.ItemTemplate
>
<
DataTemplate
>
<!--
这里的Selected属性设置双向绑定是为了筛选选中的项目
-->
<
CheckBox
IsChecked
="
{Binding Selected, Mode=TwoWay}
"
Height
="16"
>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="13"
/>
</
CheckBox
>
</
DataTemplate
>
</
ListBox.ItemTemplate
>
</
ListBox
>
</
Grid
>
<
Button
Margin
="179,199,94,41"
Content
="获取选中"
FontSize
="13"
Click
="Button_Click"
/>
</
Grid
>
</
UserControl
>
C#代码
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
SilverlightSample.ServiceReference;
namespace
SilverlightSample
{
public
partial
class
UcTest2 : UserControl
{
public
UcTest2()
{
InitializeComponent();
WebServiceSoapClient sc
=
new
WebServiceSoapClient();
sc.getCategoryListCompleted
+=
(s, e)
=>
{
if
(e.Error
==
null
)
{
checkBoxList1.ItemsSource
=
e.Result;
}
};
sc.getCategoryListAsync();
}
private
void
Button_Click(
object
sender, RoutedEventArgs e)
{
//
获取选中的项目
IEnumerable
<
Category
>
list
=
(IEnumerable
<
Category
>
)checkBoxList1.ItemsSource;
IEnumerable
<
Category
>
selectedList
=
list.Where(a
=>
a.Selected
==
true
);
}
}
}
WebService代码
using
System;
using
System.Collections.Generic;
using
System.Web;
using
System.Web.Services;
///
<summary>
///
WebService 的摘要说明
///
</summary>
[WebService(Namespace
=
"
http://www.shanghaimart.com/
"
)]
[WebServiceBinding(ConformsTo
=
WsiProfiles.BasicProfile1_1)]
public
class
WebService : System.Web.Services.WebService
{
public
WebService()
{
//
如果使用设计的组件，请取消注释以下行
//
InitializeComponent();
}
[WebMethod]
public
List
<
Category
>
getCategoryList()
{
List
<
Category
>
list
=
new
List
<
Category
>
();
list.Add(
new
Category(
1
,
"
搭建管理费
"
,
true
));
list.Add(
new
Category(
2
,
"
电费
"
,
false
));
list.Add(
new
Category(
3
,
"
广告阵地费
"
,
true
));
list.Add(
new
Category(
4
,
"
加班费
"
,
false
));
list.Add(
new
Category(
5
,
"
物品损坏赔偿
"
,
true
));
list.Add(
new
Category(
6
,
"
空调费
"
,
false
));
list.Add(
new
Category(
7
,
"
展会折扣
"
,
true
));
list.Add(
new
Category(
8
,
"
租用物品
"
,
false
));
list.Add(
new
Category(
9
,
"
展厅增租
"
,
true
));
list.Add(
new
Category(
10
,
"
开幕式服务
"
,
false
));
list.Add(
new
Category(
11
,
"
租金
"
,
true
));
list.Add(
new
Category(
12
,
"
押金
"
,
false
));
list.Add(
new
Category(
13
,
"
服务费
"
,
true
));
list.Add(
new
Category(
14
,
"
收款
"
,
false
));
list.Add(
new
Category(
15
,
"
保证金
"
,
true
));
list.Add(
new
Category(
16
,
"
定金
"
,
false
));
list.Add(
new
Category(
17
,
"
税费
"
,
false
));
return
list;
}
}
[Serializable]
public
class
Category
{
public
Category()
{ }
public
Category(
int
id,
string
name,
bool
selected)
{
ID
=
id;
Name
=
name;
Selected
=
selected;
}
public
int
ID;
public
string
Name;
public
bool
Selected;
}