WP7>界面>ListBox数据绑定、图文混编、动态添加行

问题：如何使用ListBox进行图文混编

　　我的理解：实际就是对ListBox进行数据绑定（添加数据模板），然后动态添加行（ListItem）

示例：

前置条件：

1)　　XAML基础

2)　　C#基础

3)　　WP7基础　　-> listbox使用基本知识　　->工程创建

实现：

目录：

1)　　创建一个基本应用

2)　　插入button及listbox控件

3)　　给listbox添加Item模板

4)　　创建Content及ContentCollection类

5)　　写入事件代码

6)　　测试运行

1 创建一个基本应用

1)　　创建一个基本的Windows Phone应用程序，OS版本7.0

2)　　清除多余的界面元素（留下一个基本的Grid控件）

<Grid x:Name="LayoutRoot" Background="Transparent">

</Grid>

2 插入button及listbox控件

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="696*" />
        </Grid.RowDefinitions>
        <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160"/>
        <ListBox Grid.Row="1"  Name="listBox1">

        </ListBox>
    </Grid>

3 给listbox添加Item模板

1)　　添加一个Itme模板属性

　　<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="696*" />
        </Grid.RowDefinitions>
        <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
        <ListBox Grid.Row="1"  Name="listBox1">
            <ListBox.ItemTemplate>
                <DataTemplate>
 
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

2)　　给Itme模板添加样式

（注：Item模板的样式是看不到的，但是你可以将模板样式的代码放到新建页面中去看实际效果）

样式代码：

                    <Grid Width="455" Height="120">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                        <Grid Grid.Column="1" Name="grid1" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60*" />
                                <RowDefinition Height="60*" />
                            </Grid.RowDefinitions>
                            <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="123" />
                            <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="234" VerticalAlignment="Top" Width="332" />
                        </Grid>
                    </Grid>

新建一个页面，添加该样式的代码，效果如下：

给模板添加样式后的代码：

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="696*" />
        </Grid.RowDefinitions>
        <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
        <ListBox Grid.Row="1"  Name="listBox1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="455" Height="120">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                        <Grid Grid.Column="1" Name="grid1" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60*" />
                                <RowDefinition Height="60*" />
                            </Grid.RowDefinitions>
                            <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="123" />
                            <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="234" VerticalAlignment="Top" Width="332" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

3)　　为Image控件及TextBlock控件添加绑定数据源

为Image控件添加一个新属性source="{Binding Img}" 意思是Image的source属性绑定了Img这个量。（注：source可以是一个图片的网络地址，也可以是一个本地图片的地址）

修改TextBlock控件的Text属性分别为Text="{Binding Time}" 和 Text="{Binding Count}"，意思是这两个控件的text属性分别绑定了Time量和Count量。

最终界面代码如下

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="696*" />
        </Grid.RowDefinitions>
        <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
        <ListBox Grid.Row="1"  Name="listBox1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="455" Height="120">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Width="120" Height="120" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Img}"/>
                        <Grid Grid.Column="1" Name="grid1" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60*" />
                                <RowDefinition Height="60*" />
                            </Grid.RowDefinitions>
                            <TextBlock Height="30" HorizontalAlignment="Left" Name="textBlock1" VerticalAlignment="Top" Width="332" Text="{Binding Time}" />
                            <TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock2" Text="{Binding Count}" VerticalAlignment="Top" Width="332" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

4 创建Content及ContentCollection类

1)　　在界面中，Item模板绑定了3个量Img、Time、Count，对应的我们新建一个Content类

using System;
using System.Net;
using System.ComponentModel;
using System.Runtime.Serialization;
using System.Collections.ObjectModel;

namespace PhoneApp1
{
    public class Content
    {
        private string time;
        private string count;
        private string img;

        public string Time
        {
            get { return time; }
            set
            {
                if (time != value)
                    time = value;
                NotifyPropertyChanged("Time");
            }
        }

        public string Count
        {
            get { return count; }
            set
            {
                if (count != value)
                    count = value;
                NotifyPropertyChanged("Count");
            }
        }

        public string Img
        {
            get { return img; }
            set
            {
                if (img != value)
                    img = value;
                NotifyPropertyChanged("Img");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }
}

注：其中NotifyPropertyChanged("Img")中的“Img”对应的就是在界面中Source="{Binding Img}"中的Img

2)　　然后新建一个ContentCollection类

using System;
using System.Net;
using System.ComponentModel;
using System.Runtime.Serialization;
using System.Collections.ObjectModel;

namespace PhoneApp1
{
    public class ContentCollection : ObservableCollection<Content>
    {
        public ContentCollection()
            : base()
        {
        }
    }
}

5 写入事件代码

    public partial class MainPage : PhoneApplicationPage
    {
        ContentCollection mySource;
        int count = 0;
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            mySource = new ContentCollection();
            listBox1.ItemsSource = mySource;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Content content = new Content();
            content.Img = "http://pic.cnblogs.com/face/u97911.jpg";
            content.Time = DateTime.Now.ToString();
            content.Count = count.ToString();
            count++;
            mySource.Add(content);
        }
    }

6 测试运行

点击Add按钮若干次

说明：

 　　listbox图文混编有几个要点：

　　　　1)　　设置其Item的样式

　　　　2)　　创建一个对应的实体数据Content

　　　　3)　　使用mySource使界面更新