ItemsControl作为ListBoxItem,即ListBox嵌入列表ItemsControl的实现示例
示例中,在实际应用中,有时候ListBox item可能是不同的,
比如日程管理小程序,如果用一个ListBox item表示一天的日程,那一个item可能有一个日程安排,有可能有多个日程安排,也有可能是没有日程安排。
这时候我们可以用ItemsControl作为ListBox item,
即列表中嵌入列表。
首先,我们在页面放置一个ListBox,通过ListBox.ItemTemplate,设置每一个item的visual样式。
这里ListBox的Item是一个ItemsControl,ItemsContol顾名思义,它类似ListBox,也是一个列表。
[CODE]<phone:PhoneApplicationPage
x:Class="PhoneApp2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot 是包含所有页面内容的根网格-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel 包含应用程序的名称和页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="mainList" Height="580">
<ListBox.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Path=DataList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,20,0,0">
<TextBlock Text="{Binding date}" FontSize="24"/>
<StackPanel Orientation="Horizontal" Margin="0,12,0,0">
<Image Width="168" Height="93" Source="{Binding image}"/>
<StackPanel Margin="12,15,0,0">
<TextBlock Text="{Binding name}" FontSize="20" Width="210"/>
<TextBlock Text="{Binding detail}" FontSize="20" Margin="0,12,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
<!--演示 ApplicationBar 用法的示例代码-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="按钮 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="菜单项 1"/>
<shell:ApplicationBarMenuItem Text="菜单项 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>[/CODE]
在我们示例中,通过ObservableCollection<ShowDataList> showDatas为ListBox提供数据。
通过ShowDataList为ItemsControl提供数据,通过Data绑定为ItemsControl中每一个Item提供数据。
具体实现代码如下:
[CODE]using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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 Microsoft.Phone.Controls;
namespace PhoneApp2
{
public partial class MainPage : PhoneApplicationPage
{
public ObservableCollection<ShowDataList> showDatas { get; set; }
// 构造函数
public MainPage()
{
InitializeComponent();
showDatas = new ObservableCollection<ShowDataList>
{
new ShowDataList()
{
DataList= new List<Data>
{
new Data{date = "星期2 7月21号", name = "abd", image = "/Interface;component/Images/Show/default_2.jpg", detail= "ddsssss"},
new Data{date = "星期2 7月21号", name = "ccv", image = "/Interface;component/Images/Show/default_2.jpg", detail= "gssde"}
}
},
new ShowDataList()
{
DataList= new List<Data>
{
new Data{date = "星期3 7月21号", name = "abd", image = "/Interface;component/Images/Show/default_2.jpg", detail= "ddsssss"},
new Data{date = "星期3 7月21号", name = "ccv", image = "/Interface;component/Images/Show/default_2.jpg", detail= "gssde"},
new Data{date = "星期3 7月21号", name = "ccv", image = "/Interface;component/Images/Show/default_2.jpg", detail= "gssde"}
}
}
};
mainList.ItemsSource = showDatas;
}
}
public class ShowDataList
{
public List<Data> DataList { get; set; }
}
public class Data
{
public String date { get; set; }
public String image { get; set; }
public String name { get; set; }
public String detail { get; set; }
}
}[/CODE]