這里來實現一個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;
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
