ItemsControl作为ListBoxItem，即ListBox嵌入列表ItemsControl的实现示例

[Vincent-DEVDIV]

示例中，在实际应用中，有时候ListBox item可能是不同的，
比如日程管理小程序，如果用一个ListBox item表示一天的日程，那一个item可能有一个日程安排，有可能有多个日程安排，也有可能是没有日程安排。
这时候我们可以用ItemsControl作为ListBox item,
即列表中嵌入列表。

首先，我们在页面放置一个ListBox，通过ListBox.ItemTemplate，设置每一个item的visual样式。
这里ListBox的Item是一个ItemsControl，ItemsContol顾名思义，它类似ListBox，也是一个列表。

<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>

在我们示例中，通过ObservableCollection<ShowDataList> showDatas为ListBox提供数据。
通过ShowDataList为ItemsControl提供数据，通过Data绑定为ItemsControl中每一个Item提供数据。
具体实现代码如下：

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; }
    }

}