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

[b]问题：如何使用ListBox进行图文混编[/b]

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

[b]示例：[/b]



[b]前置条件：[/b]

1)　　XAML基础

2)　　C#基础

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

[b]实现：[/b]

目录：

1)　　创建一个基本应用

2)　　插入button及listbox控件

3)　　给listbox添加Item模板

4)　　创建Content及ContentCollection类

5)　　写入事件代码

6)　　测试运行

[b]1 创建一个基本应用[/b]

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

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

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

</Grid>

[b]2 插入button及listbox控件[/b]

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

[b]3 给listbox添加Item模板[/b]

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>

[b]4 创建Content及ContentCollection类[/b]

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()
{
}
}
}

[b]5 写入事件代码[/b]

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

[b]6 测试运行[/b]

点击Add按钮若干次



[b]说明：[/b]

　　listbox图文混编有几个要点：

　　　　1)　　设置其Item的样式

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

　　　　3)　　使用mySource使界面更新