这里来实现一个ListBox里面点击某项后 展示出它的选中项更多的数据
这时使用ExpanderView 来实现会非常简单
首先写实体类:
public
class
CustomPizza : INotifyPropertyChanged
{
private
bool
isExpanded;
public
string
Image {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
DateTime DateAdded {
get
;
set
; }
public
IList
<
PizzaOption
>
Options {
get
;
set
; }
public
bool
HasNoOptions
{
get
{
return
this
.Options
==
null
||
this
.Options.Count
==
0
; }
}
public
bool
IsExpanded
{
get
{
return
this
.isExpanded; }
set
{
if
(
this
.isExpanded
!=
value)
{
this
.isExpanded
=
value;
this
.OnPropertyChanged(
"
IsExpanded
"
);
}
}
}
public
event
PropertyChangedEventHandler PropertyChanged;
protected
void
OnPropertyChanged(
string
propertyName)
{
PropertyChangedEventHandler handler
=
this
.PropertyChanged;
if
(handler
!=
null
)
{
handler(
this
,
new
PropertyChangedEventArgs(propertyName));
}
}
}
public
class
PizzaOption
{
public
string
Name {
get
;
set
; }
}
创建Images文件夹并放入4张图片
写入数据
public
MainPage()
{
List
<
CustomPizza
>
customPizzas
=
new
List
<
CustomPizza
>
()
{
new
CustomPizza()
{
Name
=
"
Custom Pizza 1
"
,
DateAdded
=
new
DateTime(
2010
,
7
,
8
),
Image
=
"
Images/pizza1.png
"
,
Options
=
new
List
<
PizzaOption
>
{
new
PizzaOption() { Name
=
"
Ham
"
},
new
PizzaOption() { Name
=
"
Mushrooms
"
},
new
PizzaOption() { Name
=
"
Tomatoes
"
}
}
},
new
CustomPizza()
{
Name
=
"
Custom Pizza 2
"
,
DateAdded
=
new
DateTime(
2011
,
2
,
10
),
Image
=
"
Images/pizza2.png
"
,
Options
=
new
List
<
PizzaOption
>
{
new
PizzaOption() { Name
=
"
Ham
"
},
new
PizzaOption() { Name
=
"
Olives
"
},
new
PizzaOption() { Name
=
"
Mozzarella
"
}
}
},
new
CustomPizza()
{
Name
=
"
Surprise Pizza
"
,
Image
=
null
,
DateAdded
=
new
DateTime(
2011
,
4
,
1
),
Options
=
null
},
new
CustomPizza()
{
Name
=
"
Custom Pizza 3
"
,
Image
=
"
Images/pizza3.png
"
,
DateAdded
=
new
DateTime(
2011
,
5
,
15
),
Options
=
new
List
<
PizzaOption
>
{
new
PizzaOption() { Name
=
"
Salami
"
},
new
PizzaOption() { Name
=
"
Mushrooms
"
},
new
PizzaOption() { Name
=
"
Onions
"
} }
},
new
CustomPizza()
{
Name
=
"
Custom Pizza 4
"
,
Image
=
"
Images/pizza4.png
"
,
DateAdded
=
new
DateTime(
2011
,
7
,
20
),
Options
=
new
List
<
PizzaOption
>
{
new
PizzaOption() { Name
=
"
Pepperoni
"
},
new
PizzaOption() { Name
=
"
Olives
"
},
new
PizzaOption() { Name
=
"
Mozzarella
"
}
}
},
};
//
...
}
下面写前端页面,及数据跟UI的绑定
前面页面数据转换器:(比如08/08/2011年,我们即可以自动转换成文字"一个月以前")
<
phone:PhoneApplicationPage.Resources
>
<
toolkit:RelativeTimeConverter
x:Key
="RelativeTimeConverter"
/>
</
phone:PhoneApplicationPage.Resources
>
头部模板:
<
phone:PhoneApplicationPage.Resources
>
<
DataTemplate
x:Key
="CustomHeaderTemplate"
>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="
{StaticResource PhoneFontSizeExtraLarge}
"
FontFamily
="
{StaticResource PhoneFontFamilySemiLight}
"
/>
</
DataTemplate
>
</
phone:PhoneApplicationPage.Resources
>
下拉扩展列表模板
<
phone:PhoneApplicationPage.Resources
>
<
DataTemplate
x:Key
="CustomExpanderTemplate"
>
<
StackPanel
Orientation
="Horizontal"
>
<
Image
Source
="
{Binding Image}
"
Stretch
="None"
/>
<
TextBlock
Foreground
="
{StaticResource PhoneSubtleBrush}
"
FontSize
="
{StaticResource PhoneFontSizeNormal}
"
VerticalAlignment
="Center"
>
<
TextBlock.Text
>
<
Binding
Path
="DateAdded"
Converter
="
{StaticResource RelativeTimeConverter}
"
StringFormat
="Date added: {0}"
/>
</
TextBlock.Text
>
</
TextBlock
>
</
StackPanel
>
</
DataTemplate
>
</
phone:PhoneApplicationPage.Resources
>
每ListBox的Item 模板
<
phone:PhoneApplicationPage.Resources
>
<
DataTemplate
x:Key
="CustomItemTemplate"
>
<
TextBlock
Text
="
{Binding Name}
"
/>
</
DataTemplate
>
</
phone:PhoneApplicationPage.Resources
>
有没下拉列表时显示的模板
<
phone:PhoneApplicationPage.Resources
>
<
DataTemplate
x:Key
="CustomNonExpandableHeaderTemplate"
>
<
StackPanel
Orientation
="Vertical"
>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="
{StaticResource PhoneFontSizeExtraLarge}
"
FontFamily
="
{StaticResource PhoneFontFamilySemiLight}
"
/>
<
TextBlock
Foreground
="
{StaticResource PhoneSubtleBrush}
"
FontSize
="
{StaticResource PhoneFontSizeNormal}
"
>
<
TextBlock.Text
>
<
Binding
Path
="DateAdded"
Converter
="
{StaticResource RelativeTimeConverter}
"
StringFormat
="Date added: {0}"
/>
</
TextBlock.Text
>
</
TextBlock
>
<
TextBlock
Text
="The ingredients will be a surpise!"
Foreground
="
{StaticResource PhoneSubtleBrush}
"
FontSize
="
{StaticResource PhoneFontSizeNormal}
"
/>
</
StackPanel
>
</
DataTemplate
>
</
phone:PhoneApplicationPage.Resources
>
这时添加一个ListBox
<
ListBox
Grid.Row
="0"
x:Name
="listBox"
>
<
ListBox.ItemContainerStyle
>
<
Style
TargetType
="ListBoxItem"
>
<
Setter
Property
="HorizontalContentAlignment"
Value
="Stretch"
/>
</
Style
>
</
ListBox.ItemContainerStyle
>
<
ListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<
StackPanel
/>
</
ItemsPanelTemplate
>
</
ListBox.ItemsPanel
>
<
ListBox.ItemTemplate
>
<
DataTemplate
>
<
toolkit:ExpanderView
Header
="
{Binding}
"
Expander
="
{Binding}
"
ItemsSource
="
{Binding Options}
"
NonExpandableHeader
="
{Binding}
"
IsNonExpandable
="
{Binding HasNoOptions}
"
IsExpanded
="
{Binding IsExpanded, Mode=TwoWay}
"
HeaderTemplate
="
{StaticResource CustomHeaderTemplate}
"
ExpanderTemplate
="
{StaticResource CustomExpanderTemplate}
"
ItemTemplate
="
{StaticResource CustomItemTemplate}
"
NonExpandableHeaderTemplate
="
{StaticResource CustomNonExpandableHeaderTemplate}
"
/>
</
DataTemplate
>
</
ListBox.ItemTemplate
>
</
ListBox
>
最后设置ListBox的ItemSource :
this
.listBox.ItemsSource = customPizzas;
